PDA

View Full Version : [CLOSED] Dynamically add row (MVC)



susanz
Sep 03, 2014, 7:57 PM
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}
}
]

Daniil
Sep 04, 2014, 10:06 AM
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/#!/api/Ext.data.Connection-method-request

susanz
Sep 04, 2014, 2:43 PM
That works! Thanks Daniil!
-susanz

Daniil
Sep 04, 2014, 2:54 PM
Also, in general, I would recommend to use a DirectEvent or a DirectMethod instead of Ext.Ajax.

susanz
Sep 04, 2014, 3:20 PM
Could you explain a little bit why Ext.Ajax is not good ?
Thanks
-susanz

Daniil
Sep 05, 2014, 5:03 AM
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.

susanz
Sep 05, 2014, 3:57 PM
I see. Thanks for your explanations!
-susanz