Kendo MVC - 持久化和加载网格按钮

Posted 2023-05-07

【中文标题】Kendo MVC - 持久化和加载网格按钮

【英文标题】：Kendo MVC - Persist and load grid buttons

【发布时间】：2015-02-27 08:00:40

【问题描述】：

我正在尝试保留我的网格数据并遵循this 示例。

这对我来说效果很好，但问题是我的网格中有 Excel 导入按钮，在加载网格的持久状态后，Excel 导出按钮消失了。

这是我的网格代码（这里没有数据持久化代码，和上面的例子一样）。

@(html.Kendo().Grid<DtoTaskExtended>()
          .Name("AdraKendoGrid")
          .TableHtmlAttributes(CodeTaskKendoGrid.GetTableHtmlAttributes())
          .RowAction(CodeTaskKendoGrid.GridPerRowAction)
          .CellAction(CodeTaskKendoGrid.GridCellsConfigurator)
          .Columns(CodeTaskKendoGrid.ColumnsConfigurator)
          .ToolBar(tools => tools.Excel())
          .Pageable(pager => pager.PageSizes(new int[]  15, 50, 100, 500 )
              .Info(true)
              .Messages(message => message.Display("0 - 1 " + Strings.of + "2 " + Strings.items))
              .Messages(message => message.ItemsPerPage(Strings.itemsPerPage))
              .Messages(message => message.Empty(Strings.noItemsToDisplay)))
          .Sortable()
          .Groupable(gr => gr.Messages(message => message.Empty(Strings.kendoGroupMsg)))
          .Excel(excel => excel
              .AllPages(true)
              .FileName("Task Grid Export.xlsx")
              .Filterable(true)
              .ProxyURL(Url.Action("Excel_Export_Save", "Task")) //.ForceProxy(true)
          )
          .Filterable()
          .Reorderable(reorder => reorder.Columns(true))
          .Resizable(r => r.Columns(true))
          .ColumnMenu()
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Read(read => read.Action("GetTaskResult", "Task")))
          .ClientDetailTemplateId("client-template")
          )

数据保存和加载正确，但是加载数据后网格按钮（导出到Excel）按钮消失了。

如何持久化网格的按钮？

谢谢。

【参考方案1】：

你好，我和你有同样的问题，我这样解决我的问题

function load() 
    var grid = $('#gr').data("kendoGrid");
    var toolBar = $("#grid .k-grid-toolbar").html();

    var options = localStorage["kendo-grid-options-log"];
    if (options) 
        grid.setOptions(JSON.parse(options));
        $("#grid .k-grid-toolbar").html(toolBar);
        $("#grid .k-grid-toolbar").addClass("k-grid-top");
    

【参考方案2】：

使工具栏持久存在是有限制的。来自kendo docs 的注释：

将 setOptions 方法与 MVC 包装器结合使用时的一个重要限制是，任何工具栏或标头服务器模板（剃刀语法 @）都将丢失，并且一旦调用该方法，布局将变得不正确。这些选项无法持久化，因为它们包含服务器端逻辑，因此没有 javascript 等效选项。考虑使用 JavaScript 初始化（而不是 MVC 包装器）。另一种方法是使用等效的 JavaScript 指定相同的选项。

这是一个可能的解决方案： Persist state issues

我不是开发人员，但在使用 javascript 时遇到了同样的问题。我不得不将整个模板代码放在网格选项中，而不是指向 HTML 模板。 我希望这能为您指明正确的方向。

【参考方案3】：

经过长时间的研究，我找到了一个真正可行的解决方案：

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml

您需要将以下代码添加到您的视图：

剃须刀：

@helper ToolbarTemplate() 
    <a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-update"></span>Save changes</a>
    <a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-cancel"></span>Cancel changes</a>


<script type="text/x-kendo-template" id="toolbarTemplate">    
   @Html.Raw(@ToolbarTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>

JavaScript：

<script>
    //Here you define the ID of your grid
    var grid = $("#grid").data("kendoGrid");
    //Here you get the local settings for your case
    var options = localStorage["settings"];
    //To verify if there is anything stored 
    if (options) 
        //To parse the result
        var parsedOptions = JSON.parse(options);
        //To display the toolbar
        parsedOptions.toolbar = [
             template: $("#toolbarTemplate").html() 
        ];
        //To set the stored changes
        grid.setOptions(parsedOptions);
    
</script>

有什么诀窍？

您需要在保存状态之前获取第一次生成的代码（您可以使用检查元素获取它）。

并将其添加到ToolbarTemplate()，之后工具栏也将被存储。

另外，在上面的链接中，如果你也想存储它们，你可以阅读更多关于标题的信息，这将是一个类似的代码。

我展示的代码已经过全面测试，并且在 100% 的情况下都能正常工作。

如果您怀疑为什么会发生这种情况，据我所知，这与工具栏是在服务器端创建而状态是在客户端完成的事实有关。