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

Hello,

Please try with the below code snippet.



Thanks,
Jayesh Goyani

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

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

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.

Hello Farshad,

You can use the following approach to select the item when Details command is initiated:
JavaScript:

I hope this will prove helpful.

Regards,
Eyup
Telerik