Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Issue with hierarchy template grid in radtab control

5 Answers 69 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Srikar
Top achievements
Rank 1
Srikar asked on 18 Jun 2013, 06:49 AM
UI-details.png
Hi,

The page contains RadTab. One of the tab has RadGrid with hierarchy template. Controls in the template are not rendered when OnItemCommand event is fired.

Page is designed as follows. When I expand row in RadGrid1 OnItemCommand event is fired. In the I am binding data to grdReportData grid but is not shown in the UI. Please refer the attachment for more details.Please have look at the HTML markup and let me know what wrong with it.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" Skin="Black" ShowChooser="false" runat="server">

</telerik:RadSkinManager>

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"

EnableRoundedCorners="false" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="mainTab">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="mainTab" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip runat="server" ID="mainTab" OnTabClick="OnMainTabClick" MultiPageID="mainTabMultipages"

SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Unit Test" PageViewID="pvUnitTest">

</telerik:RadTab>

</Tabs>

<Tabs>

<telerik:RadTab runat="server" Text="Static analysis" PageViewID="pvStaticAnalysis">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="mainTabMultipages" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="pvUnitTest">

<telerik:RadGrid AllowSorting="True" runat="server" ID="grdUnitTest" AutoGenerateColumns="true"

ShowFooter="true" EnableLinqExpressions="false">

</telerik:RadGrid>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="pvStaticAnalysis">

<telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" EnableTheming="true" runat="server"

AllowSorting="True" PageSize="50" AllowMultiRowSelection="False" OnItemCommand="RadGrid1_ItemCommand"

AllowPaging="True" GridLines="None" ShowGroupPanel="true">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView AllowMultiColumnSorting="True" GroupLoadMode="Server">

<NestedViewTemplate>

<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap">

<telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Details" PageViewID="PageView1">

</telerik:RadTab>

</Tabs>

<Tabs>

<telerik:RadTab runat="server" Text="Graph" PageViewID="PageView2">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="PageView1">

<telerik:RadGrid AllowSorting="True" runat="server" ID="grdReportDataGrid" AutoGenerateColumns="true"

ShowFooter="true" EnableLinqExpressions="false">

</telerik:RadGrid>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="PageView2">

<telerik:RadChart ID="RadChart2" Skin="DeepGray" runat="server" Height="400px" Width="1200px"

AutoLayout="true" AutoTextWrap="true">

</telerik:RadChart>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn SortExpression="Name" HeaderText="Name" HeaderButtonType="TextButton"

DataField="Name" UniqueName="Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CriticalErrors" HeaderText="Critical Errors"

HeaderButtonType="TextButton" DataField="CriticalErrors" UniqueName="CriticalErrors">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Errors" HeaderText="Errors" HeaderButtonType="TextButton"

DataField="Errors" UniqueName="Errors">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CriticalWarning" HeaderText="Critical warnings"

HeaderButtonType="TextButton" DataField="CriticalWarning" UniqueName="CriticalWarning">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Warnings" HeaderText="Warnings" HeaderButtonType="TextButton"

DataField="Warning" UniqueName="Warning">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="TotalCount" HeaderText="Total Count" HeaderButtonType="TextButton"

DataField="TotalCount" UniqueName="TotalCount">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

<asp:Label Visible="false" ID="lblMessage" runat="server"></asp:Label>

</asp:Content>

 

5 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Jun 2013, 09:31 AM
Hello,

