2

I am using kendo ui grid with server side paging, filtering and sorting. With C# WebAPI where all the grid parameters such as filters, sorts and currentpage and page size are sent in the url by kendo grid API and I have DataSourceRequest in my WebAPI which can read all the query params and apply them while I return back the data from the API.

I have a specific situation where. I have an export link in which I will need to use $http service to invoke the same API which I have used with all the filters and sorts that are applied to the grid with all the records to be returned.

I have all the properties of grid such as filters, and sorts.

which I can access from kendogrid's datasource

 var query = {
       page: 1,
       pageSize: grid.dataSource.total(),
       sort: grid.dataSource.sort(),
       filter: grid.dataSource.filter()
     }

I need to invoke the same API which I use to render kendogrid by applying all the filters and sorts. can any one help me how does kendo grid generate the query string with all these params. so may be I can re-use the same function

http://localhost:3306/api/test/62ca5945e15b0cb85bec257eec8f0bf1/grid?filter=stepType~eq~%27Rejected%27&sort=&aggregate=&pageSize=10&page=2&isFirstLoad=false&showColumns=name%2CtotalScore%2Crank%2CexpirationDate%2CstepName%2C&_=1450310137369

Can anyone help me where can I find a function to generate all the query parameters with the filters, pagination and sorting values that I retrieved from grid.

JRulle
  • 7,448
  • 6
  • 39
  • 61
Shashi
  • 1,112
  • 2
  • 17
  • 32

1 Answers1

2

I have implemented this previously using parameterMap using angular, but I imagine it would be very similar when just using jQuery. See this url.

A snippet of my code using parameterMap

$scope.pageableData = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            pageSize: $scope.pageSize,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            transport: {
                read: {
                    url: $rootScope.projectURL + '/api/DocLibItems/PageableGridItems',
                    dataType: 'json',
                    type: 'post'

                },
                parameterMap: function (data, type) {
                    $scope.pageableGridCreateCache = false;
                    var filter = data.filter === undefined ? null : data.filter;
                    if (filter) {
                        angular.forEach(filter.filters, function (item) {
                            item._operator = item.operator;
                        });
                    }
                    return {
                        ProjectID: $scope.projectID,
                        PageNumber: data.page,
                        PageSize: data.pageSize,
                        Sorting: data.sort === undefined ? null : data.sort,
                        Filtering: filter
                    };
                }
            }
});

ParmeterMap is returning ProjectID, PageNumber, PageSize, Sorting, and Filtering. The api should expect to recieve that data and return data based on that.

The initial call will call the same api where the pageNumber would be 1, pageSize would be the default pageSize, sorting would be null, and there would be no filtering.

The call to the api is a post, so there will not be any parameters in the url.

mlhuff12
  • 60
  • 8