Grid Update - How To Parse At The Server

[Aron]

I have my grid working well, including popup editing.  When I make an update from the grid, the update url fires.   What I need to know is how to parse the data sent by the Kendo grid to "donorUpdateJson.cshmtl".  I am using Microsoft Web 2.0 Razor as the platform.  I would like the data to arrive at the server and parse it with QueryString (or some other method) but I don't know what the data looks like and could not find any examples.  Thank you

Here is my datasource:

        var ds = new kendo.data.DataSource({

            transport: {

                read: {

                    url: "donorReadJson.cshtml",

                    dataType: "json",

                    type: "POST"

                },

                update: {

                    url: "donorUpdateJson.cshtml?" ,

                    dataType: "json",

                    contentType: "application/json",

                    type: "POST",

                    data: {

                        donorId: $("#input").val(), 

                        firstname: $("#input").val(),

                        lastname: $("#input").val(),

                        homephone: $("#input").val(),

                        workphone: $("#input").val(),

                        cellphone: $("#input").val(),

                        email: $("#input").val()

                    }

                },

                destroy: {

                    url: "/orders/destroy",

                    data: {

                        donorId: $("#input").val() 

                    },

                },

                parameterMap: function (options, operation) {

                    if (operation != "read") {

                       return { models: JSON.stringify(options.models) };

                    }

                }

 

            },

            schema: {

                model: {

                    id: "donorID",

                    fields: {

                        donorID: { type: "number", editable: false, },

                        title: { type: "string" },

                        firstname: { type: "string", validation: { required: true } },

                        middlename: { type: "string" },

                        lastname: { type: "string", validation: { required: true } },

                        address: { type: "string" },

                        city: { type: "string" },

                        state: { type: "string" },

                        zipcode: { type: "string" },

                        homephone: { type: "string" },

                        workphone: { type: "string" },

                        cellphone: { type: "string" },

                        email: { type: "string" }

                    },

                },

            },

            pageSize: 10,

 

        });

 

 

        $("#grid").kendoGrid({

            dataSource: ds,

            autoBind: true,

            filterable: false,

            resizable: true,

            sortable: true,

            scrollable: false,

            pageable: {input: true, numeric: false },

            columns: [

                { field: "firstname", title: "First Name" },

                { field: "lastname", title: "Last Name" },

                { field: "address", title: "Address", hidden: true },

                { field: "city", title: "City", hidden: true },

                { field: "state", title: "State", hidden: true },

                { field: "zipcode", title: "Zip", hidden: true },

                { field: "homephone", title: "Home" },

                { field: "workphone", title: "Work" },

                { field: "cellphone", title: "Cell" },

                { field: "email", title: "Email" },

               { command: ["edit", "destroy"], title: " ", width: "200px" }],

            editable: "popup"

        });

    });

 

 

</script>

[Aron]

[Aron]

Using a different approach to use querystring.  Here is the code to modify the url and add a querystring:

parameterMap: function (options, operation) {

   if (operation !== "read") {

 ds.transport.options.update.url = "donorUpdateJson.cshtml?data=" + options.firstname;

  return;

  }

  }

But somehow the querystring is stripped when it arrives to the server.  Any thoughts?

 

[Vladimir Iliev]

Hi Aron,

Basically you should send the data to the controller in format that the Default MVC Model Binder will understand. Then you should accept Object of type Donor (if the Grid uses Donor type) at the controller and the MVC Model Binder will bind the received data to that object. After the update is complete you can send empty response to the client side to notify the grid that the operation is done. 

Converting the data before sending using ParameterMap:

parameterMap: function (data, operation) {
    if (operation == "update") {
        // post the products so the ASP.NET DefaultModelBinder will understand them:
        var result = {};

        for (var i = 0; i < data.models.length; i++) {
            var order = data.models[i];

            for (var member in order) {
                result[member] = order[member];
            }
        }

        return result;
    } else {
        return JSON.stringify(data)
    }
}

Example controller action:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ForeignKeyColumn_Update(Order order)
{
    // ... Update

    return Json(null);
}

 Kind Regards,
Vladimir Iliev
the Telerik team

[Aron]

Vladimir:  Thank you for your response.  I am not using MVC, rather Web Pages 2.0 Razor.  I am able to use RESPONSE.FORM to access the Kendo data  "result" passed to the server.  It would be helpful to many if you would add a tab to your Grid documentation that discusses consuming the data at the server showing examples for MVC, Web Pages 2.0, Restful, etc.

I am getting a javascript error "undefined" on "data.models" from the code you sent me. Is there something missing from my datasource?  Below is my current datasource:  "Read" works well and a nice grid appears.  The problem is in "update"  Thank you

var ds = new kendo.data.DataSource({

      transport: {

          read: {

              url: "donorReadJson.cshtml",

              dataType: "json",

              type: "POST"

          },

          update: {

              url: "donorUpdateJson.cshtml",

              dataType: "json",

              type: "POST"

          },

          destroy: {

              url: "donorDestroyJson.cshtml",

              data: {

                  donorID: $("#input").val() // sends the value

              }

          },

          parameterMap: function (data, operation) {

              if (operation == "update") {

                  // post the products so the ASP.NET DefaultModelBinder will understand them:

                  var result = {};

                  for (var i = 0; i < data.models.length; i++) {

                      var order = data.models[i];

                      for (var member in order) {

                          result[member] = order[member];

                      }

                  }

                  return result;

              } else {

                  return JSON.stringify(data) }

          }

      },

      pageSize: 30,

      schema: {

          model: {

              id: "donorID",

              fields: {

                  donorID: { type: "number", editable: false, },

                  title: { type: "string" },

                  firstname: { type: "string", validation: { required: true } },

                  middlename: { type: "string" },

                  lastname: { type: "string", validation: { required: true } },

                  address: { type: "string" },

                  city: { type: "string" },

                  state: { type: "string" },

                  zipcode: { type: "string" },

                  homephone: { type: "string" },

                  workphone: { type: "string" },

                  cellphone: { type: "string" },

                  useremail: { type: "string" }

              }

          }

      }

  });

[Vladimir Iliev]

Hi Aron,

 
From the provided information it's not clear for us why the "models" property of the data object is empty - could you please provide run-able sample where the issue is reproduced - hopefully this will help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
the Telerik team

[Aron]

Hi Vladmir:  I was able to solve the parameterMap problem. 

My issue now is that I am getting a JavaScript runtime error "0x800a03ec - expected ;" in kendo.web.min.js (image attached). 

To produce this error, I click "edit" on the grid, the popup window appears.  I make my changes and then click "update".  The update url fires and the database changes are made.  When it returns to the web page, that is when the "Expected ;" Jscript error occurs.  What am I not doing correctly? 

Attached are the files needed to help you.  I have included the returned JSON data (3 records) in the read url file.  The update url file is commented out as it is not needed to execute to produce this error.  Thanks

[Vladimir Iliev]

Hi Aron,

 
I tried to reproduce the problem with provided files but to no avail – everything is working as expected on our side (please check this screencast). To be able to help you further please provide run-able project where the issue is reproduced.

Kind Regards,
Vladimir Iliev
the Telerik team

[Aron]

Hi Vladimir:  I uploaded the pages to my test site:   http://life-renewal-test.org/
Login as [e-mail].  Psw = menachem!
After the grid appears, click edit, make a change and then click update.
The db is updated but the javascript error message "Error: Expected ';' appears.  I am using IE with Debug enabled.
If you refresh the page the change will appear.
If this is not sfficent, I can send you the project.

[Vladimir Iliev]

Hi Aron,

 
After checking the provided link I was able to reproduce the issue on our side - it was caused by returning invalid response from the server on update action. Currently the server returns response with string that contains empty spaces, but the grid expects empty response (empty string or null value) to notify that the changes are successful. After updating the project with the above change the grid works as expected on our side (please check this screencast). 

Kind Regards,
Vladimir Iliev
the Telerik team

[Aron]

Hi Vladmir:  Thank you for taking the time to help me with my problem.  I have no idea where the 4 spaces that show in the Response output are coming from.  It is not in my code since I use a simple "return" statement.   Perhaps it is from some hidden WebMatrix code. I finally figured out the proper code to put at the end of my update page.   It is;

// return a null response

Response.ContentType = "text/plain";

Response.Write(null);

Response.End();

Problem solved.  Suggest you add a tab to your documentation titled "Consuming the Ajax Query at the Server".  I am sure it will be helpful for others to understand how to process Kendo server requests.  Best regards,