We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Form Submit Viewmodel Grid data

Thread ID:

Created:

Updated:

Platform:

Replies:

118526 Mar 17,2015 09:03 AM UTC Mar 20,2015 11:59 AM UTC ASP.NET MVC 4
loading
Tags: Grid
Torbian Linz
Asked On March 17, 2015 09:03 AM UTC

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 [Syncfusion]
Replied On March 18, 2015 11:50 AM UTC

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
Replied On March 19, 2015 11:39 AM UTC

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
Replied On March 19, 2015 12:43 PM UTC

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 [Syncfusion]
Replied On March 20, 2015 11:59 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;