GridPanel dynamically add editable column bug(Or Store dynamically add RecordField bug)

  1. #1

    GridPanel dynamically add editable column bug(Or Store dynamically add RecordField bug)

    When I use markup,the code run correctly

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            var objects = new List<object>() 
            {
                 new {Name="0",Remark="0",Column1="0",Column2="0",Column3="0",Column4="0",Column5="0"},
                 new {Name="1",Remark="1",Column1="1",Column2="1",Column3="1",Column4="1",Column5="1"},
                 new {Name="2",Remark="2",Column1="2",Column2="2",Column3="2",Column4="2",Column5="2"},
                 new {Name="3",Remark="3",Column1="3",Column2="3",Column3="3",Column4="3",Column5="3"},
                 new {Name="4",Remark="4",Column1="4",Column2="4",Column3="4",Column4="4",Column5="4"},
                 new {Name="5",Remark="5",Column1="5",Column2="5",Column3="5",Column4="5",Column5="5"},
                 new {Name="6",Remark="6",Column1="6",Column2="6",Column3="6",Column4="6",Column5="6"},
                 new {Name="7",Remark="7",Column1="7",Column2="7",Column3="7",Column4="7",Column5="7"},
                 new {Name="8",Remark="8",Column1="8",Column2="8",Column3="8",Column4="8",Column5="8"},
                 new {Name="9",Remark="9",Column1="9",Column2="9",Column3="9",Column4="9",Column5="9"},
            };
            Store1.DataSource = objects;
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html id="Html1" runat="server" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Region="Center" ClicksToEdit="1">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" RemotePaging="true" RemoteSort="true"
                            OnRefreshData="Store_RefreshData">
                            <Proxy>
                                <ext:PageProxy>
                                </ext:PageProxy>
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="Name">
                                    <Fields>
                                        <ext:RecordField Name="Name">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Remark">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Column1">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Column2">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Column3">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Column4">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Column5">
                                        </ext:RecordField>
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" Width="200" Locked="true">
                            </ext:Column>
                            <ext:Column ColumnID="Remark" DataIndex="Remark" Header="Remark" Width="200" Locked="true">
                                <Editor>
                                    <ext:TextField ID="Remark" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column DataIndex="Column1" Header="Column1">
                                <Editor>
                                    <ext:TextField ID="TextField1" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column DataIndex="Column2" Header="Column2">
                                <Editor>
                                    <ext:TextField ID="TextField2" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column DataIndex="Column3" Header="Column3">
                                <Editor>
                                    <ext:TextField ID="TextField3" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column DataIndex="Column4" Header="Column4">
                                <Editor>
                                    <ext:TextField ID="TextField4" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column DataIndex="Column5" Header="Column5">
                                <Editor>
                                    <ext:TextField ID="TextField5" runat="server" />
                                </Editor>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                    </SelectionModel>
                    <View>
                        <ext:LockingGridView ID="LockingGridView1" runat="server">
                        </ext:LockingGridView>
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Screenshot:

    Click image for larger version. 

