Webpage's RadGrid column headings disappear

2 Answers 32 Views
Grid
Thomas
Top achievements
Rank 1
Iron
Iron
Thomas asked on 14 Mar 2022, 12:42 PM

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

Sort by
0
Accepted
Thomas
Top achievements
Rank 1
Iron
Iron
answered on 14 Mar 2022, 02:08 PM

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);
    }
Move the line to add the column to the RadGrid to before the column properties are set.
0
Doncho
Telerik team
answered on 17 Mar 2022, 09:37 AM

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/.

Tags
Grid
Asked by
Thomas
Top achievements
Rank 1
Iron
Iron
Answers by
Thomas
Top achievements
Rank 1
Iron
Iron
Doncho
Telerik team
Share this question
or