displaying another grid inside radgrid

[newbie]

I have a grid in which I want to display data in two rows for one row.
The second row contains two buttons or a tab control(i still have to decide on that). On click of the button another grid should load below it.

What is the best way of achieving this?

[newbie]

I want my grid to look something like this:

Header -    Name          Employer            Mail                               Phone                      Address

 Row1  -      ABC                XYZ                 [e-mail]                503-123-2344           10 couch st, Portland

                Relations / Policy

Row2  -        Sam                XYZ                 [e-mail]       502-123-2467            Washington St. Portland 97209
                Relations / Policy

Where Relations/Policy are actually buttons/tabs which on clicking should load another grid below.

Please guide.

[Shinu]

Hi,

 

One suggestion is by adding the buttons and RadGrd inside a NestedViewTemplate, and set the inner RadGrid as not visible. Now clicking on the button toggle the RadGrid's Visible property.

ASPX:

 <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server">
        <MasterTableView DataKeyNames="CustomerID">

               <NestedViewTemplate>
                 <asp:Button ID="Button1" Visible="true" CommandName="Show/Hide" Text="Relations" runat="server"/>
                 <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="DetailsDataSource"  Visible="false" AllowPaging="true" PageSize="10">
                    <MasterTableView autogeneratecolumns="true" datasourceid="DetailsDataSource">
                    </MasterTableView>
                 </telerik:RadGrid>
              </NestedViewTemplate>

        </MasterTableView>
</telerik:RadGrid>

CS:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.CommandName == "Show/Hide")
    {
        GridNestedViewItem item = (GridNestedViewItem)e.Item;
        if (item.Visible == true)
        {
            RadGrid grid = (RadGrid)item.FindControl("RadGrid2"); // Get the inner RadGrid
            grid.Visible = !grid.Visible;  //Toggle the visibility
        }
    }
}
protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
    if (e.Column.UniqueName == "ExpandColumn")  //Hiding the expand collapse column
    {
        e.Column.Visible = false;
    }
}

Please refer to the online demo and documentation for more information about NestedViewTemplate.

Thanks,

Shinu.

[newbie]

Thanks Shinu.

But I don't want to click on an arrow to see the nested view template.
I want the row and below that row i want to see the two buttons always visible.

How can i get that?

My current grid looks like this:

<

telerik:RadGrid ID="RadGridContact" runat="server" GridLines="Vertical" AutoGenerateColumns="False"

 

 

EnableLinqExpressions="false" AllowSorting="true" Width="1150px" OnNeedDataSource="RadGridContact_NeedDataSource">

 

 

<MasterTableView TableLayout="Fixed">

 

 

<Columns>

 

 

<telerik:GridTemplateColumn HeaderText="Name" UniqueName="ContactName" HeaderStyle-Width="23%">

 

 

<ItemTemplate>

 

 

<b>

 

<%

# Eval("Name")%></b>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Employer" UniqueName="Employer" HeaderStyle-Width="19%">

 

 

<ItemTemplate>

 

 

<b>

 

<%

# Eval("Employer")%></b></ItemTemplate>

 

 

</telerik:GridTemplateColumn><telerik:GridTemplateColumn HeaderText="Phone" UniqueName="Phone" HeaderStyle-Width="18%">

 

 

<ItemTemplate>

 

<%

# Eval("Phone")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="Preferred Address" UniqueName="Address" HeaderStyle-Width="18%">

 

 

<ItemTemplate>

 

<%

# Eval("Address")%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

I don't have the buttons in this grid though. i am not able to figure out the best way to achieve that.
Please help.

 

[Shinu]

Hi Newbie,

Setting the RadGrid property HierarchyDefaultExpanded="true" will expand the NestedViewTemplate, so no need to click on the expand button to view the second RadGrid. And you can only view the two buttons which is below the row as a single row, because of the RadGrid set property as Visible="false". Now for hiding the expand/collapse buttons try the code in RadGrid1_ColumnCreated() server event. Hope this helps.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="10" DataSourceID="SqlDataSource1" oncolumncreated="RadGrid1_ColumnCreated" onitemcommand="RadGrid1_ItemCommand">

      <MasterTableView Width="100%" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" HierarchyDefaultExpanded="true" AllowMultiColumnSorting="True">
                <NestedViewTemplate>
                    . . .
                </NestedViewTemplate>
                <Columns>
                    . . .
                </Columns>
        </MasterTableView>