Please try with below code snippet.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" Skin="Black" ShowChooser="false" runat="server">
</telerik:RadSkinManager>
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"
    EnableRoundedCorners="false" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="mainTab">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="mainTab" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadTabStrip runat="server" ID="mainTab" MultiPageID="mainTabMultipages"
    SelectedIndex="0">
    <Tabs>
        <telerik:RadTab runat="server" Text="Unit Test" PageViewID="pvUnitTest">
        </telerik:RadTab>
    </Tabs>
    <Tabs>
        <telerik:RadTab runat="server" Text="Static analysis" PageViewID="pvStaticAnalysis">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="mainTabMultipages" SelectedIndex="0" RenderSelectedPageOnly="false">
    <telerik:RadPageView runat="server" ID="pvUnitTest">
        <telerik:RadGrid AllowSorting="True" runat="server" ID="grdUnitTest" AutoGenerateColumns="true"
            ShowFooter="true" EnableLinqExpressions="false">
        </telerik:RadGrid>
    </telerik:RadPageView>
    <telerik:RadPageView runat="server" ID="pvStaticAnalysis">
        <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" runat="server" AllowSorting="True"
            PageSize="50" AllowMultiRowSelection="False" OnItemCommand="RadGrid1_ItemCommand"
            AllowPaging="True" GridLines="None" ShowGroupPanel="true" OnNeedDataSource="RadGrid1_NeedDataSource">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView AllowMultiColumnSorting="True" GroupLoadMode="Server">
                <NestedViewTemplate>
                    <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap">
                        <telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">
                            <Tabs>
                                <telerik:RadTab runat="server" Text="Details" PageViewID="PageView1">
                                </telerik:RadTab>
                            </Tabs>
                            <Tabs>
                                <telerik:RadTab runat="server" Text="Graph" PageViewID="PageView2">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
                            <telerik:RadPageView runat="server" ID="PageView1">
                                <telerik:RadGrid AllowSorting="True" runat="server" ID="grdReportDataGrid" AutoGenerateColumns="true"
                                    ShowFooter="true" EnableLinqExpressions="false">
                                </telerik:RadGrid>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="PageView2">
                                <telerik:RadChart ID="RadChart2" Skin="DeepGray" runat="server" Height="400px" Width="1200px"
                                    AutoLayout="true" AutoTextWrap="true">
                                </telerik:RadChart>
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </asp:Panel>
                </NestedViewTemplate>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="Name" HeaderText="Name" HeaderButtonType="TextButton"
                        DataField="Name" UniqueName="Name">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadPageView>
</telerik:RadMultiPage>
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data = new[] {
            new { ID = 1, Name ="Name1"},
            new { ID = 2, Name = "Name2"},
            new { ID = 3, Name = "Name3"},
             new { ID = 4, Name = "Name4"},
            new { ID = 5, Name = "Name5"},
            new { ID = 26, Name = "Name26"}
        };
 
        RadGrid1.DataSource = data;
 
    }
 
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.ExpandCollapseCommandName)
        {
            GridDataItem item = e.Item as GridDataItem;
            RadGrid grdReportDataGrid = (item.ChildItem as GridNestedViewItem).FindControl("grdReportDataGrid") as RadGrid;
            dynamic data = new[] {
            new { ID = 1, Name ="Naaaame1"},
            new { ID = 2, Name = "Naaaame2"},
            new { ID = 3, Name = "Naaaame3"},
             new { ID = 4, Name = "Naaaame4"},
            new { ID = 5, Name = "Namaaae5"},
            new { ID = 26, Name = "Naaaame26"}
        };
            grdReportDataGrid.DataSource = data;
            grdReportDataGrid.DataBind();
        }
    }


Thanks,
Jayesh Goyani
0
Srikar
Top achievements
Rank 1
answered on 19 Jun 2013, 06:31 AM
Hi Jayesh,
Thanks for the reply.  When page is loaded, RadGrid1's OnNeedDataSource event is fired even if it is not in the default tab. Is it possible to bind data only when user click on the tab which contains "RadGrid1"?

Let's say there are 4 tabs and a grids in the each tab. When page is loaded for the first time, it is good to bind the data to the grid in the default tab.  Data will be bound to the other grid on demand (as user navigate to the particular tab.).Which improves page performance.  Is there any way to do it?

