Gmail style row click

3 posts, 0 answers
  1. ColinBowern
    ColinBowern avatar
    51 posts
    Member since:
    Aug 2012

    Posted 15 Jun 2009 Link to this post

    I am looking to recreate a Gmail style experience.  If I click a row anywhere other than the checkbox it should make a call to the view page; if I select the item with the checkbox then it should stay on the page and highlight the item. So far I have experiemented with the ItemCommand event but the postback just to get the highlighted row is a bit ugly.  Is there a smoother way to make this happen?

    Thanks,
    colin
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jun 2009 Link to this post

    Hi Colin,

    Try the following approach of conditionally initiate postback request when clicking the row (not when clicking checkbox) instead of setting EnablePostBackOnRowClick to True. See the code that I tried to achieve this.

    ASPX:
     
    <telerik:radgrid id="RadGrid1" runat="server" allowmultirowselection="True" datasourceid="SqlDataSource1"
    <MasterTableView DataSourceID="SqlDataSource1" EditMode="InPlace" CommandItemDisplay="Top" AutoGenerateColumns="False"
    <Columns> 
         <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" UniqueName="OrderID"
        </telerik:GridBoundColumn> 
           . . . 
    </Columns> 
    </MasterTableView> 
    <ClientSettings> 
    <ClientEvents OnRowClick="OnRowClick" /> 
    <Selecting AllowRowSelect="True"></Selecting> 
    </ClientSettings> 
    </telerik:radgrid> 

    JavaScript:
     
    <script type="text/javascript"
     function OnRowClick(sender, args)   
      {      
        var e = args.get_domEvent();       
        var targetElement = e.srcElement || e.target;     
        if(targetElement!= null)   
        { 
            if(targetElement.tagName.toLowerCase() != "input" && (!targetElement.type || targetElement.type.toLowerCase() != "checkbox"))  
            {   
              __doPostBack("<%= RadGrid1.UniqueID %>""RowClicked:"  + args.get_itemIndexHierarchical()); 
            }   
        } 
    </script> 

    CS:
     
    protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument) 
        base.RaisePostBackEvent(source, eventArgument); 
        if (source == RadGrid1 && eventArgument.IndexOf("RowClicked") != -1) 
        { 
            GridDataItem item = RadGrid1.Items[int.Parse(eventArgument.Split(':')[1])];  // Clicked row 
            Response.Write(item["OrderID"].Text.ToString()); 
            // Call/redirect to another page 
        } 

    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ColinBowern
    ColinBowern avatar
    51 posts
    Member since:
    Aug 2012

    Posted 21 Jun 2009 Link to this post

    Perfect, thanks!
Back to Top