Dynamically generated multicolumn headers: top header disappears after postback

8 posts, 1 answers
  1. Marliela
    Marliela avatar
    4 posts
    Member since:
    Aug 2012

    Posted 05 Jul 2012 Link to this post

    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!
  2. Answer
    Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 10 Jul 2012 Link to this post

    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
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marliela
    Marliela avatar
    4 posts
    Member since:
    Aug 2012

    Posted 11 Jul 2012 Link to this post

    Hi Eyup,

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

    Marlies
  5. Les
    Les avatar
    29 posts
    Member since:
    Feb 2011

    Posted 12 Jul 2012 Link to this post

    I had the same issue. This helps.
    Thanks!
  6. Kumar
    Kumar avatar
    2 posts
    Member since:
    Sep 2012

    Posted 31 Jul 2012 Link to this post

    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.
  7. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 02 Aug 2012 Link to this post

    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
    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 their blog feed now.
  8. Herin
    Herin avatar
    2 posts
    Member since:
    Jul 2013

    Posted 15 Nov 2013 Link to this post

    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 ?
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Nov 2013 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017