[CLOSED] Dynamic grid model + data

[exe]

Hi, I'm trying to fill an existing grid created in markup, but always got a JS error:

TypeError: me.model is undefined

However, the model is added to the store:

MyStore.Model.Add(BuildModel());

What's wrong?

I also tried to:

MyStore.Add(BuildModel());

Then I get this JS error:

SyntaxError: missing ) after argument list
...mat":"n/j h:ia"}] }););App.MyStore.proxy.data = [["3m Co",71.72,0.02,0.03,"9/1

There is an extra ); at the end.

Thanks!

<%@ Page Language="C#" %>

<script runat="server">

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        FillGridPanel();

        this.Button1.Disabled = true;
    }

    private void FillGridPanel()
    {
        MyStore.Model.Add(BuildModel());
        MyStore.DataSource = Data;

        ColumnBase[] cols =
        {
            new Column
            {
                Text = "Company",
                DataIndex = "company",
                Flex = 1
            },
            new Column
            {
                Text = "Price",
                DataIndex = "price",
                Renderer = {Format = RendererFormat.UsMoney}
            },
            new Column
            {
                Text = "Change",
                DataIndex = "change",
                Renderer = {Fn = "change"}
            },
            new Column
            {
                Text = "Change",
                DataIndex = "pctChange",
                Renderer = {Fn = "pctChange"}
            },
            new DateColumn
            {
                Text = "Last Updated",
                DataIndex = "lastChange"
            }
        };


        MyGrid.ColumnModel.Columns.Add(cols);
        MyGrid.Store.Add(MyStore);
        MyStore.DataBind();
    }

    private Model BuildModel()
    {
        return new Model
        {
            Fields =
            {
                new ModelField("company"),
                new ModelField("price", ModelFieldType.Float),
                new ModelField("change", ModelFieldType.Float),
                new ModelField("pctChange", ModelFieldType.Float),
                new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
            }
        };
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
                new object[] {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
                new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                new object[] {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                new object[] {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                new object[] {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                new object[] {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
            };
        }
    }

</script>

<!DOCTYPE html>

<html>
    <head runat="server">
        <title>Create GridPanel and Store during DirectEvent - Ext.NET Examples</title>

        <script>
            var template = '<span style="color:{0};">{1}</span>';

            var change = function(value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };

            var pctChange = function(value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store ID="MyStore" runat="server" PageSize="20"
                       AutoLoad="false"
                >
                <Reader>
                    <ext:ArrayReader />
                </Reader>
                
                <Listeners>
                    <Load Handler="#{MyGrid}.setLoading(false);"></Load>
                </Listeners>
            </ext:Store>

    
            <ext:Window 
                ID="Window1" 
                runat="server"
                Title="Dynamic GridPanel"
                Layout="FitLayout"
                Height="350"
                Width="600">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button
                                ID="Button1"
                                runat="server" 
                                Text="Fill GridPanel" 
                                Icon="Add">
                                <DirectEvents>
                                    <Click OnEvent="Button1_Click">
                                        <EventMask ShowMask="true" 
                                                   Target="CustomTarget" 
                                                   CustomTarget="Window1" 
                                            />
                                    </Click>
                                </DirectEvents>    
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:GridPanel runat="server" ID="MyGrid" StoreID="MyStore">
                        
                    </ext:GridPanel>

                </Items>
            </ext:Window>
        </form>
    </body>
</html>

[fabricio.murta]

Thank you very much, I am posting this reply just to let you know that it is very important and useful for us when you provide us with a test case so we can reproduce your issue. I am looking at your matter right now.

[fabricio.murta]

Hello again, @exe!

I think you just based your research on the wrong example. If you look at this example (grid and store reconfigure), you'll see exactly the same case you wanted.

The problem is that you are defining your store in the markup level, you should do that also it to an empty model. In other words, you need to have an empty Model on your store definition, like this:

                <Model>
                    <ext:Model runat="server" />
                </Model>

You also missed refreshing model's meta and whole grid once you filled it. Your BuildModel method will turn into a RebuildModel like this:

    private void RebuildModel()
    {
        var fields = new ModelFieldCollection {
            new ModelField("company"),
            new ModelField("price", ModelFieldType.Float),
            new ModelField("change", ModelFieldType.Float),
            new ModelField("pctChange", ModelFieldType.Float),
            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
        };
        if (X.IsAjaxRequest) MyStore.RemoveFields();
        foreach (var field in fields) MyStore.AddField(field);
        MyStore.RebuildMeta();
    }

You could also let MyStore.DataBind() be the next instruction right next MyStore.Datasource=, but that's entirely optional. Important thing is that MyStore.DataBind() must come after RebuildModel() call.

Last, but not least, you will need to refresh your grid once everything is in place. In other words, after adding the last column, you should call MyGrid.Reconfigure(). So, add this line in the end of your FillGridPanel() method:

MyGrid.Reconfigure()

Or, after you call FillGridPanel(). Its up to you.

Well, that's it. If the sample does not enlight you and these leads can't help you fix the example you provided, just let me know.

[exe]

Hello, I've modified my test case, no JS errors, but no data either. Did I miss something?

<%@ Page Language="C#" %>

<script runat="server">

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        FillGridPanel();

        this.Button1.Disabled = true;
    }

    private void FillGridPanel()
    {        
        ColumnBase[] cols =
        {
            new Column
            {
                Text = "Company",
                DataIndex = "company",
                Flex = 1
            },
            new Column
            {
                Text = "Price",
                DataIndex = "price",
                Renderer = {Format = RendererFormat.UsMoney}
            },
            new Column
            {
                Text = "Change",
                DataIndex = "change",
                Renderer = {Fn = "change"}
            },
            new Column
            {
                Text = "Change",
                DataIndex = "pctChange",
                Renderer = {Fn = "pctChange"}
            },
            new DateColumn
            {
                Text = "Last Updated",
                DataIndex = "lastChange"
            }
        };

        MyGrid.ColumnModel.Columns.Add(cols);
        MyGrid.Reconfigure();

        RebuildModel();
        
        MyStore.DataSource = Data;
        MyStore.DataBind();
    }

    private void RebuildModel()
    {
        var fields = new ModelFieldCollection
        {
            new ModelField("company"),
            new ModelField("price", ModelFieldType.Float),
            new ModelField("change", ModelFieldType.Float),
            new ModelField("pctChange", ModelFieldType.Float),
            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
        };

        if (X.IsAjaxRequest) MyStore.RemoveFields();
        foreach (var field in fields) MyStore.AddField(field);
        MyStore.RebuildMeta();
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"}
            };
        }
    }

</script>

<!DOCTYPE html>

<html>
    <head runat="server">
        <title>Create GridPanel and Store during DirectEvent - Ext.NET Examples</title>

        <script>
            var template = '<span style="color:{0};">{1}</span>';

            var change = function(value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };

            var pctChange = function(value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store ID="MyStore" runat="server" PageSize="20"
                       AutoLoad="false"                
                >
                <Model>
                    <ext:Model runat="server"></ext:Model>
                </Model>
                <Reader>
                    <ext:ArrayReader/>
                </Reader>
                <Listeners>
                    <Load Handler="#{MyGrid}.setLoading(false);"></Load>
                </Listeners>
            </ext:Store>

    
            <ext:Window 
                ID="Window1" 
                runat="server"
                Title="Dynamic GridPanel"
                Layout="FitLayout"
                Height="350"
                Width="600">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button
                                ID="Button1"
                                runat="server" 
                                Text="Fill GridPanel" 
                                Icon="Add">
                                <DirectEvents>
                                    <Click OnEvent="Button1_Click">
                                        <EventMask ShowMask="true" 
                                                   Target="CustomTarget" 
                                                   CustomTarget="Window1" 
                                            />
                                    </Click>
                                </DirectEvents>    
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:GridPanel runat="server" ID="MyGrid" >
                        
                        
                    </ext:GridPanel>

                </Items>
            </ext:Window>
        </form>
    </body>
</html>

[Daniil]

Hi @exe,

Thank you for the test case. I don't see where you associate the Store to the GridPanel? Please set StoreID="MyStore" for the GridPanel.

[exe]

OMG, my bad, I was messing with the markup earlier and forgot to put back the StoreID assignment.
Many thanks, now it works.
You can close the thread.