Form Submit Viewmodel Grid data

[Torbian Linz]

Hi,

I basically have a View with a Viewmodel for an Order. This wraps a few primitive values and additionally a List of Positions.

Now I got so far, that everthing is presented nicely in a form where the user can post a new Order. 

The Positions are shown in a grid where the user can change the amount, the datasource of the Grid is the List in the Viewmodel.

When the Submit Button of the form is clicked, all values are submitted to the according Controllor Post Method.

Now the problem: Although the Grid is bound to the list of positions, the List that arrives at the controller is always empty.

Is there a way to easily get the data of the grid into the viewmodel?

Kind regards,

Torbian Linz

 

[Madhu Sudhanan P]

Hi Torbian,

Thanks for using Syncfusion products.

Query: “Although the Grid is bound to the list of positions, the List that arrives at the controller is always empty. Is there a way to easily get the data of the grid into the viewmodel?”

We can post the grid datasource to the controller`s action on form submit, please refer the below steps to achieve your requirement.

1. Place a hidden type input element in the form as follows

@using (Html.BeginForm("SaveDetails", "Home", FormMethod.Post, new { id = "ShowDetailsForm", enctype = "multipart/form-data" }))

{

<input type="hidden" name="GridData" id="GridData" value=""/>

. . . .

<input type="submit" value="Submit" />

}

2. Retrieve the grid data in Create event and update it in the hidden element.

@using (Html.BeginForm("SaveDetails", "Home", FormMethod.Post, new { id = "ShowDetailsForm", enctype = "multipart/form-data" }))

{

<input type="hidden" id="GridData" value=""/>

@(Html.EJ().Grid<object>("ExportGrid")

.Datasource((IEnumerable<object>)ViewBag.datasource)

.AllowPaging()

. . . . . .

.ClientSideEvents(evt => evt.create("onCreated")))

<input type="submit" value="Submit" />

}

[JS]

function onCreated(args) {

//Retrieve the grid`s datasource

var result = this.model.dataSource;

//stringify and place the grid`s record as value of hidden element

$("#GridData").val(JSON.stringify(result));

}

3. Now on form submit, we can get the grid`s datasource at the controller side using the name “GridData”. At the controller, we can get the grid data as string type and so it is our responsibility to deserialize it to the respective type(in your case to deserialize it to List<Position>).

For your kind information, in the above code snippet, the hidden input will be updated with grid datasource at once and hence the edited values from grid will not updated. To do so, we have to update the hidden element value with grid datasource before form submit (using Jquery submit).

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P

[Torbian Linz]

Hi Madhu,

works like a charm, thanks for that.

However, when i try to update the hidden input in my jQuery submit function, my problem is, how do I adress the Object, that represents the grid?

In your "onCreate" function it is simply "this". But when I try to access it via the jQuery id selector with the given id to the grid: $("#ExportGrid") if the grid was @(Html.EJ().Grid<object>("ExportGrid") I don't get the according object to access model.dataSource.

Kind regards,

Torbian Linz

[Torbian Linz]

Ok, found a workaround myself. 

Reused the oncreate function with the EndEdit Event. Will have to do this for EndAdd too.

Kind Regards

Torbian Linz

[Madhu Sudhanan P]

Hi Torbian,

Please find the response

Query: “When i try to update the hidden input in my jQuery submit function, my problem is, how do I adress the Object, that represents the grid?”

We can create the grid object using one of the following ways.

$("#ExportGrid").ejGrid("instance");

OR

$("#ExportGrid").data("ejGrid");

And we can update the hidden element using the Jquery form submit event as follows.

$("form").submit(function () {

var grid = $("#ExportGrid").ejGrid("instance");

var data = grid.model.dataSource;

$("#GridData").val(JSON.stringify(data));

});

If we have used the above method, then there is no need to update the hidden element value on grid client side events as Create, EndEdit etc.

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P