This is a migrated thread and some comments may be shown as answers.

Set selected telerik:RadGrid row on Client side

10 Answers 527 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Dec 2012, 03:40 PM
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.
 

10 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 13 Dec 2012, 05:04 AM
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
0
Michael
Top achievements
Rank 1
answered on 13 Dec 2012, 08:50 AM
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.
0
Eyup
Telerik team
answered on 17 Dec 2012, 09:45 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
answered on 17 Dec 2012, 02:46 PM
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.

0
Eyup
Telerik team
answered on 20 Dec 2012, 08:06 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
answered on 23 Dec 2012, 03:42 PM
Thanks,
now all is all right.

Regards,
Michael.
0
Mustafa
Top achievements
Rank 1
answered on 03 Nov 2014, 10:42 AM
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);
}
0
Eyup
Telerik team
answered on 06 Nov 2014, 08:20 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Sean
Top achievements
Rank 1
answered on 25 Jun 2019, 05:46 PM

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! (:

0
Eyup
Telerik team
answered on 28 Jun 2019, 04:43 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Michael
Top achievements
Rank 1
Eyup
Telerik team
Mustafa
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Share this question
or