This is a migrated thread and some comments may be shown as answers.

displaying another grid inside radgrid

11 Answers 351 Views
Grid
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 04 Feb 2009, 06:42 PM
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?

11 Answers, 1 is accepted

Sort by
0
newbie
Top achievements
Rank 1
answered on 04 Feb 2009, 09:47 PM
I want my grid to look something like this:

Header -    Name          Employer            Mail                               Phone                      Address

 Row1  -      ABC                XYZ                 a@aol.com                503-123-2344           10 couch st, Portland

                Relations / Policy

Row2  -        Sam                XYZ                 sam@gmail.com       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.

0
Shinu
Top achievements
Rank 2
answered on 05 Feb 2009, 07:00 AM

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.

0
newbie
Top achievements
Rank 1
answered on 05 Feb 2009, 05:45 PM
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.

 

0
Shinu
Top achievements
Rank 2
answered on 06 Feb 2009, 06:10 AM

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.
0
newbie
Top achievements
Rank 1
answered on 06 Feb 2009, 06:59 PM
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?
0
Shinu
Top achievements
Rank 2
answered on 09 Feb 2009, 05:58 AM
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.
0
newbie
Top achievements
Rank 1
answered on 09 Feb 2009, 06:16 PM
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.
0
Princy
Top achievements
Rank 2
answered on 10 Feb 2009, 06:11 AM
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.
0
newbie
Top achievements
Rank 1
answered on 11 Feb 2009, 02:46 AM

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.

0
Shinu
Top achievements
Rank 2
answered on 11 Feb 2009, 06:31 AM
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.
0
newbie
Top achievements
Rank 1
answered on 11 Feb 2009, 06:44 PM
thanks! that works perfectly.
Tags
Grid
Asked by
newbie
Top achievements
Rank 1
Answers by
newbie
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Princy
Top achievements
Rank 2
Share this question
or