kendo grid sort datasource querystring in angular

Question

Using the Kendo-Angular directives

<div kendo-grid k-data-source="MySource" 
   k-filterable="true" k-pageable="true"></div>

Have a kendo data source as part of my scope

$scope.MySource = new kendo.data.DataSource({
   transport:{
      read : {
         url:"/MyUrl"
      }
   },
   schema:{
      data: "data"
      total:function(response){return response.total},
      model:{
         fields:{
            LastName:{type:"string"}
         }
      }
   },
   pageSize: 10,
   serverFiltering: true,
   serverPaging:true
})

The data loads fine (though I have a string issue where it does not paginate passed the 4th page that may be more related to the backend than this.

All that I'm doing is calling an asp.net controller route to return the data and as I mentioned the pagination seems to work fine but when I attempt to use the filterable the 'get' querystring looks somewhat like this...

/MyUrl?take=10&skip=0&page=1&pageSize=10&filter%5Bfilters%5D%5B0%5Bfield%5D=LastName&filter%5Bfilters%5D.........value%5D=Smith

My controller looks like this

public JsonResult MyUrl(int pageSize = 10, int skip = 10, string sort = "", string filter="")
{
    // return jsonresult
}

What is going on with that URL and is my controller set up correctly? Do I need to setup a parameter map for the default kendo grid?

Answer 1

This is what the default parameter map is doing - passes the current data source state to jQuery. You can pass the state as JSON:

transport:{
  read : {
     url:"/MyUrl",
     type: "POST",
     contentType: "application/json"
  },
  parameterMap: function(options) {
     return JSON.stringify(options);
  }
},

Answer 2

Create a class like this

public class PagingOption
{
    public PagingOption()
    {
        PageSizes = new List<int>();`enter code here`
    }

    /// <summary>
    /// Specifies the current page number.
    /// </summary>`enter code here`
    public int take { get; set; }

    /// <summary>
    /// Specifies the number of items to show in a page.
    /// </summary>
    public int skip { get; set; }
    public int page { get; set; }
    public int pagesize { get; set; }
    public List<SortDescription> sort  { get; set; }

    /// <summary>
    /// Specifies different page sizes.
    /// </summary>
    public IList<int> PageSizes { get; set; }
}

public class SortDescription
{
    public string field { get; set; }
    public string dir { get; set; }
}

and pass it as a parameter to your web call on server side

public JsonResult MyUrl(PagingOption pagingoption)
{
    // return jsonresult
}

it will convert the query paramters to paging option class