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

NestedViewTemplate Collapse Problem

6 Answers 164 Views

Grid

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

Abdullah asked on 01 Sep 2008, 08:37 AM

Hi,
Just started working on Telerik Controls and was using the RadGrid for a few days now. My Requirement was to show "extra information" in form of Labels and Images in the Grid after a row is collapsed by clicking the "+" or "arrow" icon. I found the following example helpful:

http://demos.telerik.com/aspnet/prometheus/Grid/Examples/Hierarchy/NestedViewTemplate/DefaultCS.aspx

but even if I copy the whole code and test it I cannot collapse an expanded row when I click nothing happens. I tried adding different controls in the NestedViewTemplate and found out that when I place a button there and click it (after expanding), the row collapses. What does that mean? What am I missing here?

Here is my code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="myExperiments._Default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
            <title>Experiment Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="myForm" runat="server" method="post">  
        
                <telerik:RadScriptManager ID="myScriptMngr" runat="server" EnableTheming="True">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="myRadAjaxManager" runat="server">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="myRadGrid">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="myRadGrid" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                <telerik:RadGrid ID="myRadGrid" runat="server" 
        
                    GridLines="None" Skin="Default2006" Width="500px"   
        
                    AutoGenerateColumns="False">  
        
            <MasterTableView AllowMultiColumnSorting="True">  
        
            <NestedViewTemplate> 
        
               <p> 
        
                    <asp:DetailsView ID="myDetailsView" runat="server" Width="125px" ></asp:DetailsView> 
        
                </p> 
        
            </NestedViewTemplate> 
        
            <RowIndicatorColumn Visible="False">  
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn Resizable="False">  
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <Columns> 
        
                    <telerik:GridBoundColumn AllowFiltering="False" AllowSorting="False"   
        
                        DataField="Column1" HeaderText="Column 1" ShowSortIcon="False"   
        
                        UniqueName="column">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Column2" HeaderText="Column 2"   
        
                        UniqueName="column1">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Column3" HeaderText="Column3"   
        
                        UniqueName="column2">  
        
                    </telerik:GridBoundColumn> 
        
                </Columns> 
        
            <EditFormSettings> 
        
            <PopUpSettings ScrollBars="None"></PopUpSettings> 
        
            </EditFormSettings> 
        
            </MasterTableView> 
        
                </telerik:RadGrid> 
        
                </form> 
        
                </body> 
        
            </html>

6 Answers, 1 is accepted

answered on 01 Sep 2008, 09:31 AM

Sure, here is the binding code...I'll be using a Dataset/Datatable to fill my Grid using DataSource...

    
            private void bindToGrid()  
        
                    {  
        
                        myRadGrid.DataSource = createDataTable();  
        
                        myRadGrid.DataBind();  
        
                    }  
        
                    private DataTable createDataTable()  
        
                    {  
        
                        DataTable myTable = new DataTable();  
        
                        DataRow myRow;  
        
                        myTable.Columns.Add("Column1", typeof(string));  
        
                        myTable.Columns.Add("Column2", typeof(string));  
        
                        myTable.Columns.Add("Column3", typeof(string));  
        
                        for (int i = 0; i < 5; i++)  
        
                        {  
        
                            myRow = myTable.NewRow();  
        
                            myRow["Column1"] = "Value C1 " + i;  
        
                            myRow["Column2"] = "Value C2 " + i;  
        
                            myRow["Column3"] = "Value C3 " + i;  
        
                            myTable.Rows.Add(myRow);  
        
                        }  
        
                        return myTable;  
        
                    }

answered on 02 Sep 2008, 07:03 AM

Hi once again,
I've successfully implemented the NeedDataSource Advance Binding but their are some issues I need to discuss here.
While debugging I found out that on every postback the NeedDataSource is called and the binding occurs. When ever I click on the "+" sign (from previous case) the postback occurs and NeedDataSource is called. Now what if I don't want to rebind my Grid.
Let us suppose my Grid is filled with data on the first pageload, say 2000 records. And I don't want it to rebind next time on postback. I read that I need to EnableViewState to true, then it won't happen but it still does.
And what if I want to use some code in my PageLoad where I deal with certain cells of the Grid. I noticed that the NeedDataSource is called AFTER PageLoad is executed.
Shed some light, thank you.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

NestedViewTemplate Collapse Problem

6 Answers, 1 is accepted