Razor 剑道MVC-持久化和加载网格按钮

我正在尝试持久化我的网格数据，下面是一个示例

这对我来说非常有效，但问题是我的网格中有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”按钮在加载数据后消失

如何持久化网格的按钮

---

谢谢。

使工具栏持久化有一个限制。以下是关于它的说明：

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

下面是一个可能的解决方案：

我不是开发人员，但在使用javascript时遇到了同样的问题。我必须将整个模板代码放在网格选项中，而不是指向HTML模板。

---

我希望这能为你指明正确的方向。

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

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

---

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

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

剃刀：

JavaScript:

诀窍是什么

您需要在保存状态之前获得第一次生成的代码，您可以使用inspect元素获得该状态

并将其添加到工具栏模板中，之后工具栏也将被存储

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

我展示的代码经过了全面测试，在所有情况下都能正常工作

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

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

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