[CLOSED] [Razor] Add row to GridPanel on client side using javascript

[boris]

Hi, I need to add row to GridView on client side. In old aspx I used

var r = new storeSt.recordType(defaultData, ++recId);

to create new record. (storeSt is reference on gridpanels store.) But in Razor that part of code returns error "Object doesn't support this action". Is syntax changed ?

Here is example that don't works:

@(Html.X().GridPanel().ID("GridPanelTestRows1")
        .View(view => view.Add(Html.X().GridView().TrackOver(false)))
        .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
        .ColumnModel(columnModel => {
            columnModel.Columns.Add(Html.X().Column().ID("fullname").DataIndex("fullname").Text("Full name"));
            columnModel.Columns.Add(Html.X().Column().ID("first").DataIndex("first").Text("First name"));            
        })
        .Store(store =>
        {
            store.Add(Html.X().Store().ID("StoreTestRows1")
                .Model(model =>
                {
                    model.Add(Html.X().Model().ID("ModelTestRows1")
                        .Fields(fields =>
                        {
                            fields.Add(Html.X().ModelField().Name("fullname").Type(ModelFieldType.String));
                            fields.Add(Html.X().ModelField().Name("first").Type(ModelFieldType.String));
                        }));
                })
                .Reader(reader =>
                {
                    reader.Add(Html.X().JsonReader());
                })
            );
        })
        .TopBar(topBar =>
        {
            topBar.Add(Html.X().Toolbar().ID("ToolBarTestRows1")
                .Items(items =>
                {
                    items.Add(Html.X().Button().ID("ButtonTestRows1").Text("Add row test")
                        .Listeners(listeners =>
                        {
                            listeners.Click.Handler = "ButtonTestRows1_Click();";
                        })
                    );
                })
            );
        })
    )

Here js code:

function ButtonTestRows1_Click() {
        var defaultData = {
            fullname: 'Full Name',
            first: 'First Name'
        };

        var storeSt = Ext.getStore('StoreTestRows1');
        var recId = 100; // provide unique id for the record
        var r = new storeSt.recordType(defaultData, ++recId); // create new record
        storeSt.insert(0, r); // insert a new record into the store (also see add)

        storeSt.commitChanges();
        Ext.getCmp('GridPanelStavke').getView().refresh(); 
    }