Question

使用Kendo UI和行模板，我的网格启动如下：

我想改变Actions列以包含由actions对象填充的下拉列表。 actions对象包含显示文本和相对url路径，如下例所示：

var actions = [
    { name: "edit", url: "reports/report/1" },
    { name: "delete", url: "reports/delete/1" }
];

此操作对象位于网格的每一行上，并且可能因行/用户/等而异。预期用途是用户选择下拉列表，然后选择其中一个选项。在选择选项时，会发布网址值。

我不知道从哪里开始，或者在行模板中是否可行。非常感谢任何帮助。

Answer 1

我能够理解它。在行模板中，我调用js函数并返回列表的html标记。然后根据类属性在所有项目上设置.kendoDropDownList。我已经更新了jsfiddle here，但它似乎不适用于jsfiddle。当我在我的开发机器上测试IE10和Chrome时，它正在工作。

以下是相关的代码更改：

在rowTemplate中，更改了

#: actions #

到

#= renderDropDown(actions) #

这个“=”显示将html呈现为html的文字文本，而“：”则显示html。

renderDropDown函数：

function renderDropDown(actions) {
    var dropDownList = "<select class=\"insight-dropdown\">";

    dropDownList = dropDownList + "<option value=\"default\" disable=\"disabled\">...</option>";

    for (var i = 0; i < actions.length; i++) {
        dropDownList = dropDownList + "<option value=\"" + actions[i].url + "\">" + actions[i].name + "</option>";
    }

    dropDownList = dropDownList + "</select>";
    return dropDownList;
}

对于网格的dataBound事件，我添加了这个函数来将html变成一个下拉列表：

// Set the drop down lists
$(".insight-dropdown").kendoDropDownList({
    select: onDDLSelect
});

处理行动的选择：

function onDDLSelect(e) {
    var dataItem = this.dataItem(e.item.index());
    alert(dataItem.value);
}

如何在Kendo UI网格中添加下拉列表

1 个答案: