This is a migrated thread and some comments may be shown as answers.

Grid Filters and Sort information Missing when hitting MVC Controller

10 Answers 330 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Beryl
Top achievements
Rank 1
Beryl asked on 01 May 2017, 05:47 PM

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.

10 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 03 May 2017, 11:10 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Beryl
Top achievements
Rank 1
answered on 03 May 2017, 01:31 PM

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. 

 

0
Boyan Dimitrov
Telerik team
answered on 05 May 2017, 08:15 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Beryl
Top achievements
Rank 1
answered on 05 May 2017, 01:36 PM

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. 

0
Beryl
Top achievements
Rank 1
answered on 05 May 2017, 01:39 PM

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!

0
Boyan Dimitrov
Telerik team
answered on 09 May 2017, 01:41 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Abhijit
Top achievements
Rank 1
answered on 17 Jan 2020, 02:00 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 21 Jan 2020, 10:20 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Abhijit
Top achievements
Rank 1
answered on 22 Jan 2020, 09:15 AM

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)
{

}

0
Alex Hajigeorgieva
Telerik team
answered on 24 Jan 2020, 09:01 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Beryl
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Beryl
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Abhijit
Top achievements
Rank 1
Share this question
or