Grid Filters and Sort information Missing when hitting MVC Controller

[Beryl]

I'm having a problem getting the filters and sort information from Kendo Grid to my MVC controller. I am using a service to pass form data and DataSource data to the MVC Controller.
Here is my Kendo Grid DataSource:

dataSource: new kendo.data.DataSource({

transport: { read: function (e) { generalsearchService.submitSearch(e.data, form)

.then(function success(response) { e.success(response.data);});}},

schema: { data: "Data", total: "Total"},

pageSize: 25,

serverPaging: true,

serverFiltering: true,

serverSorting: true}),

Here is my Service code:

this.submitSearch = function (command, form) {return $http.post('/SSQV4/SSQV5/Search/SubmitCriteria', {'command': command, 'form': form});

Here is my MVC Controller Method definition:

public async Task<ActionResult> SubmitCriteria(DataSourceRequest command, ContractorSearchViewModel form)

The problem is when it hits the above method, "command" no longer contains filter and sort information.

attempting to add type: aspnetmvc-ajax throws an error in kendo.all.min.js -- Unable to get property 'slice' of undefined or null reference.

 

Any assistance is greatly appreciated.

[Alex Hajigeorgieva]

Hello Beryl,

I believe this is a duplicate of the thread below:

http://www.telerik.com/forums/model-null-when-set-using-ng-model

The error mentioned in this thread: "Unable to get property 'slice' of undefined or null reference." usually indicates that the Kendo UI DataSource was assigned an object and not an array. The -ajax type data source expects a response object with property Data. Something like the below:



Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Beryl]

Actually, the question I posed here http://www.telerik.com/forums/model-null-when-set-using-ng-model was about posting to a URL and the form data not making it to the MVC Controller.  I referenced this issue of using the service there.  I don't think I explained myself above.  I only added aspnetmmvc-ajax to try to get the filter and sort data to appear.  The error happens immediately as aspnetmvc-ajax does not work with the service, so I'm not sure how your response actually applies to my issue.  I have attached some files that might better explain what is happening when I try to pass both the DataSourceRequest object and the $scope.form data to the MVC Controller. 

 

[Boyan Dimitrov]

Hello Beryl,

In the other forum thread I suggest a way to serialize the filteirng, sorting and etc parameters in order to send them to the server successfully and populate your DataSourceRequest object properly. 

Regarding the problem here - it seems that you are passing to the DataSource the data directly from the response (not the entire response): 

transport: { read: function (e) { generalsearchService.submitSearch(e.data, form)
.then(function success(response) { e.success(response.data);});}},

In the same time schema.data is set to "Data". With this setting the Kendo UI DataSource will look in the response passed to success callback to find a field Data, but there is no such field since the data is sent directly to the callback. Try to sent the entire response in order DataSource to find the data. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Beryl]

Hello Boyan,

I tried using the code below which you suggested on the other post.

transport: {
                 read: function (e)  {
                    //get the parameterMap function
                    var parameterMap = grid.dataSource.transport.parameterMap;
                    // use it to serialize the datasource options (e.data can be used in order to extract the filtering, sorting and etc
                   //information
                    var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
                     generalsearchService.submitSearch(data, form)
                         .then(function success(response) {
                             e.success(response.data);
                         });
                 }
             },

However, I receive an error on parameterMap.  Please see attached file which shows what happens as I step through the provided code. 

[Beryl]

Hello Boyan,

I tried to use the code you posted on my other post http://www.telerik.com/forums/model-null-when-set-using-ng-model#Plw4UuAZJECgz42WXvpFJw, but I receive an error when it hits "parameterMap".  I have attached a .png showing what happens as I step through the code you provided.  Thanks!

[Boyan Dimitrov]

Hello,

In other thread I attached a sample project to illustrate the approach. I would suggest to continue the communication there in order to avoid any confusions. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Abhijit]

Hi,

I am trying to pass DataSource request of kendo grid from js to controller through ajax call, but it is not working.

Here below code, that I tried.

Js :-

function abc(){

 var grid = $("#Pendinggrid").data("kendoGrid");
            var parameterMap = grid.dataSource.transport.parameterMap;
       
var requestObject = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });

 $.ajax({
            url: '/Home/ExportToExcel',
            type: 'post',
            datatype: 'json',
            async: false,
            data: ({
                request: requestObject,
                filterexp: requestObject.filter
            }),
            success: function (result, success) {
                alert(result + " records are are coming out of my export function. No filter was applied.");
            },
            error: function (result, success) {
                alert("There was a problem.\n\n" + result + "\n\n" + success);
            },
        });

}

 

Controller :-

public void ExportToExcel([DataSourceRequest] DataSourceRequest request,string filterexp)
{

// Export to excel code here

}

 

Can you please help, How to pass datasource request to controller through ajax js.For filtering record in controller.

 

Thanks

[Alex Hajigeorgieva]

Hi, Abhijit,

It is hard to say without seeing the full picture but most likely it is the way the parameters are sent.

I tested the following function and it works without issues. Here is what the parameters look like for an ajax transport:

<script>
 function sendRequest () {
        var dataSource = $("#grid").data("kendoGrid").dataSource;
         var options = {
            sort: dataSource.sort(),
            filter: dataSource.filter(),
            group: dataSource.group(),
            page: dataSource.page(),
            pageSize: dataSource.pageSize(),
            aggregate : dataSource.aggregate()
     }

    var ajax =  dataSource.transport;
    var params = ajax.parameterMap(options);

    $.ajax({
       type: "POST",
       url: "@Url.Action("Read", "Home")",
       data: params,
       success: function (data) {
         console.log(data);
       }
    });
  }
</script>
<button onclick="sendRequest()">sendRequest</button>

Here is the filters and sorts correctly intercepted on the server:

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Abhijit]

Thank You Alex :).

But I have one more doubt .

How to send two datasource filter from two different grid to one action method in controller through ajax.

Like below :-

function abc(){

var grid = $("#grid_Transaction").data("kendoGrid");
var parameterMap = grid.dataSource.transport.parameterMap;
var requestResult = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });

var grid1 = $("#grid_Transaction1").data("kendoGrid");
var parameterMap1 = grid1.dataSource.transport.parameterMap;
var requestResult1 = parameterMap({ sort: grid1.dataSource.sort(), filter: grid1.dataSource.filter(), group: grid1.dataSource.group() });

post('/Home/ExportToExcel', {
filter: requestResult.filter,
sort: requestResult.sort,
group: requestResult.group,
filter1: requestResult1.filter,
sort1: requestResult1.sort,
group1: requestResult1.group,
                       
            });

}

 

in controller :-

public ActionResult ExportToExcel([DataSourceRequest] DataSourceRequest requestTopGrid, [DataSourceRequestModel] DataSourceRequestModel requestBottomGrid)
{

}

[Alex Hajigeorgieva]

Hi, Abhijit,

If both requests are going to the same controller, I would suggest merging the two on the client and sending them that way.

If you must keep them separate, then you can use the HttpContext.Request.Query itself to rebuild the filters, sorts on the server as shown in this forum thread:

https://www.telerik.com/forums/connecting-asp-net-mvc-application-to-asp-net-webapi#f_CGsEPUa0KwgTJ8SEXPIg

Kind Regards,
Alex Hajigeorgieva
Progress Telerik