RadGrid Selecting Row ClientSide With Grouping Is Selecting Wrong Row

[Tracy]

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

[Jayesh Goyani]

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

[Tracy]

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

[Princy]

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

[Sandy]

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

[Farshad]

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.

[Eyup]

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