Grid Update - How To Parse At The Server

11 posts, 1 answers
  1. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 08 Jan 2013 Link to this post

    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>
  2. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 09 Jan 2013 Link to this post

  3. Kendo UI is VS 2017 Ready
  4. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 09 Jan 2013 Link to this post

    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?

     

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Jan 2013 Link to this post

    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!
  6. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 11 Jan 2013 Link to this post

    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" }
                  }
              }
          }
      });
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 15 Jan 2013 Link to this post

    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!
  8. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 16 Jan 2013 Link to this post

    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
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 18 Jan 2013 Link to this post

    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!
  10. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 20 Jan 2013 Link to this post

    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.
  11. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 Jan 2013 Link to this post

    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!
  12. Aron
    Aron avatar
    24 posts
    Member since:
    Sep 2011

    Posted 28 Jan 2013 Link to this post

    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,

Back to Top
Kendo UI is VS 2017 Ready