[CLOSED] GridPanel: dynamic generate and change the gridpanel header in code behind

  1. #1

    [CLOSED] GridPanel: dynamic generate and change the gridpanel header in code behind

    Hi,
    I want to change the gridpanel header when change the date.
    But it seems only gridpanel row content changed, the header did not change.
    Please help to check my code.
    Thanks.

    1.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebTest.WebForm11" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="extAjaxScriptManager" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="Id">
                    <Fields>
                        <ext:RecordField Name="Id" />
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="A0" />
                        <ext:RecordField Name="A1" />
                        <ext:RecordField Name="A2" />
                        <ext:RecordField Name="A3" />
                        <ext:RecordField Name="A4" />
                        <ext:RecordField Name="A5" />
                        <ext:RecordField Name="A6" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="My" Layout="Border" Region="Center"
                    Cls="app-center">
                    <Items>
                        <ext:Panel Split="true" ID="Panel2" runat="server" CollapseMode="Mini" Collapsed="false"
                            Frame="true" Width="190" Region="West" Border="false" Cls="app-west">
                            <Items>
                                <ext:DatePicker ID="DatePicker1" runat="server" Cls="ext-cal-nav-picker">
                                    <DirectEvents>
                                        <Select OnEvent="DatePicker1_Select">
                                            <ExtraParams>
                                                <ext:Parameter Name="selectDate" Mode="Raw" Value="#{DatePicker1}.value" />
                                            </ExtraParams>
                                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="GridPanel1" />
                                        </Select>
                                    </DirectEvents>
                                </ext:DatePicker>
                                <ext:TextField Hidden="false" ID="txtStartDate" runat="server" />
                                <ext:TextField Hidden="false" ID="txtEndDate" runat="server" />
                            </Items>
                        </ext:Panel>
                        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="List" StoreID="Store1"
                            TrackMouseOver="true" Layout="FitLayout" Region="Center">
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column DataIndex="Id" Header="Id" Width="20" />
                                    <ext:Column DataIndex="Name" Header="Name" Width="200" />
                                </Columns>
                            </ColumnModel>
                            <BottomBar>
                                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="20" DisplayInfo="true"
                                    DisplayMsg="Displaying items {0} - {1} of {2}" EmptyMsg="No items to display"
                                    HideRefresh="true">
                                    <Items>
                                        <ext:Label ID="Label1" runat="server" Text="Page size:" />
                                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                        <ext:ComboBox ID="cbxPageSize" runat="server" Width="80">
                                            <Items>
                                                <ext:ListItem Text="20" />
                                                <ext:ListItem Text="40" />
                                                <ext:ListItem Text="60" />
                                                <ext:ListItem Text="80" />
                                                <ext:ListItem Text="100" />
                                                <ext:ListItem Text="200" />
                                            </Items>
                                            <SelectedItem Value="20" />
                                            <Listeners>
                                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                        <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
                                            <Listeners>
                                                <Click Handler="#{GridPanel1}.reload();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:PagingToolbar>
                            </BottomBar>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                            </SelectionModel>
                            <View>
                                <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                                </ext:GridView>
                            </View>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    1.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    using System.Data;
    
    namespace WebTest
    {
        public partial class WebForm11 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    BindData(DateTime.Now);
                }
            }
    
            protected void DatePicker1_Select(object sender, DirectEventArgs e)
            {
                BindData(DateTime.Parse(e.ExtraParams["selectDate"]));
            }
    
            private void BindData(DateTime dtNow)
            {
                DateTime dtFirstDateOfThisWeek = dtNow.AddDays(Convert.ToDouble((0 - Convert.ToInt16(DateTime.Now.DayOfWeek))));
                DataTable dt = new DataTable();
                DataRow dr;
    
                dt.Columns.Add(new DataColumn("Id", typeof(string)));
                dt.Columns.Add(new DataColumn("Name", typeof(string)));
                dt.Columns.Add(new DataColumn("A0", typeof(string)));
                dt.Columns.Add(new DataColumn("A1", typeof(string)));
                dt.Columns.Add(new DataColumn("A2", typeof(string)));
                dt.Columns.Add(new DataColumn("A3", typeof(string)));
                dt.Columns.Add(new DataColumn("A4", typeof(string)));
                dt.Columns.Add(new DataColumn("A5", typeof(string)));
                dt.Columns.Add(new DataColumn("A6", typeof(string)));
    
                for (int i = 0; i < 30; i++)
                {
                    dr = dt.NewRow();
                    dr[0] = i.ToString();
                    dr[1] = "Product " + i.ToString();
                    dr[2] = dtFirstDateOfThisWeek.ToShortDateString();
                    dr[3] = dtFirstDateOfThisWeek.AddDays(1).ToShortDateString();
                    dr[4] = dtFirstDateOfThisWeek.AddDays(2).ToShortDateString();
                    dr[5] = dtFirstDateOfThisWeek.AddDays(3).ToShortDateString();
                    dr[6] = dtFirstDateOfThisWeek.AddDays(4).ToShortDateString();
                    dr[7] = dtFirstDateOfThisWeek.AddDays(5).ToShortDateString();
                    dr[8] = dtFirstDateOfThisWeek.AddDays(6).ToShortDateString();
                    dt.Rows.Add(dr);
                }
                Store1.DataSource = dt;
                Store1.DataBind();
               
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.ToShortDateString(),
                    DataIndex = "A0"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(1).ToShortDateString(),
                    DataIndex = "A1"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(2).ToShortDateString(),
                    DataIndex = "A2"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(3).ToShortDateString(),
                    DataIndex = "A3"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(4).ToShortDateString(),
                    DataIndex = "A4"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(5).ToShortDateString(),
                    DataIndex = "A5"
                });
                GridPanel1.ColumnModel.Columns.Add(new Column()
                {
                    Header = dtFirstDateOfThisWeek.AddDays(6).ToShortDateString(),
                    DataIndex = "A6"
                });
                txtStartDate.Text = dtFirstDateOfThisWeek.ToShortDateString();
                txtEndDate.Text = dtFirstDateOfThisWeek.AddDays(6).ToShortDateString();
    
                this.GridPanel1.DataBind();
            }
        }
    }
    Last edited by Daniil; May 24, 2012 at 9:34 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Just changing ColumnModel Columns during DirectEvent doesn't affect to client. You should call
    GridPanel1.Reconfigure();
    to cause the changes to be rendered to client.
  3. #3
    Hi,
    Quote Originally Posted by Daniil View Post

    Just changing ColumnModel Columns during DirectEvent doesn't affect to client. You should call
    GridPanel1.Reconfigure();
    to cause the changes to be rendered to client.
    Thanks, Daniil.
    It works fine.
    Please colse this topic.

Similar Threads

  1. Replies: 2
    Last Post: Apr 12, 2012, 6:44 AM
  2. Replies: 0
    Last Post: Mar 04, 2011, 1:05 PM
  3. Replies: 12
    Last Post: Dec 21, 2010, 3:27 PM
  4. Replies: 2
    Last Post: Sep 24, 2009, 3:16 AM
  5. Replies: 0
    Last Post: Aug 05, 2009, 10:48 AM

Posting Permissions