</telerik:RadGrid>

CS:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.CommandName == "Show/Hide")
    {
        GridNestedViewItem item = (GridNestedViewItem)e.Item;
        if (item.Visible == true)
        {
            RadGrid grid = (RadGrid)item.FindControl("RadGrid2"); // Get the inner RadGrid
            grid.Visible = !grid.Visible;  //Toggle the visibility
        }
    }
}
protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
    if (e.Column.UniqueName == "ExpandColumn")  //Hiding the expand collapse column
    {
        e.Column.Visible = false;
    }
}

Thanks,
Shinu.

[newbie]

Thanks Shinu.

The buttons and the grid in nestedviewtemplate works but i want a few modifications to that which I am not able to figure out.

#1 my buttons show under the second column , however I want them to appear under the first column that is at the extreme left.

#2 When I click on the button and load the second grid, I want only the related data in the parent row to be displayed and clear the rest of the grid rows.

Can you help?

[Shinu]

Hello,

We can achieve this by showing only required rows in the inner grid when clicking the button. I tried to get the CustomerID value from the MasterTable's clicked row and checked with the inner RadGrid to show only the related row. Try modifying your code like this and check whether it works.

CS:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.CommandName == "Show/Hide")
    {
        GridNestedViewItem item = (GridNestedViewItem)e.Item;
        string customerid = item.ParentItem["CustomerID"].Text;
        if (item.Visible == true)
        {
            RadGrid grid = (RadGrid)item.FindControl("RadGrid2");
            grid.Visible = !grid.Visible;
            if (grid.Visible)
            {
                foreach (GridDataItem items in grid.MasterTableView.Items)
                {
                    if (items["CustomerID"].Text == customerid)
                    {
                        items.Visible = true;
                    }
                    else
                    {
                        items.Visible = false;
                    }
                }
            }
        }
    }
}

Thanks,
Shinu.

[newbie]

Hi Shinu.

That doesn't seem to be working for me.
It gives me an error
'Telerik.Web.UI.GridNestedViewItem' does not contain a definition for 'ParentItem' and no extension method 'ParentItem' accepting a first argument of type 'Telerik.Web.UI.GridNestedViewItem' could be found (are you missing a using directive or an assembly reference?)'

Please suggest.

[Princy]

Hello,

I tried Shinu's code, at my end and i found that it works with the latest version( 2008.3.1314.20) of RadGrid. Which version of RadGrid are you using? The ParentItem property is defined for later versions of RadGrid(from 2008.3.1125). Probably you can try upgrading your RadGrid control to the latest version. For more information on how to upgrade your RadControls refer to the following KB article:
Updating RadControls for ASP.NET to another version or license

Thanks
Princy.

[newbie]

I upgraded to the latest version and it works fine now.

However this code below only hides the rows. The buttons in the nestedviewtemplate are still visible.

 

foreach

(GridDataItem items in nestedItem.OwnerTableView.Items)

 

{

 

if (items.GetDataKeyValue("ContactID").ToString() == contactID)

 

{

items.Visible =

true;

 

}

 

else

 

 

 

{

items.Visible =

false;

 

}

}

How can I hide the entire row, that is including the nestedviewtemplate.

[Shinu]

Hi,

I guess you want to hide all the rows in main RadGrid, except the clicked row. If that the case, try adding the following code snippet in RadGrid_ItemCommand() event for hiding the rows including the NestedViewTemplate. I tried to loop through the nestedviewitem and set the visibility property of the row to false for hiding these rows.

CS:

foreach (GridNestedViewItem nesteditem in RadGrid1.MasterTableView.GetItems(GridItemType.NestedView))
{
    if (nesteditem == item)
    {
        nesteditem.ParentItem.Visible = true;
        nesteditem.Visible = true;
    }
    else
    {
        nesteditem.ParentItem.Visible = false; // Hiding the row
        nesteditem.Visible = false;
    }
}

Thanks,
Shinu.

[newbie]

thanks! that works perfectly.