I have a web app that dynamically defines the columns of a RadGrid and populates the DataTable. The data appears fine but when I click a button the column headers disappear. Here's a simplified version:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!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></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<asp:Panel ID="pnlDetail" runat="server">
<telerik:RadGrid ID="RadGrid1" runat="server"
OnNeedDataSource="RadGrid1_NeedDataSource"
AutoGenerateColumns="False" Width="1200px">
<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<ClientSettings AllowKeyboardNavigation="True">
<Scrolling FrozenColumnsCount="2"
AllowScroll="True"
ScrollHeight="400px"
UseStaticHeaders="True"></Scrolling>
<Resizing AllowColumnResize="True"
ClipCellContentOnResize="False" AllowResizeToFit="True" EnableRealTimeResize="True" EnableNextColumnResize="True" />
</ClientSettings>
<AlternatingItemStyle Wrap="False" BackColor="Gainsboro" Height="1px"></AlternatingItemStyle>
<ItemStyle Wrap="False" Height="1px" />
<MasterTableView TableLayout="Fixed">
<Columns>
</Columns>
</MasterTableView>
<HeaderStyle VerticalAlign="Bottom" Font-Bold="True" BackColor="DarkSeaGreen" Wrap="False" HorizontalAlign="Center"></HeaderStyle>
</telerik:RadGrid>
</asp:Panel>
<br />
<br />
<asp:Label ID="lblError" runat="server" Width="100%" ForeColor="Red" Font-Bold="True"></asp:Label>
<br />
<br />
<telerik:RadButton ID="btnSubmit" runat="server" Font-Bold="True" Font-Size="X-Large" Height="40px" Text="Submit" Width="150px" UseSubmitBehavior="False" OnClick="btnSubmit_Click"></telerik:RadButton>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using Telerik.Web.UI;
public partial class Default : System.Web.UI.Page
{
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
RadGrid1.MasterTableView.Columns.Clear();
DataTable myDataTable = new DataTable();
Add_Column("NAME", "Name", 300, ref myDataTable);
Add_Column("TYPE", "Type", 100, ref myDataTable);
string[] cols = { "aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg" };
foreach (var item in cols)
{
Add_Column(item, item, 300, ref myDataTable);
}
for (int i = 0; i < 26; ++i)
{
DataRow myRow = myDataTable.NewRow();
myRow["NAME"] = i.ToString() + (char)(65 + i);
myRow["TYPE"] = "string";
foreach (var item in cols)
{
myRow[item] = item + i.ToString();
}
myDataTable.Rows.Add(myRow);
}
RadGrid1.DataSource = myDataTable;
}
protected void Add_Column(string name, string header, int width, ref DataTable myDataTable)
{
// Define grid column
GridBoundColumn newColumn = new GridBoundColumn();
newColumn.DataField = name;
newColumn.UniqueName = name;
newColumn.ReadOnly = true;
newColumn.HeaderText = header;
newColumn.HeaderStyle.Width = width;
// Add the column to the grid and the data table
RadGrid1.MasterTableView.Columns.Add(newColumn);
myDataTable.Columns.Add(name);
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblError.Text = "Click";
}
}
Before clicking the button:
After clicking the button
Any ideas what is causing this and how to stop it so the column headers remain displayed?
2 Answers, 1 is accepted
Rank 1
Iron
Iron
Iron
I can't believe the answer:
protected void Add_Column(string name, string header, int width, ref DataTable myDataTable)
{
// Define grid column
GridBoundColumn newColumn = new GridBoundColumn();
// Add the column to the grid before setting it's properties
RadGrid1.MasterTableView.Columns.Add(newColumn);
newColumn.DataField = name;
newColumn.UniqueName = name;
newColumn.ReadOnly = true;
newColumn.HeaderText = header;
newColumn.HeaderStyle.Width = width;
// Add the column to the data table
myDataTable.Columns.Add(name);
}
Hi Thomas,
Please let me jump into this thread with some information that I believe could be useful.
RadGrid is a complex control with its own lifecycle and it heavily relies on the ViewState. This makes generating or modifying programmatically Grid's structure a bit tricky.
For such cases, we have created the Creating a RadGrid Programmatically article. Specifically for the current case, you may find it useful to review the Dynamically Defining the Structure of a Statically-declared Grid section.
If modifying the RadGrid structure runtime is needed, we recommend sticking to the instructions in this article to avoid any unexpected behavior.
As a side note: The NeedDataSource event of RadGrid is designed particularly for binding data to the RadGrid, we recommend using it just for setting the DataSource of the control, see Programmatic Data Binding Using the NeedDataSource Event.
I hope you will find this information helpful.
Kind regards,
Doncho
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/.