Question

我尝试在Kendo Grid的工具栏上创建自定义命令按钮。代码就像

Html.Kendo().Grid...
.ToolBar(commands => commands.Custom().Text("Export").Action("ExportAthletePageToExcel", "ExportExcelButton", new { selectedSportId = Model.CurrentSport, yearId = Model.CurrentYear }))
...
Controller is like,
public ActionResult ExportAthletePageToExcel(DataSourceRequest request, string selectedSportId, string yearId)
...

它适用于selectedSportId和yearId等参数，但请求没有网格的正确信息（过滤器，排序，页面等）。我想知道问题是什么。

感谢。

Answer 1

我间接地偶然发现了我喜欢的解决方案。 Telerik发布了一个演示，用于将网格内容导出到Excel。它们使用自定义命令，并使用网格的OnDataBound事件在客户端的javascript中设置DataSourceRequest参数。我已经为你准备好了相关内容......

在Action的路由值中包含四个DataSourceRequest参数，但是在步骤2中将替换占位符代码：

.ToolBar(commands => commands.Custom().Text("Export").Action("ExportAthletePageToExcel", "ExportExcelButton", new { page = "~", pageSize = "~", filter = "~", sort = "~", selectedSportId = Model.CurrentSport, yearId = Model.CurrentYear }))

在DataBound事件中包含对javascript函数的调用：
```
.Events(ev => ev.DataBound("onDataBound"))
```

然后将以下脚本添加到页面中：

function onDataBound(e) {
var grid = this;

// ask the parameterMap to create the request object for you
var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
.options.parameterMap({
    page: grid.dataSource.page(),
    sort: grid.dataSource.sort(),
    filter: grid.dataSource.filter()
});

// Get the export link as jQuery object
var $exportLink = grid.element.find('.export');
// Get its 'href' attribute - the URL where it would navigate to
var href = $exportLink.attr('href');
// Update the 'page' parameter with the grid's current page
href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
// Update the 'sort' parameter with the grid's current sort descriptor
href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
// Update the 'pageSize' parameter with the grid's current pageSize
href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize);
//update filter descriptor with the filters applied
href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
// Update the 'href' attribute
$exportLink.attr('href', href);

}

现在，在您的控制器方法中，您可以访问DataSourceRequest，其中所有相关参数都填充了当前状态。另请注意，您在方法的请求参数中缺少属性[DataSourceRequest]，因此它应如下所示：
```
public ActionResult ExportAthletePageToExcel([DataSourceRequest]DataSourceRequest request, string selectedSportId, string yearId)
```

Answer 2

我不认为自定义工具栏应该发送数据源请求，您可以尝试使用javascript。

例如：

function exportAthletePageToExcel(){
   var dataSource = $('#YourGrid').data('kendoGrid').dataSource;
   var dataSourceRequest = dataSource.transport.parameterMap({
        filter: dataSource.filter(),
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        sort: dataSource.sort()
   });

   var data = "";
   for (var key in dataSourceRequest) {
       if (dataSourceRequest[key] !== undefined) {
           data += key + "=" + dataSourceRequest[key] + "&";
       }
   }

   $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF",
        url: '@Html.Action("ExportAthletePageToExcel", "ExportExcelButton", new { selectedSportId = Model.CurrentSport, yearId = Model.CurrentYear })',
        data: data,
        success: function(){
            dataSource.read();
        }
   });
}

为什么在Kendo Grid中工具栏的自定义命令上没有传递DatasourceRequest

2 个答案: