Sending Kendo grid row to server when click submit button

Question

I have an aspx page which has many html controls and a kendo grid on it. I want when the submit button is clicked all the data on the web form send to server. I know the the solution for the html controls but I cant send and probably convert to Json my Kendo grid?

Answer 1

If the grid is in the Edit Mode then all you have to do is:

For sending the entire data on the grid:

$.ajax({
    url: 'your URL',
    cache: false,
    type: 'POST',
    contentType: 'application/json; 
    charset=utf-8',
    data: JSON.stringify($("#GridName").data().kendoGrid._data)
});

For sending the data of a row in edit mode:

$.ajax({
    url: 'your URL',
    cache: false,
    type: 'POST',
    contentType: 'application/json; 
    charset=utf-8',
    data: JSON.stringify($("#GridName").data("kendoGrid").dataSource.select())
});

I hope this helps!

Answer 2

As I don't know your scenario i think you might want to perform similar thing:

 $("#btnSave").click(function () {
                var grddatasource= = $("#GridEmployee").data("kendoGrid");
                var DTO = JSON.stringify(grddatasource);//Convert javascript object to JSON object             
                $.ajax({
                    url: 'your URL' 
                    cache: false,type: 'POST',contentType: 'application/json; charset=utf-8',data: DTO,dataType: "JSON",
                    success: function (data) {
                        alert('Created');
                        
                    },
                    error: function (jqXHR, textStatus, err) {
                        $('#error').text('Error: ' + err);
                        alert('Error: ' + err);
                    }
                });
            }
            else {alert('Your Msg !!');}
        });

EDIT You have to include the following in the kendo grid for enabling popup editing:

.Editable(editable => editable.Mode(GridEditMode.InLine))

and You have to add the command button in the Kendo Grid (google search) and you have to add the following :

.DataSource(dataSource =>
  dataSource.Ajax()
    .Model(model =>
    {
      model.Id(x => x.Id);
    })
    .Read(read => read.Url("your URL").Type(HttpVerbs.Get))
    .Create(create => create.Url("your URL").Type(HttpVerbs.Post))
    .Update(update => update.Url("your URL").Type(HttpVerbs.Put))
    .Destroy(destroy => destroy.Url("your URL").Type(HttpVerbs.Delete))
)

Edit Add a save button on the toolbar of kendogrid

.ToolBar(toolbar => {
  toolbar.Save(); // add save button to grid toolbar (If you want InBuilt method)
})

Or I think you want to Save the Grid Separately then using JQuery:

<button type="button" id="save">Save</button>

then add the following jQuery:

$("#save").on("click", function () {
  $("#Segment").data("kendoGrid").saveChanges();
});

Answer 3

I think, that You can always get submitted row data from options object.

create : function(options) {
                            console.log("Create");
                            console.log(options.data);