Dynamically generated multicolumn headers: top header disappears after postback

[Marliela]

Hi,

I'm using the multicolumn headers feature of the RadGrid control, and generate the multicolumn headers dynamically. Unfortunately the top header disappears after a postback. When I refresh the page, the top header is back again.

My aspx:

<table>
    <tr><td>Start date*</td>
        <td><telerik:RadDatePicker ID="RadDatePicker1" runat="server" EnableScreenBoundaryDetection="false">
                <DateInput DisplayDateFormat="d-M-yyyy"></DateInput>
                <DatePopupButton ToolTip="Open de kalender"></DatePopupButton>
            </telerik:RadDatePicker></td>
        <td>End date*</td>
        <td><telerik:RadDatePicker ID="RadDatePicker2" runat="server" EnableScreenBoundaryDetection="false">
                <DateInput DisplayDateFormat="d-M-yyyy"></DateInput>
                <DatePopupButton ToolTip="Open de kalender"></DatePopupButton>
            </telerik:RadDatePicker></td>
        <td><telerik:RadButton ID="DatumButton" runat="server" Text="Ok"
                onclick="DatumButton_Click">
            </telerik:RadButton>
        </td>
    </tr>
</table>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" OnSelectedCellChanged="RadGrid1_SelectedCellChanged">
    <MasterTableView DataKeyNames="myDataKeyName">
    </MasterTableView>
    <ClientSettings EnablePostBackOnRowClick="true" >
        <Selecting CellSelectionMode="SingleCell" />
    </ClientSettings>
</telerik:RadGrid>

My Code behind:

protected void Page_Load(object sender, EventArgs e)
        {
            if (RadDatePicker1.SelectedDate == null)
            {
                RadDatePicker1.SelectedDate = DateTime.Today;
            }

            if (RadDatePicker2.SelectedDate == null)
            {
                RadDatePicker2.SelectedDate = DateTime.Today.AddDays(6);
            }

            if (!Page.IsPostBack)
            {
                GetGrid();
            }
        }

        protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = GetMyDataList();
        }

        protected void RadGrid1_SelectedCellChanged(object sender, EventArgs e)
        {
            GridTableCell d = RadGrid1.SelectedCells[0];

            if (d.Text == "1")
            {
                d.Text = " ";
            }
            else
            {
                d.Text = "1";
            }

            d.Selected = false;
        }

        private void GetGrid()
        {
            DateTime startDate = Convert.ToDateTime(RadDatePicker1.SelectedDate);
            DateTime endDate = Convert.ToDateTime(RadDatePicker2.SelectedDate);

            GridBoundColumn cCode = new GridBoundColumn();
            RadGrid1.MasterTableView.Columns.Add(cCode);
            cCode.HeaderText = "Code";
            cCode.DataField = "Code";
            cCode.UniqueName = "Code";
            cCode.ReadOnly = true;
            cCode.ItemStyle.Width = 50;

            GridBoundColumn cDescription = new GridBoundColumn();
            RadGrid1.MasterTableView.Columns.Add(cDescription);
            cDescription.HeaderText = "Description";
            cDescription.DataField = "Description";
            cDescription.UniqueName = "Description";
            cDescription.ReadOnly = true;
            cDescription.ItemStyle.Width = 250;

            while (startDate <= endDate)
            {
                string day = startDate.ToString("dddd").Substring(0, 2);
                string date = startDate.ToString("dd-MM");

                GridColumnGroup columnGroup = new GridColumnGroup();

                columnGroup.HeaderText = string.Format("{0} {1}", day, date);
                columnGroup.Name = startDate.ToString("yyyyMMdd");

                RadGrid1.MasterTableView.ColumnGroups.Add(columnGroup);
                List<MyList> listMyList = GetMyList();
                for (int i = 0; i < listMyList.Count; i++)
                {
                    GridBoundColumn column = new GridBoundColumn();
                    RadGrid1.MasterTableView.Columns.Add(column);
                    column.HeaderText = listMyList.ElementAt(i).myElement;
                    column.UniqueName = listMyList.ElementAt(i).myElement + "_" + startDate.ToString("yyyyMMdd");
                    column.ColumnGroupName = startDate.ToString("yyyyMMdd");
                    column.DataField = " ";
                    column.ItemStyle.Width = 50;
                }
                startDate = startDate.AddDays(1);
            }
        }

When I took the GetGrid function out of the if(!Page.IsPostback), the behavior of the grid did not change. The top header still disappears after a postback, but not after a refresh.

Can you please help me solve this? Thanks!

[Eyup]

Hello Marlies,

We are aware of this issue which is related to the ViewState. Our developers will further inspect this behavior and provide a proper fix as soon as possible.

Currently, you will need to create your grid entirely in the code-behind. I have created a sample RadGrid web site using the provided code samples. Please find the attached application and try to make the suggested modifications.

Regards,
Eyup
the Telerik team

[Marliela]

Hi Eyup,

Thanks for your reply, creating the grid entirely in the code-behind solves the problem!

Marlies

[Les]

I had the same issue. This helps.
Thanks!

[Kumar]

Hi,
I am having a problem with radgrid.the problem is

I am having grid calling the method to bind in initialise  and after that when i clicked the button means the grid appears the header value disappers.Please help me.

[Eyup]

Hello Kumar,

Could you please verify that you are correctly following the steps provided in the following help topic?
 Programmatic Creation

Kind regards,
Eyup
the Telerik team

[Herin]

Hello,
          I have created RadGrid programmatically. How can i change the background color of particular header group. I have three multi-column header group, and i want to change the background of all three header group different. How can i do this uaing  Programmatically ?

[Princy]

Hi Herin,

Please try the following code snippet to set the background color for the MultiColumnHeaders. You can set the HeaderStyle property of the headers.

CSS:

<style type="text/css">
 .headerRed
    {
        background: red !important;
    }
</style>

C#:

GridColumnGroup columnGroup = new GridColumnGroup();
columnGroup.Name = "MainHeader";
columnGroup.HeaderText = "HeaderName";
columnGroup.HeaderStyle.CssClass = "headerRed";
RadGrid1.MasterTableView.ColumnGroups.Add(columnGroup);

Thanks,
Princy

[RJ]

Hi All,

My grid disappears when I click pager buttons.

Any idea or workaround fix for the issue?

Thanks in Advance!

RJ

[RJ]

Got it