為什么在Kendo Grid中未在工具欄的自定義命令上傳遞DatasourceRequest

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參數。 我在這里為您整理了相關的內容...

1. 在Action的routevalue中包含四個DataSourceRequest參數，但是使用占位符波浪號，這些參數將在步驟2中替換：

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

2. 在DataBound事件中包含對javascript函數的調用：

    .Events(ev => ev.DataBound("onDataBound")) 

3. 然后將以下腳本添加到頁面：

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

   }

4. 現在，在您的控制器方法中，您將可以訪問帶有當前狀態填充的所有相關參數的DataSourceRequest。 還要注意，您在方法的request參數中缺少屬性[DataSourceRequest] ，因此它應如下所示：

    public ActionResult ExportAthletePageToExcel([DataSourceRequest]DataSourceRequest request, string selectedSportId, string yearId) 

Answer 2

我認為自定義工具欄不應該發送datasourcerequest，但是您可以嘗試使用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();
        }
   });
}