Thanks,
Srikar.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 19 Jun 2013, 11:40 AM
Hello,

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadSkinManager ID="RadSkinManager1" Skin="Black" ShowChooser="false" runat="server">
    </telerik:RadSkinManager>
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"
        EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="mainTab">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="mainTab" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
              <telerik:AjaxSetting AjaxControlID="mainTab">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="mainTabMultipages" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadTabStrip runat="server" ID="mainTab" MultiPageID="mainTabMultipages"
        SelectedIndex="0" OnTabClick="mainTab_TabClick">
        <Tabs>
            <telerik:RadTab runat="server" Text="Unit Test" PageViewID="pvUnitTest">
            </telerik:RadTab>
        </Tabs>
        <Tabs>
            <telerik:RadTab runat="server" Text="Static analysis" PageViewID="pvStaticAnalysis">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="mainTabMultipages" SelectedIndex="0" RenderSelectedPageOnly="false">
        <telerik:RadPageView runat="server" ID="pvUnitTest">
            <telerik:RadGrid AllowSorting="True" runat="server" ID="grdUnitTest" AutoGenerateColumns="true"
                ShowFooter="true" EnableLinqExpressions="false">
            </telerik:RadGrid>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="pvStaticAnalysis">
            <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" runat="server" AllowSorting="True"
                PageSize="50" AllowMultiRowSelection="False" OnItemCommand="RadGrid1_ItemCommand"
                AllowPaging="True" GridLines="None" ShowGroupPanel="true">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView AllowMultiColumnSorting="True" GroupLoadMode="Server">
                    <NestedViewTemplate>
                        <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap">
                            <telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">
                                <Tabs>
                                    <telerik:RadTab runat="server" Text="Details" PageViewID="PageView1">
                                    </telerik:RadTab>
                                </Tabs>
                                <Tabs>
                                    <telerik:RadTab runat="server" Text="Graph" PageViewID="PageView2">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTabStrip>
                            <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
                                <telerik:RadPageView runat="server" ID="PageView1">
                                    <telerik:RadGrid AllowSorting="True" runat="server" ID="grdReportDataGrid" AutoGenerateColumns="true"
                                        ShowFooter="true" EnableLinqExpressions="false">
                                    </telerik:RadGrid>
                                </telerik:RadPageView>
                                <telerik:RadPageView runat="server" ID="PageView2">
                                    <telerik:RadChart ID="RadChart2" Skin="DeepGray" runat="server" Height="400px" Width="1200px"
                                        AutoLayout="true" AutoTextWrap="true">
                                    </telerik:RadChart>
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </asp:Panel>
                    </NestedViewTemplate>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="Name" HeaderText="Name" HeaderButtonType="TextButton"
                            DataField="Name" UniqueName="Name">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.ExpandCollapseCommandName)
    {
        GridDataItem item = e.Item as GridDataItem;
        RadGrid grdReportDataGrid = (item.ChildItem as GridNestedViewItem).FindControl("grdReportDataGrid") as RadGrid;
        dynamic data = new[] {
        new { ID = 1, Name ="Naaaame1"},
        new { ID = 2, Name = "Naaaame2"},
        new { ID = 3, Name = "Naaaame3"},
         new { ID = 4, Name = "Naaaame4"},
        new { ID = 5, Name = "Namaaae5"},
        new { ID = 26, Name = "Naaaame26"}
    };
        grdReportDataGrid.DataSource = data;
        grdReportDataGrid.DataBind();
    }
}
  
  
protected void mainTab_TabClick(object sender, RadTabStripEventArgs e)
    {
        if (e.Tab.SelectedIndex == 1)
        {
            dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"},
        new { ID = 26, Name = "Name26"}
    };
 
            RadGrid1.DataSource = data;
            RadGrid1.DataBind();
        }
 
    }


Thanks,
Jayesh Goyani
0
Srikar
Top achievements
Rank 1
answered on 01 Jul 2013, 02:21 PM

Hi,

Thank you for your help. I have another problem with the grid.

I have enabled paging in the "grdReportDataGrid" grid. Which is inside "RadGrid1" grid. When i navigating between "grdReportDataGrid" pages, "RadGrid1" is collapsing.

Expected output: "RadGrid1" should not collapse and user should see the request page in “grdReportDataGrid”.

Thanks,
Srikar.

0
Maria Ilieva
Telerik team
answered on 04 Jul 2013, 02:06 PM
Hello Srikar,

Note that simple data-binding (the mechanism you are using for the RadGrid controls) can be used in simple cases when you do not require the grid to perform complex operations such as paging. For advanced features such as paging, RadGrid must be bound using declarative data sources or through the NeedDataSource event.
Also please note that when RadTabStrip/RadMultiPage controls need to be ajaxified you should add them in the ajax settings as a whole and avoid adding the inner controls to the ajax settings. See the help topic below for more information on this matter:
http://www.telerik.com/help/aspnet-ajax/ajax-tips-and-tricks.html

Regards,
Maria Ilieva
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Srikar
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Srikar
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or