This is a migrated thread and some comments may be shown as answers.

Grid Update - How To Parse At The Server

10 Answers 403 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aron
Top achievements
Rank 1
Aron asked on 08 Jan 2013, 06:16 PM
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>

10 Answers, 1 is accepted

Sort by
0
Aron
Top achievements
Rank 1
answered on 09 Jan 2013, 03:31 PM
0
Aron
Top achievements
Rank 1
answered on 09 Jan 2013, 09:06 PM
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?

 

0
Vladimir Iliev
Telerik team
answered on 10 Jan 2013, 02:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aron
Top achievements
Rank 1
answered on 11 Jan 2013, 11:25 AM
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" }
              }
          }
      }
  });
0
Vladimir Iliev
Telerik team
answered on 15 Jan 2013, 10:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aron
Top achievements
Rank 1
answered on 16 Jan 2013, 09:07 PM
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
0
Vladimir Iliev
Telerik team
answered on 18 Jan 2013, 01:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aron
Top achievements
Rank 1
answered on 20 Jan 2013, 12:50 PM
Hi Vladimir:  I uploaded the pages to my test site:   http://life-renewal-test.org/
Login as menachem@renewal.org.  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.
0
Accepted
Vladimir Iliev
Telerik team
answered on 23 Jan 2013, 05:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aron
Top achievements
Rank 1
answered on 28 Jan 2013, 02:57 PM
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,

Tags
Grid
Asked by
Aron
Top achievements
Rank 1
Answers by
Aron
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or