Creating an Expandable "Details" link strategy

[Reid]

I am not sure if this is the right forum but are there any known links to demonstrate a client side expand/collapsible section to show the hidden details of a section that can be clicked on to show embedded details?

The RadGrid is using an <ItemTemplate> and I want to by default show only one of the 5 fields, and give the user a "details .." link or icon  on each row that would expand the item to reveal those fields on demand.

Thanks

[Princy]

Hello Reid,

You can either use a DetailTable or a NestedViewTemplate to display details for a each row in the grid. And also you can use the following code to access the "details.." linkbutton to expand the corresponding row:
cs:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
      if (e.Item is GridDataItem)
       {
            GridDataItem dataItem = (GridDataItem)e.Item;
            LinkButton lnk = (LinkButton)dataItem.FindControl("DetailsLinkButtonID");
            int index = e.Item.ItemIndex;
            lnk.Attributes.Add("onclick", "return expandcollapse('" + index + "');");
       }
   }

js:

function expandcollapse(key)
 {
   var grid=$find("<%=RadGrid1.ClientID %>");
   var table=grid.get_masterTableView();
   var row=table.get_dataItems()[key];
    if(row.get_expanded() == false)
        {
            row.set_expanded(true);

        }
        else
        {
            row.set_expanded(false);
        }
 }

Thanks
Princy.

[Reid]

Hello Princy,

Thanks for the response.  I am now aware of and using the <NestedTemplate> to display the embedded details.

One more question ..
Is there a way to set a different icon for the details linkbutton to differentiate from the parent linkbutton that expands that section?

[Princy]

Hello Reid,

You can either use imagebuttons instead of linkbuttons and set different image url for the parent button and details button respectively or you can use an image with the detail button and differentiate between the OwnerTables the button is clicked on, using the Name property of the OwnerTable as shown below.
aspx:

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="RadGrid1_ItemDataBound" >
     <MasterTableView Name="Master">
       <DetailTables>
        <telerik:GridTableView DataSourceID="SqlDataSource1" Name="Detail" runat="server" >
         <Columns>
          <telerik:GridTemplateColumn UniqueName="dropie">
            <ItemTemplate>
                <asp:ImageButton ImageUrl="~/image.gif" ID="DetaiImageButton1" runat="server" />

            </ItemTemplate>
         </telerik:GridTemplateColumn>
           .....

cs:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
      if (e.Item is GridDataItem)
       {
          if(e.Item.OwnerTableView.Name=="Detail")
           {
            GridDataItem dataItem = (GridDataItem)e.Item;
            ImageButton imageButton = (LinkButton)dataItem.FindControl("DetaiImageButton1");
            int index = e.Item.ItemIndex;
            imageButton.Attributes.Add("onclick", "return expandcollapse('" + index + "');");
           }
       }
   }

Thanks
Princy.

[Reid]

Hello Princy,

I believe that strategy would work if we are using a Master/Detail relationship but this is not the case, again this scenerio is using a nested template.  So the fields in the nested template have the same MasterTableView.Name property.

[Shinu]

Hi Reid,

I hope you are trying to access a control in the NestedViewTemplate. If so try the following approach and see if it helps.

ASPX:

<NestedViewTemplate>

<asp:ImageButton ID="ImageButton1"  runat="server" />

</NestedViewTemplate>

CS:

  protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridNestedViewItem)
        {
            GridNestedViewItem nestedItem = (GridNestedViewItem)e.Item;
            ImageButton imgBtn = (ImageButton)nestedItem.FindControl("ImageButton1");
            imgBtn.ImageUrl = "~/Images/image1.gif";
        }
   }

Thanks
Shinu.

[Reid]

Hello again Shinu, thank you for your attention to my issue.

The code works fine if I want to assign an image to an element *contained* in the <NestedViewTemplate>.  My question is how to set the image *of* the <NestedViewTemplate> expand icon. 

So as the user expands a particular item in the grid (again the grid is displaying the data in an ItemTemplate) the *same* icon appears and the user can choose to click that nested icon to display the nested fields contained in the <NestedViewTemplate>.  My question is how to set the icon *of* the <NestedViewTemplate> section itself.

Thanks

[Sebastian]

Hi Reid,

The custom expand functionality  for the nested view template you request is not supported, however note that you can implement tabular data presentation as demonstrated in this online demo of the product (using tabstrip wrapped inside the nested view):

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

I hope this is applicable solution for your case.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Reid]

I thought of this approach but decided not to use it for the reasons that there would only be one tab and that the tab would need to be visible and as such would still consume the area or space on the page, and if that was the case is really defeating the purpose.  I am going to investigate not using an <NestedTemplate> but rather using a <div> contained in the <ItemTemplate> with an image in that uses client side JavaScript to expand and/or collapse the <div>.

Thank you Shinu

[Gary]

I believe I have the same problem:
First the problem statement:
I have a user control that does the form edit (works fine), I need to have it expanded on multiple lines per user request.

If I put the user control in the EditItemTemplate and set the EditFormType to template, works fine but wont allow more than one edit.
If I put the user control in the NestedViewTemplate and use the example code with some tweaks I get -1 in the ItemIndex.

Maybe there's an easyier way to get multiple edits?
Oh yeah, and the usercontrol has raises a cancel event.

 

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated

 

 

Dim dataItem As GridNestedViewItem

 

 

Dim uc As UserControl

 

 

Dim index As Integer

 

 

If (TypeOf e.Item Is GridNestedViewItem) Then

 

dataItem =

CType(e.Item, GridNestedViewItem)

 

uc = dataItem.FindControl(

"BomLineEdit1")

 

index = e.Item.ItemIndex

uc.Attributes.Add(

"oncancel", "return expandcollapse('" & Trim(index.ToString) & "');")

 

 

End If

 

 

End Sub

 

[Princy]

Hello Gary,

While using UserControlEditForm or UserControl in a FormTemplateEditForm, if you want to edit multiple rows at a time, ypu have to set AllowMultiRowEdit to true as shown below:
aspx:

<telerik:RadGrid ID="RadGrid1" AllowMultiRowEdit="true"  DataSourceID="SqlDataSource1" runat="server">

If this is not what you are looking for please explain a bit more of your scenario.

Thanks
Princy.

[Gary]

I figured it was somthing simple that I was missing.
Works great.
Thank you,
Gary