Expand Row (show details) when row is selected

[Michael Love]

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

[Todd Anglin]

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:

http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchyloadmodeclient/defaultcs.aspx

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

http://www.telerik.com/community/code-library/aspnet-ajax/grid/expand-collapse-hierarchy-client-side-on-double-click.aspx

Hopefully these examples will help get you started.

-Todd

[Michael Love]

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

[Todd Anglin]

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

[Raja]

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....

[Raja]

Any Help from Telerik Team ?????????????? Please

[Todd Anglin]

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.

[Raja]

Thanks alot Todd.. That works..

[Fawad]

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.