Send DataSourceRequest object from a JavaScript function to a MVC Controller end-point

Question

I want to Send DataSourceRequest object from a JavaScript function to a MVC Controller end-point, that filters an IQueryable taking into account the filter applied to the grid dataSource and then exports the result data into excel.

this is what I'm doing on my javascript:

exportData = function () {

        var grid = $("#QuoteGrid").data("kendoGrid");
        var parameterMap = grid.dataSource.transport.parameterMap;
        var sortData = grid.dataSource.sort();
        var filterData = grid.dataSource.filter();
        var groupData = grid.dataSource.group();        
        var data = parameterMap({ sort: sortData, filter: filterData, group: groupData });
        var request = $.toJSON(data);
        location.href = CUSTOMER_QUOTES_EXPORT_URL + "?request=" + request;                
        return false;
    }

This is my mvc controller end-point

public FileResult ExportQuotes([DataSourceRequest]DataSourceRequest request)
{
...
}

But the request parameter never gets populated with the data passed by the JavaScript call, as you can see from the pictures I've attached:

What I'm doing wrong ?

Thanks in advance for your help

Answer 1

Try to change, You are using 'GET' request, so parameter will go in querystrings.

var request = $.toJSON(data);

location.href = CUSTOMER_QUOTES_EXPORT_URL + "?request=" + request;

to this:

var request = decodeURIComponent($.param(data));

location.href = CUSTOMER_QUOTES_EXPORT_URL + "?"+request;