Sending form data through ajax to controller using Kendo UI grid

Question

i am trying to send model data from a form to the controller through kendo ui grid. I have yet to find any help on this.

1. Can i just serilize the form data and send it as a paramater?

Here is my grid code,

enter@(Html.Kendo().Grid<LookupGridResults>()
                                .Name("grid")

                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.FirstName).Width(225);
                                    columns.Bound(p => p.LastName).Width(225);
                                    columns.Bound(p => p.City).Width(225);
                                    columns.Bound(p => p.County).Width(225);
                                    columns.Bound(p => p.State).Width(225);
                                    columns.Bound(p => p.Zip).Width(225);
                                })
                                .Pageable()
                                .Sortable()
                                .Scrollable()
                                .HtmlAttributes(new { style = "height:550px;" })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(50)
                                    .ServerOperation(true)
                                    .Read(read => read.Action("ReadLeads", "LeadsManagement"))

                                 )

                                    ) 

I want to try to do this as an ajx call to the controller if possible.

Answer 1

You can use grid.dataSource.read method with data object parameter (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read):

var optionalData = { foo: 42, bar: "baz" };
dataSource.read(optionalData);

Or if you want custom action request, then there is undocumented dataSource.success method:

$.ajax({
    type: "POST",
    url: '...',
    data: {....},
    success: function (data) {
        //data is array of grid items to rebind
        grid.dataSource.success(data);
    }
});

Update

To collect data from form i am using jquery extension serializeObject (https://stackoverflow.com/a/1186309/5575536):

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

And usage is next:

var data = $('#form').serializeObject();
//or
var data = $('#container').find('input,select,textarea').serializeObject();