Grid with Datasource CRUD methods with Web Api

9 posts, 0 answers
  1. sai
    sai avatar
    11 posts
    Member since:
    Jul 2013

    Posted 22 Aug 2013 Link to this post

    Hi,

    Am using Kendo mvvm framework to bind my datasource defined in the viewmodel to grid.

    Datasource internally calls web api for performing CRUD functions. Am able to get data using datasource  transport "read" method. Am having trouble with other methods - update , create and destroy. Below is my datasource from viewModel -

    var salesDataSource = new kendo.data.DataSource({
                schema: {
                    data: function(data) { //specify the array that contains the data
                        return data || [];
                    },
                    errors: function (response) {
                        return response.error;
                    },
                    model: {
                        id: "ID"
                        fields: {
                            ID: { editable: false, nullable: true },
                            CompanyName: { validation: { required: true } },
                            LengthOfContract: { editable: false },
                            Status: { editable: false }
                        }
                    }
                },
                batch: true
                transport: {
                    read: {
                        url: "/api/SalesApi"
                        dataType: "json" // 
                    },
                    update: {
                        url: function (data) {
                            return "/api/SalesApi/" + data.models[0].ID;
                        },
                        dataType: "json",
                        type:"PUT"
                    },
                    parameterMap: function(data, operation) {
                        if (operation != "read") {
                            console.log("here");
                            console.log(data);                        
                            return JSON.stringify({ value: data.models });
                        } else {
                            return JSON.stringify(data); 
                        }
                    }
                },
                error: function (e) {
                    console.log("error");
                    console.log(e);
    /*
                    var message = e.xhr.responseJSON["error"].message.value;
                    var innerMessage = e.xhr.responseJSON["error"].innererror.message;
                    alert(message + "\n\n" + innerMessage);
    */
                },
                serverPaging: true,
                pageSize: 15
            });
    My webapi method for Put -

    // PUT api/sales/5
            public void Put(int id, IEnumerable<SalesModel> value)
            {
              //do somethig with data
            }

    So when user clicks Save Changes on grid, my webApi PUT method is getting called but the second parameter "value" is not having any records.

    Could you please advise on what am missing or point me to an example similar to am doing? Most of the examples I found on internet are using OData. I dont use
    Odata. 

    Thanks
    Sai
  2. Andrew
    Andrew avatar
    19 posts
    Member since:
    Jan 2013

    Posted 23 Aug 2013 Link to this post

    I posted the DataSource transport configuration we use to do CRUD on another thread. The key is to set the "contentType" and "processData" options for create and update, because you have to tell jQuery.ajax() that the data is being sent up in JSON. Otherwise, jQuery will try to put the data into the query string.

    I'm not sure if your parameterMap implementation is right either. In our code, when the operation is an "update", the data is the object being updated. There's no "models" property on it.

    Hope this helps,
  3. Kendo UI is VS 2017 Ready
  4. sai
    sai avatar
    11 posts
    Member since:
    Jul 2013

    Posted 23 Aug 2013 Link to this post

    Hi Andrew,

    Thanks for replying to my query.

    It still doesnt work. When I set the contentType to "application/json" and processData as false. My second parameter on the "Put" method is coming out as null.
    Earlier it was atleast showing as with items count as zero. Not sure am missing something here.

    And regarding the data in my parameterMap, its an enumerable collection of models so the reason I had to use data.Models. I checked the data on the console and its showing data.models (which is an array 1 item,  selected row on grid).
  5. Sean
    Sean avatar
    10 posts
    Member since:
    Jan 2009

    Posted 27 Aug 2013 Link to this post

    Also from my playing with Web API, you can't have more than 1 complex parameter in your Web API method declaration. 

    Check out this article on Asp.Net:
    http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api
  6. sai
    sai avatar
    11 posts
    Member since:
    Jul 2013

    Posted 28 Aug 2013 Link to this post

    @Andrew, thanks for replying.

    In my my WebApi I have only one complex parameter not two. Not sure why you are saying that I have more than one complex type.
  7. Andrew
    Andrew avatar
    19 posts
    Member since:
    Jan 2013

    Posted 28 Aug 2013 Link to this post

    I'm not familiar with ASP.NET so I don't have any more advice for you. Can you verify that the PUT request has the correct JSON payload?

  8. Marcel
    Marcel avatar
    36 posts
    Member since:
    Apr 2011

    Posted 29 Aug 2013 Link to this post

    Change your webApi PUT to accept a single SalesModel.
    If you batch multiple SalesModels, MVC will call the PUT method on your Controller for each SalesModel,
    since MVC will also take care of serializing the JSON data to SalesModel instances.

    // PUT api/sales/5 
            public void Put(int id, SalesModel value) 
            { 
              //do somethig with data 
            }
  9. sai
    sai avatar
    11 posts
    Member since:
    Jul 2013

    Posted 29 Aug 2013 Link to this post

    @Marcel, I tried changing the IEnumerable SalesModel to just SalesModel. I get an object but all values are null.

    When I checked in the fiddler, I see that all values are being passed to the server but on the server values are coming out as null. I have attached the screenshot of fiddler.

  10. Michael
    Michael avatar
    5 posts
    Member since:
    Aug 2014

    Posted 07 Jul 2015 Link to this post

    this is outdated but it may help someone else...

     Make sure that the model class in web api that you're using has a (public) default constructor declared, even if it's empty.

Back to Top
Kendo UI is VS 2017 Ready