Name:	markup.png 
Views:	99 
Size:	6.0 KB 
ID:	3481

    But when I use codebehind,it's different!

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var jsonReader = this.Store1.Reader[0] as JsonReader;
                for (var i = 1; i <= 5; i++)
                {
                    //add field
                    jsonReader.Fields.Add(new RecordField("Column" + i));
                    //add column
                    var column = new Column();
                    column.DataIndex = "Column" + i;
                    column.Header = "Column" + i;
                    column.Editor.Add(new TextField());
                    this.GridPanel1.ColumnModel.Columns.Add(column);
                }
            }
        }
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            var objects = new List<object>() 
            {
                 new {Name="0",Remark="0",Column1="0",Column2="0",Column3="0",Column4="0",Column5="0"},
                 new {Name="1",Remark="1",Column1="1",Column2="1",Column3="1",Column4="1",Column5="1"},
                 new {Name="2",Remark="2",Column1="2",Column2="2",Column3="2",Column4="2",Column5="2"},
                 new {Name="3",Remark="3",Column1="3",Column2="3",Column3="3",Column4="3",Column5="3"},
                 new {Name="4",Remark="4",Column1="4",Column2="4",Column3="4",Column4="4",Column5="4"},
                 new {Name="5",Remark="5",Column1="5",Column2="5",Column3="5",Column4="5",Column5="5"},
                 new {Name="6",Remark="6",Column1="6",Column2="6",Column3="6",Column4="6",Column5="6"},
                 new {Name="7",Remark="7",Column1="7",Column2="7",Column3="7",Column4="7",Column5="7"},
                 new {Name="8",Remark="8",Column1="8",Column2="8",Column3="8",Column4="8",Column5="8"},
                 new {Name="9",Remark="9",Column1="9",Column2="9",Column3="9",Column4="9",Column5="9"},
            };
            Store1.DataSource = objects;
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html id="Html1" runat="server" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Region="Center" ClicksToEdit="1">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" RemotePaging="true" RemoteSort="true"
                            OnRefreshData="Store_RefreshData">
                            <Proxy>
                                <ext:PageProxy>
                                </ext:PageProxy>
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="Name">
                                    <Fields>
                                        <ext:RecordField Name="Name">
                                        </ext:RecordField>
                                        <ext:RecordField Name="Remark">
                                        </ext:RecordField>
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" Width="200" Locked="true">
                            </ext:Column>
                            <ext:Column ColumnID="Remark" DataIndex="Remark" Header="Remark" Width="200" Locked="true">
                                <Editor>
                                    <ext:TextField ID="Remark" runat="server" />
                                </Editor>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                    </SelectionModel>
                    <View>
                        <ext:LockingGridView ID="LockingGridView1" runat="server">
                        </ext:LockingGridView>
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Screenshot:

    Click image for larger version. 

Name:	codebehind.png 
Views:	96 
Size:	5.2 KB 
ID:	3482

    I'm not sure if I use it wrong or a bug?

    In addition,when unlock columns all empty,it's look like this:

    Click image for larger version. 

Name:	empty.png 
Views:	114 
Size:	7.1 KB 
ID:	3483

    Is there a solution to avoid it occurs? thanks.

    Environment:
    Ext.Net 1.2
    VS2010 SP1
    WINDOWS7 SP1
  2. #2
    Hi,

    There is an important difference:
    if (!X.IsAjaxRequest)
    It means that a JsonReader Fields collection is not populated during a Store's RefreshData DirectEvent and a JsonReader doesn't parse a data.

    You should remove that condition.

    Actually, it can look this way.

    Example
    protected void Page_Load(object sender, EventArgs e)
    {
        var jsonReader = this.Store1.Reader[0] as JsonReader;
        for (var i = 1; i <= 5; i++)
        {
            //add field
            jsonReader.Fields.Add(new RecordField("Column" + i));
            //add column
            if (!X.IsAjaxRequest) 
            {
                var column = new Column();
                column.DataIndex = "Column" + i;
                column.Header = "Column" + i;
                column.Editor.Add(new TextField());
                this.GridPanel1.ColumnModel.Columns.Add(column);
            }
        }
    }
  3. #3
    I use really is not correct,thanks a lot.

Similar Threads

  1. Replies: 14
    Last Post: Aug 18, 2016, 1:57 AM
  2. Replies: 2
    Last Post: Jun 01, 2011, 8:12 AM
  3. GridPanel add column dynamically
    By rajputamit in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2010, 8:31 AM
  4. Replies: 2
    Last Post: Nov 25, 2009, 8:35 AM
  5. Dynamically create GridPanel and Store
    By whitvanilla in forum 1.x Help
    Replies: 4
    Last Post: Jun 18, 2009, 10:18 PM

Posting Permissions