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

  1. #1

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

    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(); 
        }
    Last edited by Daniil; May 11, 2012 at 12:59 PM. Reason: [CLOSED]
  2. #2
    Ok I found solution. Only need to put this in js code:

    var defaultData = {
                fullname: 'Full Name',
                first: 'First Name'
            };
    
            var storeSt2 = Ext.getStore('StoreTestRows1');
            storeSt2.insert(0, defaultData);

Similar Threads

  1. Replies: 3
    Last Post: Oct 05, 2012, 11:44 AM
  2. Replies: 2
    Last Post: Apr 11, 2012, 8:33 PM
  3. Replies: 8
    Last Post: Nov 23, 2011, 3:15 PM
  4. Replies: 3
    Last Post: Mar 07, 2011, 7:17 PM
  5. Replies: 2
    Last Post: Jun 25, 2009, 5:06 PM

Tags for this Thread

Posting Permissions