Expand Row (show details) when row is selected

9 posts, 1 answers
  1. Michael Love
    Michael Love avatar
    49 posts
    Member since:
    Sep 2009

    Posted 22 Sep 2009 Link to this post

    Hi there.

    I have a rad grid with a detail table and I want to have the master row expand (to show the details) when a master row is selected. What is the best way to do this?

    Thanks, Mike
  2. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 22 Sep 2009 Link to this post

    Hello Michael-

    This scenario can be achieved by using RadGrid's HierarchyLoadMode.Client and the JavaScript API to respond to a grid row's client-side click event. (You could also do this server side by setting the Grid's AutoPostBackOnRowClick property to True and writing server logic to expand a nested view.)

    You can see an example of the client-side API in action with a RadGrid hierarchy here:

    There is also an interesting (albeit a bit older) demo here showing you how to expand a RadGrid hierarchy on row double click:

    Hopefully these examples will help get you started.
    -Todd


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael Love
    Michael Love avatar
    49 posts
    Member since:
    Sep 2009

    Posted 22 Sep 2009 Link to this post

    Hi Todd.

    Thanks for the response. The example you gave is not exactly what I want. Let me see if I can explain it a little more clearly.

    I have a working radgrid that has master and detail tables. When I click on the expand indicator, it works fine and displays the detail rows. I do have AllowClientSelect="true" which allows the user to select the row and the client highlights the row. That is good too. What I want to add is that when I select a master row (just clicking somewhere on the row, but not clicking on the expand indicator), I want to programmatically show the detail rows as if I had clicked on the expand indicator. Does that make sense?

    Thanks again.

    Mike
  5. Answer
    Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 22 Sep 2009 Link to this post

    Hi Mike-

    Thanks for the extra detail. I know it can be hard to get "perfect understanding" over forums without good reference demos, so let me try to provide some more info and we'll go from there.

    I think I understand your scenario as this:
    1. You have a master/detail (hierarchical) RadGrid with the HierarchyLoadMode set to Client
    2. All the expanding/collapsing works as expected when clicking on the expand arrow
    3. You want to enable the "expand action" to occur when a row is clicked anywhere

    If that's the case, I encourage you to re-study the links I shared. Those links highlight the RadGrid's client-side API for hierarchy, which you can use to respond to the RadGrid client-side row events (like OnRowClick, OnRowDblClick, or OnRowSelected). The idea is this:

    1. Using JavaScript, wire-up and handle an event like OnRowClick
    2. In the JavaScript function, call the set_expanded() client event of the GridDataItem object (passed in the event args)

    This should have the effect of expanding the details area of a GridDataItem when the row is clicked anywhere. Does that make more sense? Let me know if it's still off track and we can try something else.

    -Todd
  6. Raja
    Raja avatar
    13 posts
    Member since:
    Oct 2011

    Posted 04 Oct 2011 Link to this post

    Todd,

    I have a similar situation, but a small change.
    Can we implement the same JavaScript handling to show the Details Table, when user clicks on a LinkButton inside RadGridColumn?

    I have 2 link buttons in 2 different Columns, Upon Click one(1st Link Button in Column1), I have to show one Detail Table(1st Detail Table) and Vice Versa

    <telerik:GridTemplateColumn EditFormColumnIndex="1" FooterText="Total:" FooterStyle-HorizontalAlign="Right" AllowFiltering="true" UniqueName="agency" HeaderStyle-Width="300px" DataField="Agency" HeaderText="Agency">
                                        <ItemTemplate>             
                                            <asp:LinkButton ID="lnkViewMOU" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Agency")%>' OnClientClick="ExpandCollapseMasterTableViewItem(); return false;"  ></asp:LinkButton>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn
     
    --------------------------------------------------------------------------
    function ExpandCollapseMasterTableViewItem() {
             var rowIndex = eventArgs.get_itemIndexHierarchical();
             if (rowIndex.indexOf(':') != -1) {
                 rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);
             }
             var firstMasterTableViewRow = $find("<%= RdWOListDCNET.MasterTableView.ClientID %>").get_dataItems()[rowIndex];
             if (firstMasterTableViewRow.get_expanded()) {
                 firstMasterTableViewRow.set_expanded(false);
             }
             else {
                 firstMasterTableViewRow.set_expanded(true);
             }
         }

    This returns Nothing... I mean My Details Table is not visible.... Am going wrong somewhere here.... Can you please help me Todd....

  7. Raja
    Raja avatar
    13 posts
    Member since:
    Oct 2011

    Posted 05 Oct 2011 Link to this post

    Any Help from Telerik Team ?????????????? Please
  8. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 05 Oct 2011 Link to this post

    Hello Raja-

    This is a very old thread, so typically they don't get as much engagement. Generally it's better to open a new thread than ask a new question in an old thread, especially when the old thread already has a marked answer.

    That said, I'm still happy to help.

    In this case, your JavaScript is trying to us a few things that are not available, like "eventArgs." If you do some basic debugging using tools like the Chrome Developer Tools or IE Developer Tools, you'll see this object does not exist. Instead, try this JavaScript:

    function ExpandThisMasterTableViewItem(sender) {
          //Get id of parent GridRow for the link that was clicked
          var rowIndex = $(sender).closest("tr").attr("id");
          //Parse the row index from the ID (probably a better way to do this I'm still missing...)
          rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);
     
          var firstMasterTableViewRow = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[rowIndex];
          if (firstMasterTableViewRow.get_expanded()) {
              firstMasterTableViewRow.set_expanded(false);
          }
          else {
              firstMasterTableViewRow.set_expanded(true);
          }
    }

    To provide the "sender" to my JavaScript, I modify the markup slightly, too:

    <ItemTemplate>            
          <a href="#" onclick="ExpandThisMasterTableViewItem(this); return false;">Button Test</a>
    </ItemTemplate>

    Notice the "this" being passed to my JS function. That's the sender element. You also see that I've switched from using a LinkButton to just a standard HTML link. If you're only using these links to fire client-side actions, there's no real need for the server control. Still, you could modify your OnClientClick definition just the same if you want to continue using LinkButtons.

    Now, when one of these link buttons is clicked, the detail table associated with the row is expanded.

    Hope this helps.

    -Todd

    P.S. I should note that I'm using jQuery to get the ID of the parent grid row element. You can do this without jQuery, but the jQuery approach is a bit more robust.
  9. Raja
    Raja avatar
    13 posts
    Member since:
    Oct 2011

    Posted 05 Oct 2011 Link to this post

    Thanks alot Todd.. That works..
  10. Fawad
    Fawad avatar
    20 posts
    Member since:
    Nov 2014

    Posted 20 Jan 2015 in reply to Todd Anglin Link to this post

    Todd,
    Can you please write me down the server side logic for expanding/collapsing details. It works fine when i go with client side but when I change the property of HierarchyLoadMode to 'Client', it turns off my server communication.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017