[CLOSED] Javascript: Adding Dynamic Field to the Store and Creating Dynamic Column for the grid

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Javascript: Adding Dynamic Field to the Store and Creating Dynamic Column for the grid

    Hi,

    i have a Store and a Grid in the page
    <ext:Store ID="gridstore" runat ="server">
            </ext:Store>
    <ext:GridPanel                             
                                        ID="gridSequenceRight"                             
                                        runat="server"                             
                                        StoreID="gridSequenceRightStore"
                                        DDGroup="firstGridDDGroup"                            
                                        EnableDragDrop="true"                                                        
                                        StripeRows="true"                            
                                        AutoExpandColumn="FullName"                            
                                        Width="325"                            
                                        Title="Right">                                                        
                                        <SelectionModel>                                 
                                            <ext:RowSelectionModel ID="RowSelectionModelRight" runat="server" />                             
                                        </SelectionModel>
                                        <GetDragDropText Fn="getDragDropText" />                                                                               
                                   </ext:GridPanel>
    When i add Dynamic field to the Store, the Store doesnot show the Field values
    And when i add ColumnModel to the Grid it throws Javascript error.
    for (var i = 0; i < s.length; i++) {
                        var field = new Ext.data.JsonReader({ fields: [s[i].Name] });
                        gridstore.addField(field,i,false);
    
                        var col = new Ext.grid.ColumnModel({
                            columns: [{ dataIndex: s[i].Name, header: s[i].Name, width: 160}]
                        });
                          gridSequenceLeft(col);
    }
    Please Help. Thank You.
    Last edited by Daniil; Sep 20, 2011 at 3:33 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To add a column please use the GridPanel's .addColumn() method.

    Here is an example how to use.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                };
                store.DataBind();
            }
        }
    </script>
    <!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>Ext.Net Example</title>
        <script type="text/javascript">
            var add = function () {
                var grid = GridPanel1,
                    store = grid.getStore();
                store.addField({ name : "newField" });
                grid.addColumn(new Ext.grid.Column({
                    header : "New",
                    dataIndex : "newField"
                }));
                store.loadData([
                    [ "test1", "new1" ],
                    [ "test2", "new2" ] 
                ]);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
            <ext:Button runat="server" Text="Add">
                <Listeners>
                    <Click Handler="add();" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Hi, Daniil

    I did the same thing but still it throws me an javascript error. I am using ext 1.1 version.
    var grid = gridSequenceLeft,gstore = grid.getStore();
    gstore.addField({ name: [s[i].Name] });
    grid.addColumn(new Ext.grid.Column({
                            dataIndex: s[i].Name,
                            header: s[i].Name,
                            width: 160
                        }));
    <ext:GridPanel                             
                                        ID="gridSequenceLeft"                             
                                        runat="server"                                                        
                                        DDGroup="GridDDGroup"                            
                                        EnableDragDrop="true"                            
                                        StripeRows="true"                                                     
                                        Width="325"                            
                                        Title="Left">
                                        <Store>                 
                                            <ext:Store ID="gridstore1" runat="server">                     
                                                <Reader>                         
                                                    <ext:ArrayReader>                                                   
                                                    </ext:ArrayReader>                     
                                                </Reader>                 
                                            </ext:Store>             
                                        </Store>                                                         
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModelLeft" runat="server" />                             
                                        </SelectionModel>                             
                                        <GetDragDropText Fn="getDragDropText" />                             
                                        <Listeners>                                 
                                            <Render Fn="setDD" />                             
                                        </Listeners>                        
                                    </ext:GridPanel>
  4. #4
    Is this correct? It looks weird to have an array there?
    gstore.addField({ name: [s[i].Name] });
  5. #5
    Agreed, it's a syntax error.
  6. #6
    Hi, wazige and Daniil

    if, You mean code as to be like below then it is changed,
    gstore.addField({ name: s[i].Name });
    But i still get an JS error.
    grid.addColumn(new Ext.grid.Column({
                            dataIndex: s[i].Name,
                            header: s[i].Name,
                            width: 160
                        }));
    please help
  7. #7
    Please post sample reproduces the issue
    What is 's'?
  8. #8
    Hi Vladimir

    I have posted my code,

    protected void Page_Load(object sender, EventArgs e)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1,"Shelf",2 },
                    new object[] { 2,"Row",3 },
                    new object[] { 3,"Bin",2 }
                };
                this.Store1.DataBind();
    }
    
    <script type="text/javascript">
             var add = function () {
             var s = Store1.getRecordsValues();
             for (var i = 0; i < s.length; i++) {
                  var grid = gridSequenceLeft, gstore = grid.getStore();
                        gstore.addField({ name: s[i].Name });
                        grid.addColumn(new Ext.grid.Column({
                            dataIndex: s[i].Name,
                            header: s[i].Name,
                            width: 160
                        }));
              }
    };
    <script/>
    
    <ext:Store ID="Store1" runat="server" IgnoreExtraFields="false">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Level"/>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="NodeCount" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
    
    <ext:GridPanel                             
                                        ID="gridSequenceLeft"                             
                                        runat="server"                                                        
                                        DDGroup="GridDDGroup"                            
                                        EnableDragDrop="true"                            
                                        StripeRows="true"                                                     
                                        Width="325"                            
                                        Title="Left">
                                        <Store>                 
                                            <ext:Store ID="gridstore1" runat="server">                     
                                                <Reader>                         
                                                    <ext:ArrayReader>                                                      
                                                    </ext:ArrayReader>                     
                                                </Reader>                 
                                            </ext:Store>             
                                        </Store>                                                          
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModelLeft" runat="server" />                             
                                        </SelectionModel>                             
                                        <GetDragDropText Fn="getDragDropText" />                             
                                        <Listeners>                                 
                                            <Render Fn="setDD" />                             
                                        </Listeners>                        
                                    </ext:GridPanel>
                                    <ext:Button runat="server" Text="Add">             
    <Listeners>                 
    <Click Handler="add();" />             
    </Listeners>         
    </ext:Button>
    Attached Thumbnails Click image for larger version. 

