RadGrid Selecting Row ClientSide With Grouping Is Selecting Wrong Row

7 posts, 1 answers
  1. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 25 Aug 2013 Link to this post

    Hi,
     I am trying to get the selected row client side on a grid that has grouping enabled.  I have a button in a grid template column that when clicked runs a javascript function that selects the row. 

    My problem is if the user has the grid grouped by any items then the row selected is always off by the number of items that the grid is grouped by.

    For example , if the user has selected to group the grid by 2 items and I click the button on the first row in the grid, then the row index returned is 2 but the actual row selected is the 4th row.  Using my code below, the alert returns 2 but  the 4th row is changed to yellow.

    If I do not have the grid grouped by any items, then the code works fine.
    Button

    <telerik:GridTemplateColumn UniqueName="gtcEdit" HeaderText="Edit" HeaderStyle-Width="50px" >

    <ItemTemplate><telerik:RadButton ID="rbtEdit" runat="server" CommandArgument="edit" ButtonType="StandardButton" AutoPostBack="false" Width="30px" Text="Edit" OnClientClicked="EditRecord" />

    </ItemTemplate>

    </telerik:GridTemplateColumn>



    Below is the JavaScript

    function EditRecord(sender, eventArgs) {

    var rowIndex = sender.get_element().parentNode.parentNode.rowIndex - 1;

    var radGrid = $find('<%=rgvMainGrid.ClientID %>');

    var masterTable = radGrid.get_masterTableView();

    var selectedRow = masterTable.get_dataItems()[rowIndex];

    masterTable.selectItem([rowIndex]);

    masterTable.get_dataItems()[rowIndex]._element.style.backgroundColor = "Yellow";

    alert('edit ' + rowIndex);
    }

    How can I adjust for this when the grid is grouped?

    Thanks for your help.
    Tracy

  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 26 Aug 2013 Link to this post

    Hello,

    Please try with the below code snippet.

    function EditRecord(sender, eventArgs) {
                  alert(sender._element.getAttribute("rowindex")); // Get Row index
                  alert(sender._element.getAttribute("rowkey")); // Get Row DatakeyValue
              }
    <MasterTableView DataKeyNames="ID">
               <Columns>
                
                   <telerik:GridTemplateColumn UniqueName="gtcEdit" HeaderText="Edit" HeaderStyle-Width="50px">
                       <ItemTemplate>
                           <telerik:RadButton ID="rbtEdit" runat="server" CommandArgument="edit" ButtonType="StandardButton"
                               AutoPostBack="false" Width="30px" Text="Edit" OnClientClicked="EditRecord" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
               </Columns>
           </MasterTableView>
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data1 = new[] {
              new { ID = 1, Name ="Name_1",activity_title="title1"},
              new { ID = 2, Name = "Name_2",activity_title="title2"},
              new { ID = 3, Name = "Name_1",activity_title="title3"},
              new { ID = 4, Name = "Name_4",activity_title="title4"},
              new { ID = 5, Name = "Name_1",activity_title="title5"}
          };
        RadGrid1.DataSource = data1;
    }
     
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            RadButton rbtEdit = item.FindControl("rbtEdit") as RadButton;
     
            rbtEdit.Attributes.Add("rowindex", item.ItemIndex.ToString());
            rbtEdit.Attributes.Add("rowKey", item.GetDataKeyValue("ID").ToString());
        }
    }


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 26 Aug 2013 Link to this post

    Hi Jayesh,

    Thank you for your response, but this did not solve my issue.

    I can get the correct row index, the problem is when the grid is grouped the incorrect row is selected.

    For example , if the user has selected to group the grid by 2 items and I click the button on the first row in the grid, then the row index returned is 2 but the actual row selected is the 4th row.  Using my code below, the alert returns 2 but  the 4th row is changed to yellow.

    function EditRecord(sender, eventArgs) {

    var rowIndex = sender.get_element().parentNode.parentNode.rowIndex - 1;

    var radGrid = $find('<%=rgvMainGrid.ClientID %>');

    var masterTable = radGrid.get_masterTableView();

    var selectedRow = masterTable.get_dataItems()[rowIndex];

    masterTable.selectItem([rowIndex]);

    masterTable.get_dataItems()[rowIndex]._element.style.backgroundColor = "Yellow"ROW 4 is HIGHLIGHTED

    alert('edit ' + rowIndex);  ROW 2 IS RETURNED
    }

    Thank You
    Tracy

  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2013 Link to this post

    Hi Tracy,

    Please try the below code snippet.It shows how to access the index when the columns are grouped.If this doesn't help,please provide your full code.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView DataKeyNames="OrderID">
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField FieldName="ShipCity" HeaderText="ShipCity" />
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="ShipCity" SortOrder="Descending" />
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
            <Columns>
                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
                <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
                <telerik:GridTemplateColumn UniqueName="edit" HeaderText="Edit" >
                    <ItemTemplate>
                        <telerik:RadButton ID="rbtEdit" runat="server" CommandArgument="edit" ButtonType="StandardButton"
                            AutoPostBack="false" Width="30px" Text="Edit" OnClientClicked="EditRecord" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    C#:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
      {
          if (e.Item is GridDataItem)
          {
              GridDataItem item = e.Item as GridDataItem;
              RadButton Editbtn = item.FindControl("rbtEdit") as RadButton;
              Editbtn.Attributes.Add("rowindex", item.ItemIndex.ToString());        
          }
      }

    JS:
    <script type="text/javascript">
        function EditRecord(sender, eventArgs) {
            var radGrid = $find('<%=RadGrid1.ClientID %>');
            var masterTable = radGrid.get_masterTableView();
            alert(sender._element.getAttribute("rowindex")); // Get Row index
            var row = sender._element.getAttribute("rowindex");
            masterTable.get_dataItems()[row]._element.style.backgroundColor = "Yellow";   
        }
     
    </script>

    Thanks,
    Princy
  6. Sandy
    Sandy avatar
    1 posts
    Member since:
    Oct 2013

    Posted 09 Oct 2013 Link to this post

    Hi Tracy,
    Please try the below code

    function EditRecord(sender, eventArgs) {

    var rowIndex = sender._element.parentNode.parentNode.rowIndex - 1;

    var radGrid = $find('<%=rgvMainGrid.ClientID %>');

    var masterTable = radGrid.get_masterTableView();

    var selectedRow = masterTable.get_dataItems()[rowIndex];

    masterTable.selectItem([rowIndex]);

    masterTable.get_dataItems()[rowIndex]._element.style.backgroundColor = "Yellow"

    Thank You

    Sandy


    Posted on Aug 26, 2013

    Hi Tracy,

    Please try the below code
  7. Farshad
    Farshad avatar
    1 posts
    Member since:
    May 2015

    Posted 20 Jun Link to this post

    i have same problem. but i use GridButtonColumn like this:

    <telerik:GridButtonColumn ButtonType="ImageButton" ItemStyle-Width="5%" HeaderText="جزئیات" CommandName="Details" ConfirmDialogType="Classic" HeaderStyle-Width="5%" />

    my code is client side to read that index.

    please help me.

  8. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 23 Jun Link to this post

    Hello Farshad,

    You can use the following approach to select the item when Details command is initiated:
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnCommand="gridCommand" />
    </ClientSettings>
    JavaScript:
    function gridCommand(sender, args) {
        if (args.get_commandName() == "Details") {
            args.get_tableView().selectItem(parseInt(args.get_commandArgument()));
        }
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017