11 Answers, 1 is accepted
Hi David,
Can you, please, elaborate on the way you are binding the grid? Can you confirm that you are using the NeedDataSource event, but not calling the DataBind() method of the control?
By default, RadGrid does a PostBack by default when expanding/collapsing items, so the problem can be related to the way the grid is bound. Optionally, you could set the HierarchyLoadMode to client which will render all elements and expand/collapse will not do postbacks.
Please, examine the articles below which explain in detail how to bind Grid to data correctly (without losing the data of the nested controls)
- Programmatic Data Binding Using the NeedDataSource Event
- How to bind RadGrid properly on server-side
- Hierarchy load modes
For convenience, I am also attaching a sample demonstrating how to include a chart in a NestedViewTemplate, so you can take a look at its implementation as well.
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Hi,
It is always nice to have call answered by you.
Your example has SqlDataSource which i can't really use in my case. I also do require Postback on expanding/collapsing items. I am not sure this is an issue though because all nested grids are retaining their values and only chart seemingly requires some kind of repaint. I load my chart on grdQualityOfJobs.ItemCommand. Here is my code:
<telerik:RadGrid ID="grdQualityOfJobs" runat="server" ShowStatusBar="true" AutoGenerateColumns="False"Width="900px" skin="WebBlue" style="margin-top:5px;"
AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="false"
OnDetailTableDataBind="DetailTableDataBind"
OnNeedDataSource="NeedDataSource" OnExcelExportCellFormatting="ExportCellFormatting">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="RegionID" HeaderStyle-Font-Bold="true" >
<CommandItemStyle CssClass="CommandHeaderStyle" />
<CommandItemTemplate>
<table class="rgCommandTable" summary="Command item for additional functionalities for the grid like adding a new record and exporting." border="0" style="width:100%;">
<tr>
<td>
<asp:ImageButton ImageUrl="graphics/expand_grid.jpg" ID="ExportButton32" ToolTip="Expand All" style="margin-left:-4px;outline:none;display:none;"
OnClientClick="showPleaseWaitModalWindow1(); document.getElementById('btnExpandAll_grdQualityOfJobs').click();" runat="server" />
<asp:ImageButton ImageUrl="graphics/collapse_grid.jpg" ID="ImageButton2" ToolTip="Collapse All" style="margin-left:1px;outline:none;display:none;"
OnClientClick="showPleaseWaitModalWindow1(); document.getElementById('btnCollapseAll_grdQualityOfJobs').click();" runat="server" />
</td>
<td align="right">
<asp:ImageButton ImageUrl="graphics/Excel_small.png" ID="ImageButton1" ToolTip="Export to Excel"
OnClientClick="showPleaseWaitModalWindow1(); document.getElementById('ibExportToExcel_grdQualityOfJobs').click();" runat="server"/>
</td>
</tr>
</table>
</CommandItemTemplate>
<HeaderStyle CssClass="RegionsHeaderStyle"/>
<DetailTables>
<telerik:GridTableView DataKeyNames="RegionID,DataYear" Name="Years">
<HeaderStyle CssClass="YearsHeaderStyle"/>
<ItemStyle CssClass="InnerItemStyle"/>
<AlternatingItemStyle CssClass="InnerAlernatingItemStyle"/>
<NestedViewTemplate>
<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="true">
<asp:Label ID="lblRegion" Font-Bold="true" Font-Italic="true" Text='<%# Eval("RegionID") %>'
Visible="false" runat="server"></asp:Label>
<asp:Label ID="lblDataYear" Font-Bold="true" Font-Italic="true" Text='<%# Eval("DataYear") %>'
Visible="false" runat="server"></asp:Label>
<div align="center" style="margin-top:15px;margin-bottom:7px;">
<asp:Label ID="lll" Font-Bold="true"
Text="Growth & Openings Criteria – Number of Jobs"
runat="server"/>
</div>
<telerik:RadGrid runat="server" ID="grdQualityOfJobs_jobs"
Skin="WebBlue" ShowFooter="true"
AllowSorting="false" EnableLinqExpressions="false">
<MasterTableView ShowHeader="true" AutoGenerateColumns="False">
<HeaderStyle CssClass="DetailsHeaderStyle" BackColor="#6181bb" ForeColor="White"/>
<AlternatingItemStyle BackColor="White"/>
<Columns>
<telerik:GridBoundColumn DataField="Wage_Portion" HeaderText="Wage Criteria" HeaderButtonType="TextButton"
ItemStyle-Width="200px" ItemStyle-HorizontalAlign="left"
FooterStyle-HorizontalAlign="Right"
FooterText="Total" FooterStyle-Font-Bold="true"/>
<telerik:GridBoundColumn HeaderText="Not Growing" DataField="NotGrowing"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N0}"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" />
<telerik:GridBoundColumn HeaderText="Growing, Unstable" DataField="GrowingUnstable"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N0}"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
<telerik:GridBoundColumn HeaderText="Growing, Stable" DataField="GrowingStable"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N0}"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
<telerik:GridCalculatedColumn HeaderText="All"
DataFields="NotGrowing,GrowingUnstable,GrowingStable" Expression="{0}+{1}+{2}"
DataType="System.Decimal" HeaderStyle-HorizontalAlign="right"
ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="80px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N0}"
Aggregate="Sum"
FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<div align="center" style="margin-top:15px;margin-bottom:7px;">
<asp:Label ID="Label27" Font-Bold="true"
Text="Growth & Openings Criteria – Relative Percent"
runat="server"/>
<telerik:RadTabStrip runat="server" ID="rtsQualityOfJobs"
Orientation="HorizontalTop" Align="center"
style="width:800px;margin-top:14px;"
SelectedIndex="0" MultiPageID="rmpQualityOfJobs"
Skin="Office2010Silver"
OnClientTabSelected="OnClientTabSelected"
OnClientTabUnSelected="OnClientTabUnSelected">
<Tabs>
<telerik:RadTab Text="Chart" Width="260px" Selected="true" SelectedCssClass="selected-tab-style"/>
<telerik:RadTab Text="Data" Width="260px"/>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="rmpQualityOfJobs" SelectedIndex="0" CssClass="multiPage">
<telerik:RadPageView runat="server" ID="rpvChart" >
<telerik:RadHtmlChart runat="server" ID="chartQualityOfJobs_percent"
Height ="200" Skin="Silk" style="margin-top:25px;"
Transitions="false">
<ChartTitle Text="">
<Appearance Align="Center" Position="Top" Visible="false">
<TextStyle Bold="true" />
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="bottom" Visible="true">
<TextStyle Margin="2" />
</Appearance>
</Legend>
<Pan Enabled="false" />
<Zoom Enabled="false">
<MouseWheel Enabled="true" Lock="Y" />
<Selection Enabled="true" Lock="Y" ModifierKey="Shift" />
</Zoom>
<PlotArea>
<Series/>
<Appearance>
<FillStyle BackgroundColor="Transparent"></FillStyle>
</Appearance>
<XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside" Reversed="false">
<LabelsAppearance RotationAngle="0" Skip="0" Step="1" >
<TextStyle Margin="0px"/>
</LabelsAppearance>
<TitleAppearance Position="Center" RotationAngle="0" Text="Commodities" Visible="false">
<TextStyle Bold="true"/>
</TitleAppearance>
</XAxis>
<YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
MinorTickSize="1" MinorTickType="Outside" Reversed="false">
<LabelsAppearance RotationAngle="0" Skip="0" Step="1" DataFormatString="{0:N0}%" >
</LabelsAppearance>
<TitleAppearance Position="Center" RotationAngle="0" Text="Value" Visible="false">
<TextStyle Padding="0" Margin="0" Bold="true"/>
</TitleAppearance>
</YAxis>
</PlotArea>
<Appearance>
<FillStyle BackgroundColor="Transparent"></FillStyle>
</Appearance>
</telerik:RadHtmlChart>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="rpvData">
<telerik:RadGrid runat="server" ID="grdQualityOfJobs_percent" style="margin-top:30px;margin-bottom:37px;"
Skin="WebBlue" ShowFooter="true"
AllowSorting="false" EnableLinqExpressions="false">
<MasterTableView ShowHeader="true" AutoGenerateColumns="False">
<HeaderStyle CssClass="DetailsHeaderStyle" BackColor="#6181bb" ForeColor="White"/>
<AlternatingItemStyle BackColor="White"/>
<Columns>
<telerik:GridBoundColumn DataField="Wage_Portion" HeaderText="Wage Criteria" HeaderButtonType="TextButton"
ItemStyle-Width="200px" ItemStyle-HorizontalAlign="left"
FooterStyle-HorizontalAlign="Right"
FooterText="Total" FooterStyle-Font-Bold="true"/>
<telerik:GridBoundColumn HeaderText="Not Growing" DataField="NotGrowing"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N1}%"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" />
<telerik:GridBoundColumn HeaderText="Growing, Unstable" DataField="GrowingUnstable"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N1}%"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
<telerik:GridBoundColumn HeaderText="Growing, Stable" DataField="GrowingStable"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="125px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N1}%"
Aggregate="Sum" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
<telerik:GridCalculatedColumn HeaderText="All"
DataFields="NotGrowing,GrowingUnstable,GrowingStable" Expression="{0}+{1}+{2}"
DataType="System.Decimal" HeaderStyle-HorizontalAlign="right"
ItemStyle-HorizontalAlign="Right"
ItemStyle-Width="80px" ItemStyle-CssClass="label_SS_8" DataFormatString="{0:N1}%"
Aggregate="Sum"
FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true"/>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
</asp:Panel>
</NestedViewTemplate>
<Columns>
<telerik:GridBoundColumn SortExpression="RegionID" HeaderText="RegionID" HeaderButtonType="TextButton"
DataField="RegionID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Data Year" HeaderButtonType="TextButton"
SortExpression="DataYear" DataField="DataYear"
ItemStyle-CssClass="InnerItemStyle"
ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="RegionID" HeaderText="RegionID"
HeaderButtonType="TextButton"
DataField="RegionID" Visible="false"/>
<telerik:GridBoundColumn HeaderText="Region Name" HeaderButtonType="TextButton"
SortExpression="RegionName" DataField="RegionName"
HeaderStyle-HorizontalAlign="Left"/>
</Columns>
</MasterTableView>
</telerik:RadGrid>
Rank 1
Iron
Iron
Veteran
Also, just in case my vb code
Protected Sub grdQualityOfJobs_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles grdQualityOfJobs.ItemCommand
If e.CommandName = RadGrid.ExpandCollapseCommandName And TypeOf e.Item Is GridDataItem Then
If DirectCast(e.Item, GridDataItem).ChildItem.FindControl("InnerContainer") Is Nothing Then
Exit Sub
End If
DirectCast(e.Item, GridDataItem).ChildItem.FindControl("InnerContainer").Visible = Not e.Item.Expanded
Try
If e.CommandName = RadGrid.ExpandCollapseCommandName Then
Dim item As GridItem
For Each item In e.Item.OwnerTableView.Items
If item.Expanded AndAlso Not item Is e.Item Then
item.Expanded = False
End If
Next item
End If
Dim InnerContainer As Object = DirectCast(e.Item, GridDataItem).ChildItem.FindControl("InnerContainer")
Dim RegionID As String = DirectCast(InnerContainer.FindControl("lblRegion"), Label).Text
Dim DataYear As String = DirectCast(InnerContainer.FindControl("lblDataYear"), Label).Text
Dim grdQualityOfJobs_Jobs As RadGrid = DirectCast(InnerContainer.FindControl("grdQualityOfJobs_Jobs"), RadGrid)
Dim grdQualityOfJobs_Percent As RadGrid = DirectCast(InnerContainer.FindControl("grdQualityOfJobs_Percent"), RadGrid)
Dim chartQualityOfJobs_percent As RadHtmlChart = DirectCast(InnerContainer.FindControl("chartQualityOfJobs_percent"), RadHtmlChart)
Dim ImpactType As String = ddlSelectImpactType_grdQualityOfJobs.SelectedItem.Text
Dim ds As DataSet = ReportsData.getTredis5_results(
source.id, "YearDetails",
TredisSession.Current.Project.ProjectId,
Session("TotalEconomicImpactsResultYear"),
ImpactType,
TredisSession.Current.Project.PreferencesIndustryAggregation,
TredisSession.Current.Contract.ImplanSectoring,
0, RegionID, DataYear,
Session("DiscountRate_1"), Session("DiscountRate_2"),
0, 0, TredisSession.Current.Project.ConstantDollarYear,
Session("TotalEconomicImpactsResultYear"),
"",
Session("InflationRate"),
Session("CashFlow"),
SharedFunctions.getDataSource(),
Session("OccupationalDetailLevel"),
TredisSession.Current.Contract.CountryData.CountryID)
grdQualityOfJobs_Jobs.DataSource = ds.Tables(0)
grdQualityOfJobs_Jobs.DataBind()
grdQualityOfJobs_Percent.DataSource = ds.Tables(1)
grdQualityOfJobs_Percent.DataBind()
LoadMultiColumnChart(ds.Tables(1), chartQualityOfJobs_percent)
Catch ex As Exception
If TredisSession.Current.User.Username <> "db" Then
'Reset analysis run
ReportsData.deleteProjectResultsSettings(TredisSession.Current.Project.ProjectId)
End If
Utils.SendExceptionEmail(ex, "result_economic_impact.aspx; " & SharedFunctions.getTroubleshoot() & "Run Analysis was reset, User didn't see error, <br/>NeedDataSource; Regions; grid: " & source.id & "<br/><br/>")
'Response.Redirect("results.aspx")
ScriptManager.RegisterClientScriptBlock(Me, Page.GetType, "RedirectTop", "parent.location.href='results.aspx';", True)
End Try
End If
End Sub
Function LoadMultiColumnChart(
ByVal dt As DataTable,
ByRef chart As RadHtmlChart)
Try
SharedFunctions.resetChart(chart)
Dim strFormat As String = "#=series.name# (" & "#= kendo.toString(value,\'\\#,\\#\\#\\#.\\#\\#\\#\\#\\#\') #" & "%)"
Dim strTemplate As String = "#= kendo.toString(value,\'\\#,\\#\\#\\#.\\#\\#\\#\\#\\#\') #" & "%"
Dim seriesGood As Telerik.Web.UI.BarSeries = New Telerik.Web.UI.ColumnSeries
Dim seriesMiddle As Telerik.Web.UI.BarSeries = New Telerik.Web.UI.ColumnSeries
Dim seriesLow As Telerik.Web.UI.BarSeries = New Telerik.Web.UI.ColumnSeries
seriesGood.Name = "Good"
seriesMiddle.Name = "Middle"
seriesLow.Name = "Low"
seriesGood.TooltipsAppearance.ClientTemplate = strFormat
seriesMiddle.TooltipsAppearance.ClientTemplate = strFormat
seriesLow.TooltipsAppearance.ClientTemplate = strFormat
seriesGood.LabelsAppearance.ClientTemplate = strTemplate
seriesMiddle.LabelsAppearance.ClientTemplate = strTemplate
seriesLow.LabelsAppearance.ClientTemplate = strTemplate
chart.PlotArea.XAxis.Items.Add("Not Growing")
seriesGood.Items.Add(Format(dt.Rows(0)("NotGrowing"), "#,###.0"))
seriesMiddle.Items.Add(Format(dt.Rows(1)("NotGrowing"), "#,###.0"))
seriesLow.Items.Add(Format(dt.Rows(2)("NotGrowing"), "#,###.0"))
chart.PlotArea.XAxis.Items.Add("Growing, Unstable")
seriesGood.Items.Add(Format(dt.Rows(0)("GrowingUnstable"), "#,###.0"))
seriesMiddle.Items.Add(Format(dt.Rows(1)("GrowingUnstable"), "#,###.0"))
seriesLow.Items.Add(Format(dt.Rows(2)("GrowingUnstable"), "#,###.0"))
chart.PlotArea.XAxis.Items.Add("Growing, Stable")
seriesGood.Items.Add(Format(dt.Rows(0)("GrowingStable"), "#,###.0"))
seriesMiddle.Items.Add(Format(dt.Rows(1)("GrowingStable"), "#,###.0"))
seriesLow.Items.Add(Format(dt.Rows(2)("GrowingStable"), "#,###.0"))
chart.PlotArea.Series.Add(seriesGood)
chart.PlotArea.Series.Add(seriesMiddle)
chart.PlotArea.Series.Add(seriesLow)
chart.DataBind()
chart.Legend.Appearance.Visible = True
chart.PlotArea.YAxis.MinorGridLines.Visible = False
chart.PlotArea.YAxis.MajorGridLines.Visible = False
chart.PlotArea.YAxis.TitleAppearance.Text = "Value ($M)"
Catch ex As Exception
Utils.LogException(ex, "LoadMultiColumnChart")
End Try
End Function
Hi David,
Our sample uses SqlDataSource because that was available, however, the source of data does not matter. That sample can work with DataSets, Lists, Arrays, any bindable collection in general.
The source of the issue on the other hand, comes from the way the data is bound.
Binding data to RadGrid using DataBind() specifically in the ItemCommand of another RadGrid is not an accepted method, especially in cases of complex structures.
This method of binding data to the grid is the regular asp:GridView approach and it will not work for RadGrid in all scenarios:
grdQualityOfJobs_Jobs.DataSource = ds.Tables(0)
grdQualityOfJobs_Jobs.DataBind()
Telerik RadGrid is a complex control and it comes with its own data binding methods. Check out the How to bind RadGrid properly on server-side article for instructions on binding data to RadGrid.
If this article does not help resolving the problem, please modify the sample project shared by Vesi to replicate the provlem, and we will take a look to see what can cause the issue.
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Hi Attila,
I don't think you read my post carefully. Grid binds just fine. Problem is the chart that dissapears when another level opens.
David
Hi David,
I read your post and I know from experience that Child controls may not bind correctly when the Grid's binding itself is not set properly. We want to help, but for that we need you to follow our instructions.
You'll need to change the data binding of the Grid to be done the recommended way, and if that doesn't help, we would need an isolated version of the problem you are experiencing and that we can troubleshoot and tell you exactly what is the problem. You can use the sample attached by Vesi and modify it to produce the same problem you have described.
Regards,
Attila Antal
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Iron
Iron
Veteran
Hi Attila,
Again, grid and chart are both part of template. Grid works fine, chart is a problem. If DataBind is no good, why Telerik allows this?
As i mentioned before I can not use SqlDataSource, because i do some data manipulations before i bind chart
Hi David,
I've created a DataTable version of this sample, see the attached zip file. Import the Default2.aspx and Default2.aspx.cs files to the sample Vesi shared earlier and it will work right away.
To answer your question "If DataBind is no good, why Telerik allows this?", the DataBind is part of the .NET framework and our controls inherit it. We cannot remove it as we do not have control over the source code of the .NET Framework. Also, the method itself works as intended for asp:GridView even with RadGrid simple scenarios. We have mentioned that in our documentation. Check the description section of the online demo at: https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/simple-vs-advanced/defaultcs.aspx
Regards,
Attila Antal
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Iron
Iron
Veteran
Hi Attila,
First of all thank you for spending time to create this example. And it works for me pretty well.
However, OnLoad="RadHtmlChart1_Load" forces reload for every level, every time something loads, opens or closes.
That is very inefficient and slow. Is there better way that still works?
Thank you
David
David,
Other then enabling AJAX to smoothen the PostBack process, I am afraid we do not have further suggestions. Telerik UI for ASP.NET AJAX Components are server-side Controls and they heavily rely on PostBacks and VIewState. If PostBack is a concern, then you may consider implementing client-side applications such as the Kendo UI Grid with Kendo UI chart.
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Understood.
Importantly, you solved my issue
Thank you