Set selected telerik:RadGrid row on Client side

[Michael]

Hi ,
I must select row in my RadGrid from JavaScript on client.
I add

<ClientEvents OnRowClick="onClick_HistoryTable" />

to ClientSettings of my Grid and add to .js file function:

function onClick_HistoryTable(sender, eventArgs) {

     a) var masterTable = sender.get_masterTableView();
     b) var masterTable = $find(WorkflowsControls.HistoryGrid).get_masterTableView();
      
     masterTable.clearSelectedItems();
     1) masterTable.selectItem(masterTable.get_dataItems()[0].get_element());
     2) masterTable.selectItem(0);
     3) masterTable.get_dataItems()[0].set_selected("true");
     4) masterTable.get_dataItems()[0]._selected = true;
     5) var rowControl = masterTable.get_dataItems()[0].get_element();
        masterTable.selectItem(rowControl, true);  

}

 I tied  both cases a) and b) with all options (1-5) but it never worked.

This is using Grid:

 

<telerik:RadGrid ID="HistoryGrid" runat="server" AutoPostBack="true" CellSpacing="0"
GridLines="None" Skin="Office2010Blue" AutoGenerateColumns="False"
OnDetailTableDataBind="HistoryGrid_DatdataBind" OnNeedDataSource="HistoryGrid_NeedDataSource"
MasterTableView-ShowHeadersWhenNoRecords="False" Height="520px"> 
<ClientSettings EnablePostBackOnRowClick="True" AllowKeyboardNavigation="false" AllowColumnsReorder="True" Resizing-AllowColumnResize="True">
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
<ClientEvents OnRowClick="onClick_HistoryTable" /> 
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" TableLayout="Fixed" BorderStyle="None"
ExpandCollapseColumn-Visible="True">  
<Columns>
<telerik:GridImageColumn UniqueName="ColumnImage" AllowSorting="false" DataImageUrlFields="ImageUrl"
Resizable="false" Reorderable="false">
<HeaderStyle Width="25px"></HeaderStyle>
</telerik:GridImageColumn>
<telerik:GridBoundColumn UniqueName="FileName" HeaderText="File Name" DataField="FileName"
AllowSorting="false"> 
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="StageName" HeaderText="Stage Name" DataField="StageName"> 
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="User" HeaderText="User" DataField="User">  
</telerik:GridBoundColumn> 
</Columns>
<DetailTables>
<telerik:GridTableView runat="server" AutoGenerateColumns="False">
<SortExpressions>
<telerik:GridSortExpression FieldName="Date" SortOrder="Descending" />
</SortExpressions>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
</telerik:RadGrid>

 

 

What must I do?

Regards,
  Michael Milman.
 

[Jayesh Goyani]

Hello,

As per your code when we click on any row first of all it fies the JavaScript function (onClick_HistoryTable).
Then it will do postback (so, may be you lost setting which done by JS).

To check your JS code is working or not set AutoPostBack="false".

If it is working then perform this login prerender event/function.

Let me know if any other concern.

Thanks,
Jayesh Goyani

[Michael]

Hi Jayesh,
I set  AutoPostBack of HistoryGrid to "false", but don't see any changes and after that it stoped on breakpoint in Page_Load  funtion in my cs code(server side) . After that I check : this.AutoPostBack="false" in  JavaScript function onClick_HistoryTable with same result
Thanks,
Michael.

[Eyup]

Hello Michael,

Please note that when you have AllowRowSelect set to True, the selecting functionality on RowClick is already enabled:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx

If this is not the case with your application, please provide us the exact steps to reproduce the issue or open a support ticket to send us a sample runnable application demonstrating the erratic behavior. Thus, we will be able to further analyze the problem and provide a proper solution.

All the best,
Eyup
the Telerik team

[Michael]

Hi,
On my System.Web.UI.UserControl I have 2 telerik:RadGrids one with DetailTable(some lines have nested tables,not all). They both have properties  AllowRowSelect set to True. On RadGrid without DetailTable after Click I immediately see selections  witout any additionals actions.  On second RadGrid I don't see that. I add to this grid ClientEvent OnRowClick="onClick_HistoryTable", onClick_HistoryTable - JavaScript function(You can see this in my first post) but this didn't work too. Only after event on server-side (if I use property OnItemCommand="HistoryGrid_ItemComand") I can  set selection on clicked grid line by

HistoryGrid.SelectedIndexes.Add(e.Item.ItemIndex);
but I can see selected line only after ending of event processing on server, and this takes some time(3-4 sec.) and is not good enough.

Regards,
Michael.

[Eyup]

Hi Michael,

I have created a sample RadGrid web site where I implemented the described scenario. Please check out the attached application and verify that the selection works as expected for both of the grids.

All the best,
Eyup
the Telerik team

[Michael]

Thanks,
now all is all right.

Regards,
Michael.

[Mustafa]

hi friends
I have Solve this state
function GridDoubleClikFisler(sender, eventArgs) {
var grid = $find("<%=GrdCfOlusanFisler.ClientID%>").get_masterTableView();
var Index = eventArgs.get_itemIndexHierarchical();
grid.selectItem(Index);
var row = grid.get_dataItems()[Index];
row.set_selected(true);
}

[Eyup]

Hello Mustafa,

Thank you for sharing your approach with our community. Generally, the selectItem method should be sufficient in this case:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-selectitem.html

Regards,
Eyup
Telerik

 

 

[Sean]

I was having similar issue what helped me was doing this:

$find("<%=RadGrid1.ClientID %>").clearSelectedItems();

apparently trying to select row of detail table from JS when row of master table is selected will not work.. first have to clear selected items from grid then select one.. in my case multiple row selection is not allowed. 

so now my code looks something like this:

 

$find("<%=RadGrid1.ClientID %>").clearSelectedItems();

detailTable.get_dataItems()[index].set_selected(true); 

 

and it works! hope this helps someone! (:

[Eyup]

Hello Sean, 

I'm glad you've managed to achieve what you were after and the approach is working as expected. Also, thank you for sharing your observance and sample with our community.

We also have a system for rewarding Telerik points if you create new code-libraries:
https://www.telerik.com/community/telerik-points

You can use these points to get discount when upgrading or purchasing a Telerik license. By the way, I am not able to see any active trial or subscription for this account. Could you contact your dev team manager or our Telerik sales to add you as a trial/license owner?

Regards,
Eyup
Progress Telerik