Name:	GridError.jpg 
Views:	237 
Size:	103.2 KB 
ID:	3214  
  9. #9
    Please define an empty ColumnModel for the gridSequenceLeft.

    Example
    <ColumnModel runat="server">
        <Columns>
            <ext:Column Hidden="true" />
        </Columns>
    </ColumnModel>
    A

    And remove that column before adding new columns:
    gridSequenceLeft.removeColumn(0)
    Last edited by Daniil; Sep 19, 2011 at 12:24 PM.
  10. #10
    Quote Originally Posted by Shanth View Post
    <script type="text/javascript">
    var add = function () {
    var s = Store1.getRecordsValues();
    for (var i = 0; i < s.length; i++) {
    var grid = gridSequenceLeft, gstore = grid.getStore();
    gstore.addField({ name: s[i].Name });
    grid.addColumn(new Ext.grid.Column({
    dataIndex: s[i].Name,
    header: s[i].Name,
    width: 160
    }));
    }
    };
    <script/>
    As well I don't think this method will work good.

    .getRecordsValues() returns records values and its ids.

    For example, for that store:
    <ext:Store runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    .getRecordsValues() will return something like this:
    [{
        test1 : "test1",
        test2 : "test2",
        test3 : "test3",
        id:-3
    }, {
        test1 : "test4",
        test2 : "test5",
        test3 : "test6",
        id:-4
    }]
    So, there is no .Name.

    Do you need to copy all fields from one store to another, right?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Sep 27, 2011, 7:25 AM
  2. [CLOSED] Problem Creating Dynamic Header column for filter
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 23, 2011, 6:59 AM
  3. Replies: 0
    Last Post: Jun 21, 2011, 12:18 PM
  4. Replies: 0
    Last Post: Mar 04, 2011, 6:46 AM
  5. Replies: 0
    Last Post: Apr 23, 2009, 7:43 AM

Posting Permissions