RadGrid Hierarchy

[Ky]

I used RADGrid Control to create grid data as FreeView. My code in ASP.NET below:


<telerik:RadGrid ID="gridDocs" runat="server" AllowPaging="false" BorderWidth="0px"
        AutoGenerateColumns="False" OnItemCommand="gridDocs_ItemCommand" 
        OnItemDataBound="gridDocs_ItemDataBound" OnItemCreated="gridDocs_ItemCreated" OnColumnCreated="gridDocs_ColumnCreated"
        EnableLinqExpressions="false">
        <%-- JHE :  HierarchyDefaultExpanded="false" parameter which define if all is expanded or not--%>        
        <MasterTableView HierarchyDefaultExpanded="false" HierarchyLoadMode="ServerBind"
            DataKeyNames="ID, ParentID" Width="100%" ExpandCollapseColumn-Display="true" RowIndicatorColumn-Visible="true"
            GridLines="Both"> 
                      
            <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer">
                    <asp:Label runat="server" ID="lblTest" Text="test"></asp:Label>                         
                  </asp:Panel>
                </NestedViewTemplate>
            
            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Resizable="true">
            <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <SelfHierarchySettings ParentKeyName="ParentID" KeyName="ID"/>  
            <PagerStyle Mode="numericpages" />
            <NoRecordsTemplate>
                no records retrieved
            </NoRecordsTemplate>
            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>            
            <Columns> 
....
The BOLD lines: I want to View Detail of a row. But If I don't user lines:

 <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer">
                    <asp:Label runat="server" ID="lblTest" Text="test"></asp:Label>                         
                  </asp:Panel>
                </NestedViewTemplate>

It works OK
If I use the Bold lines to show detail=> it does't work.
The problem: If I use  <NestedViewTemplate>=> The tree view is broken.

attached file is what I exptect: When I click on icon"+"=> detail will be shown.


Pls help me to do it
Thanks alot

[Shinu]

Hello ,

You can try the same approach in the following demo.
Grid / Hierarchy with Templates.

Thanks,
Shinu.

[Ky]

Hello,
 I saw this demo but it's not the answer of my question.

for being easier I give you my code in attached file.
in fact, this your demo can not do the treeview with multi level.
what I want is a treeview (root/chapter1/chapter1.1/chapter1.1.1...etc).
I used recursive below (you can view this function in attched file)

public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
        {
            if (item is GridDataItem)
            {
                if (item.FindControl("MyExpandCollapseButton") == null)                
                {
                    Button button = new Button();
                    button.Click += new EventHandler(button_Click);                
                    button.CommandName = "ExpandCollapse"; 
                    button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";


                    button.ID = "MyExpandCollapseButton";


                    if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
                    {
                        string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); return false;", item.Parent.Parent.ClientID);


                        button.OnClientClick = script;
                    }


                    int level = item.ItemIndexHierarchical.Split(':').Length - 1;


                    button.Style["margin-left"] = level * 15 + "px";
                


                    TableCell cell = ((GridDataItem)item)[columnUniqueName];


                    //cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue(columnUniqueName).ToString()));
                    //cell.Controls.Add(new LiteralControl(((GridDataItem)item)[columnUniqueName].ToString()));
                    cell.Controls.Add(new LiteralControl("&nbsp;"));
                    cell.Controls.Add(button);
                }            
            }
        }

When I insert the code below
 <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer">
                    <asp:Label runat="server" ID="lblTest" Text="test"></asp:Label>                         
                  </asp:Panel>
                </NestedViewTemplate>

The tree view is broken.

Pls help me to do it
Thanks alot

[Ky]

to implement the TreeView in RADGrid I use recursive below:
 public void HideExpandColumnRecursive(GridTableView tableView)
        {
            GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);            
            foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
            {
                foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
                {
                    nestedView.Style["border"] = "0";
                    Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton");                    
                    
                    if (nestedView.Items.Count == 0)
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style["visibility"] = "hidden";
                        }
                        nestedViewItem.Visible = false;
                    }
                    else
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style.Remove("visibility");
                        }
                    }


                    if (nestedView.HasDetailTables)
                    {
                        HideExpandColumnRecursive(nestedView);                        
                    }
                    
                }
            }
        }


And Call it at:

public void Page_PreRenderComplete(object sender, EventArgs e)
        {
           HideExpandColumnRecursive(gridDocs.MasterTableView);      
        }
When I use 
<NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer">
                    <asp:Label runat="server" ID="lblDetail" Text="test"></asp:Label>                                           
                  </asp:Panel>
             </NestedViewTemplate>

My tree view is broken.
Please help me to do it

Thanks a lot

[Iana Tsolova]

Hello Ky,

I would suggest that you use our RadTreeList control to achieve your goal. Check it out and let me know if it works for you.

Regards,
Iana Tsolova
the Telerik team