Question

我试图使用以下::

在一些函数之后附加我的Kendo Grid工具栏

1）我将工具栏改为::

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

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

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

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

如何让我的工具栏Dropdown工作？

提前致谢

Answer 1

获取html()方法仅提供HTML代码，而不提供附加到此HTML元素的JavaScript。因此，当您在工具栏中注入HTML代码时，需要再次调用附加到元素的JavaScript。如果要获取kendo小部件配置，例如dropdownList，则需要从小部件中调用options和dataSource。

E.g：

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（），也许它不会在第一时间消失：）

Kendo工具栏附加功能不起作用

1 个答案: