Question

我正在尝试保留我的网格数据并跟随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）按钮消失。

如何坚持网格按钮？

谢谢。

Answer 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");
    }
}

Answer 2

使工具栏持久存在限制。关于它的说明来自kendo docs：

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

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

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

Answer 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>

有什么诀窍？

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

然后将其添加到 ToolbarTemplate（），之后也会存储工具栏。

此外，在上面的链接中，如果您想要存储它们，可以阅读更多关于标题的信息，它将是类似的代码。

我展示的代码已经过全面测试，并且100％正在使用。

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

剑道MVC - 坚持和加载网格按钮

3 个答案: