剑道工具栏附加不起作用答案

【问题标题】：Kendo toolbar append is not working剑道工具栏附加不起作用
【发布时间】：2014-12-03 07:33:04
【问题描述】：

我正在尝试使用以下功能在某些功能之后附加我的 Kendo Grid 工具栏::

1) 我得到的工具栏是::

    var toolbar = $("#Grid").find(".k-grid-toolbar").html();

2) 然后在使用grid.setOptions(JSON.parse(options)) 对网格进行一些更改后，导致工具栏消失，我再次将工具栏附加到网格：：

    $("#Grid").find(".k-grid-toolbar").html(toolbar);

此处工具栏已正确附加，但我无法使用这些功能（即工具栏内的下拉菜单）。

如何让我的工具栏下拉菜单工作？

提前致谢

【问题讨论】：

你能展示一个重现原始问题的 JSFiddle/JSBin/SO sn-p 吗？ IE。 setOptions 哪里让你的工具栏消失了？
@OnaBai dojo.telerik.com/@rjha999/IlOHO 这里是 sn-p。每当我们添加它时，哪个工具栏会停止其功能
有两个问题：第一个没有保存和恢复工具栏，JSON.stringify 不执行深层复制所以你实际上没有保存DropDownList 定义，这就是为什么当你做一个@987654329 @您将DropDownList 视为input；第二次使用html() 保存 HTML，您只复制 DOM 代码而不是与其关联的数据和事件，当您重新应用它时，您只有视觉效果。您需要保存所有选项，还是只保存排序、列定义等就足够了？
@OnaBai 我还需要使用下拉列表的选定值保存所有选项。但是我该怎么做呢？
重新初始化 DropDownList dojo.telerik.com/@OnaBai/opilo 但您还需要保存 DropDownList 值，否则重新初始化后，您有过滤器，但 DropDownList 中的值不正确

标签： javascript kendo-ui grid telerik

【解决方案1】：

获取html() 方法仅提供HTML 代码，而不提供附加到此HTML 元素的JavaScript。因此，当您在工具栏中注入 HTML 代码时，您需要再次调用附加到元素的 JavaScript。如果你想获得一个剑道小部件配置，例如一个下拉列表，你需要从你的小部件中调用options 和dataSource。

例如：

var $toolbar = $("#Grid").find(".k-grid-toolbar"),
    toolbar = $toolbar.html(),
    // Dropdown list Element
    $ele = $("input[name=myInput]", $toolbar.get(0)),
    // Dropdown list Widget object
    ddl = $ele.data("kendoDropDownList"),
    cfg = ddl.options;
// toJSON returns objects without the observer properties
cfg.dataSource = ddl.dataSource.data().toJSON();

// HERE YOU REBUILD YOUR TABLE

$toolbar.html(toolbar);
$("input[name=myInput]", $toolbar.get(0)).kendoDropDownList(cfg);

如果您添加到工具栏的元素始终相同，我建议您创建一个以网格作为参数的函数（以及数据，如果数据发生变化）：

function setToolbarContent(grid){
  var $toolbar = grid.find(".k-grid-toolbar");
  $toolbar.html('My HTML String');
  $toolbar.find("input[name=myInput]").kendoDropDownList({my: 'cfg'});
}

顺便说一句，如果您将工具栏配置和模板添加到 grid.setOptions()，也许它一开始就不会消失 :)

【讨论】：