Labels for expanding nested view

[Eliyahu Goldin]

I am using nested view templates. To expand into the nested view, user needs to click the arrow image on the row's left. Is there a way to put some labels to make the template opening action more explicit? Can the left-most column with the clickable arrow have a header, like other columns in the grid, where I could put text "Details"?

Also, can I replace the tooltip of the expand bottom? I'd like to put there "Click to see more details...".

If I can do the above, I will have to introduce a hyperlink column with text "Details" to open the nested view programmatically upon clicking the link. Is that possible?

[Radoslav]

Hi Eliyahu,

To add text to the header of the left-most column with the clickable arrow you could try setting the MasterTableView ExpandCollapseColumn-HeaderText property to "Details".

To replace the tooltip of the expand image you could try using the following code snippet:

void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
        ((e.Item as GridDataItem).Controls[0].Controls[0] as Button).ToolTip = "Click to see more details...";

  }
}

Additionally to have a hyperlink column with text "Details" which open the nested view programmatically upon clicking the link you could try using the following approach :
Add GridTemplateColumn as following:

<telerik:GridTemplateColumn UniqueName="Aircraft_Column" DataField="Aircraft" HeaderText="Details" SortExpression="Aircraft">
   <ItemTemplate>
     <asp:LinkButton ID="LinkButton1" ToolTip="Click For More Details" runat="server" Text="ExpandS" OnClick="LinkButton1_Click">Expand/Collapse</asp:LinkButton>
     </ItemTemplate>
      <HeaderStyle BorderWidth="0px" Width="5%" HorizontalAlign="Center" />
         <ItemStyle Width="5%" HorizontalAlign="Center" />
</telerik:GridTemplateColumn>

Then on LinkButton1_Click you could expand or collapse the detail view:

protected void LinkButton1_Click(object sender, EventArgs e)
{
     LinkButton lnkButton = (LinkButton)sender;
     GridDataItem item = (GridDataItem)lnkButton.NamingContainer;
     item.ChildItem.Expanded = item.ChildItem.Visible;
     item.Expanded = !item.Expanded;
}

Additionally i am sending you a simple example which demonstrating the both approaches.

I hope this helps.

Best wishes,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ron]

How would this be implemented for client side expanding/collapsing?

[Radoslav]

Hello Ron,

To achieve the desired functionality you need to set the MasterTableView.HierarchyLoadMode to Client. Then on RadGrid.OnRowMouseOver event handler you could get the _itemIndexHierarchical of the hovered row:

var itemIndexHierarchical;
function OnRowMouseOver(sender, eventArgs)
{
    itemIndexHierarchical = eventArgs._itemIndexHierarchical;
}

On LinkButton.OnClientClick event handler you could get the row by the saved itemIndexHierarchical and expand or collapse it:

function ExpandeCollapse(sender)
{
     var masterTableViewRow = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[itemIndexHierarchical];
      masterTableViewRow.set_expanded(!masterTableViewRow.get_expanded());
}

Additionally I am sending you the modified example.

Best wishes,
Radoslav
the Telerik team