Question

我想根据用户权限有条件地将工具栏添加到我的Kendo UI Grid。以下是我的代码片段：

<div kendo-grid="ctrl.kendoGrid" id="myGrid" k-height="450" k-options="ctrl.genevaIndexSwapMappingGridOptions"></div>

网格工具栏模板：

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <a class="k-button k-button-icontext k-grid-add" href="\#">
            <span class="k-icon k-add"></span>
            Add Geneva Rate Schedule Ref Index
        </a>
    </div>
</script>

我还尝试在网格选项中指定工具栏，然后使用$(".k-grid-toolbar").hide();切换其可见性;但它使工具栏出现在UI上，然后消失，导致控件在UI上闪烁。

我甚至尝试了类似下面的内容，但无法使其正常工作：

dataBound: function () {
    //var template = kendo.template($("#template").html());
    //var toobar = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>").append(template);
    //this.options.toolbar = [{ template: kendo.template($("#template").html()) }];
    //ctrl.genevaIndexSwapMappingGridOptions.toolbar = template;
    },

有没有办法可以根据特定条件动态创建和渲染网格上的工具栏？

使用的参考文献：Create another toolbar in kendo grid

编辑： 我实现了@DontVoteMeDown的解决方案，但它打破了另一个功能。我在某些领域使用自定义编辑器。当＆＃39;创建＆＃39;弹出对话框打开，无法呈现自定义的kendo控件。在列配置中，我为我的字段指定了自定义编辑器模板，如下所示：

{
    field: "RS_RefIndex_GvId", title: "Rate Schedule – Reference Index",
    editor: function (container, options) {
                $('<input kendo-drop-down-list data-value-primitive="true" required k-on-change="dataItem.dirty=true" k-data-source="ctrl.rateScheduleRefIndexList" ng-model="dataItem.RS_RefIndex_GvId" k-option-label="\'Select...\'" />').appendTo(container);
            }
},

如果我删除了有条件地将工具栏添加到网格的dataBound事件，并将工具栏指定为网格选项上的属性，则控件似乎正确呈现。

dataBound: function () {
                if (!ctrl.isSetOptions) {
                    if (DataSvc.isUserAdmin) {
                        ctrl.isSetOptions = true;
                        ctrl.kendoGrid.setOptions({ toolbar: [{ name: 'create', text: 'Add Geneva Index Swap Mapping', }] });
                    }
                }
                if (DataSvc.isUserAdmin) {
                    ctrl.kendoGrid.showColumn("CommandColumn");
                }
                else {
                    ctrl.kendoGrid.hideColumn("CommandColumn");
                }
            },

对此有任何帮助吗？

Answer 1

使用Grid的setOptions()方法更改初始化选项：

grid.data("kendoGrid").setOptions({
    toolbar: [{ name: "Create" }]
});

Demo

Kendo UI Grid：如何有条件地添加＆＃39;创建＆＃39;按钮工具栏动态

1 个答案: