Set selected telerik:RadGrid row on Client side

9 posts, 0 answers
  1. Michael
    Michael avatar
    4 posts
    Member since:
    Dec 2012

    Posted 12 Dec 2012 Link to this post

    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.
     

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

    Posted 12 Dec 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    4 posts
    Member since:
    Dec 2012

    Posted 13 Dec 2012 Link to this post

    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.
  5. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 17 Dec 2012 Link to this post

    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.
  6. Michael
    Michael avatar
    4 posts
    Member since:
    Dec 2012

    Posted 17 Dec 2012 Link to this post

    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.

  7. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 20 Dec 2012 Link to this post

    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.
  8. Michael
    Michael avatar
    4 posts
    Member since:
    Dec 2012

    Posted 23 Dec 2012 Link to this post

    Thanks,
    now all is all right.

    Regards,
    Michael.
  9. Mustafa
    Mustafa avatar
    1 posts
    Member since:
    Jun 2014

    Posted 03 Nov 2014 Link to this post

    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);
    }
  10. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 06 Nov 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017