[CLOSED] Dynamically add row (MVC)

  1. #1

    [CLOSED] Dynamically add row (MVC)

    Hi, I am using Ext.net 2.5.1 with MVC for grid on desktop window. The grid is loaded with proxy, it is displayed fine. the Add button calls JS that invokes server to get a prepopulated row object and inserts it to store. no error on AddRow () action, but it adds an empty row without using the value returned from the object. Any idea what should I check?
    Thanks
    -susan zhang

    
     GridPanel.cshtml
    
    <script>
       var onAddRow = function (grid) {
                var selectedKey = -1;
               // get selectedKey value from selected row
               //..
               
                Ext.Ajax.request({
                    url: '@Url.Action("AddRow", "Grid")',
                    params: {
                        gridid: grid.id,
                        selectedKey: selectedKey,
                        isCopy: false
                    },
                    success: function (newRow) {
                        grid.store.insert(0, newRow);
                    }
                   
                });
            }
    
    </script>
    
     @(
     Html.X().Viewport()
            .Layout(LayoutType.Fit)
            .Items(
                Html.X().GridPanel()
                    .ID("gPanel" + Model.GridIDInt) //GridPanel ID
                    .Layout (LayoutType.Anchor)
                    .Frame(true)
                    .Store(    
                      Html.X().Store()
                          .ID (Model.GridID)
                          .RemotePaging(false)
                          .PageSize(20)
                          .Proxy (
                                Html.X().AjaxProxy ()
                                    .Url (Url.Action("LoadGridData", "Grid"))
                                    .Reader(Html.X().JsonReader()
                                    )
                          )
                          .Model(Model.StoreModel) //define model data schema
                          .Parameters( new { gridId = Model.GridIDInt  })
                    )      
                    .ColumnModel(Model.Columns) //define display columns
                    .TopBar(
                        Html.X().Toolbar()
                             .Items(
                                   Html.X().Button()
                                    .Text("Add")
                                    .Icon(Icon.Add)
                                    .Handler ("onAddRow (this.up('grid'))"),
                                    }),
                              ....
                            )//end toolbar items
                    )//end toolbar
                    .BottomBar(Html.X().PagingToolbar())
                    .SelectionModel(
                        Html.X().RowSelectionModel()
                            .Mode(SelectionMode.Single)
    
                    )
                    .View(
                       Html.X().GridView()
                            .StripeRows(true)
                            .LoadingText("Loading Grid Data...")
                    )
                    .Plugins(
                        Html.X().CellEditing().ClicksToEdit(1)
                    )
                    .Features(
                        Html.X().Grouping()
                                .ID("Grouping1")
                                .HideGroupedHeader(true)
                                .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})"),
                        Html.X().RowWrap(),
                        Html.X().Summary().ID("Total" + Model.GridIDInt)
                    )
                    
              )
        )
    
    GridController.cs
    
     public ActionResult AddRow(int gridid, int selectedKey, bool isCopy)
            {
                var gModel = new GridModel();
             
                var obj = gModel.InsertNewDataRowToCache(gridid, selectedKey, isCopy);
                return this.Direct(obj.RowObject); 
               
            }
    The AddRow() ajax response body:
    {"result":{"valuesStorage":{"cd_Account":"SampleKey1","IFAS_Contract_POP_Start_Date":"","IFAS_Contract_POP_End_Date":"","RowStatus":"IsError":false,"IsNew":true}}}
    I can see the prepopulated value in retuning obj. The obj format matches the Jason string for loading

    This is json string the proxy return to grid load :
    [{"valuesStorage":
       {"cd_Account":"SampleKey1",
         "IFAS_Contract_POP_Start_Date":"",
         "IFAS_Contract_POP_End_Date":"",
         "RowStatus":
            {"IsError":false,"IsNew":false}
     },
     
     {"valuesStorage":
       {"cd_Account":"SampleKey1",
        "IFAS_Contract_POP_Start_Date":"",
        "IFAS_Contract_POP_End_Date":"",
        "RowStatus":{"IsError":false,"IsNew":false}
    },
    {"valuesStorage":
       {"cd_Account":"SampleKey1",
        "IFAS_Contract_POP_Start_Date":"",
        "RowStatus":{"IsError":false,"IsNew":false}
    }
    ]
    Last edited by Daniil; Sep 04, 2014 at 2:53 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @susanz,

    I think a success handler should look like this:
    success: function (response) {
        var rec = Ext.decode(response.responseText).result;
        grid.store.insert(0, rec);
    }
    See also
    http://docs.sencha.com/extjs/4.2.1/#...method-request
  3. #3
    That works! Thanks Daniil!
    -susanz
  4. #4
    Also, in general, I would recommend to use a DirectEvent or a DirectMethod instead of Ext.Ajax.
  5. #5
    Could you explain a little bit why Ext.Ajax is not good ?
    Thanks
    -susanz
  6. #6
    Well, it is not "not good". Just the approaches that I recommend are Ext.NET things and support something. For example, if you call
    X.Msg.Alert("title", "message").Show();
    it won't be executed on client side, because Ext.Ajax doesn't extract scripts from a response and execute it (if I remember correctly).

    Also it extracts and parses a result from a response. So, the code might look like this.
    Ext.net.DirectMethod.request({
        url: '@Url.Action("AddRow", "Grid")',
    
        params: {
            gridid: grid.id,
            selectedKey: selectedKey,
            isCopy: false
        },
    
        success: function (result) {
            grid.store.insert(0, result);
        }
    });
    Generally speaking, a DirectResult
    return this.Direct();
    is supposed to be used with Ext.NET DirectMethods and DirectEvents.
  7. #7
    I see. Thanks for your explanations!
    -susanz

Similar Threads

  1. Dynamically Checkboxes in MVC?
    By vikram in forum 2.x Help
    Replies: 6
    Last Post: Oct 18, 2013, 9:41 AM
  2. [CLOSED] Dynamically add tab
    By AmitM in forum 2.x Premium Help
    Replies: 4
    Last Post: May 20, 2013, 11:44 PM
  3. Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  4. Replies: 2
    Last Post: Nov 23, 2011, 1:02 AM
  5. MVC - how to add buttons dynamically?
    By Marcin in forum 1.x Help
    Replies: 0
    Last Post: Aug 04, 2010, 2:30 PM

Posting Permissions