Kendo UI Grid：如何有條件地動態添加“創建”按鈕工具欄

Question

我想根據用戶權限向我的Kendo UI網格有條件地添加一個工具欄。 以下是我的代碼段：

<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();切換其可見性$(".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;
    },

有沒有一種方法可以根據特定條件在網格上動態創建和渲染工具欄？

使用的參考： 在Kendo網格中創建另一個工具欄

編輯：我實現了@DontVoteMeDown的解決方案，但它破壞了另一個功能。 我在某些字段中使用自定義編輯器。 當“創建”彈出對話框打開時，它將無法呈現自定義的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" }]
});

演示版