I want to conditionally add a toolbar to my Kendo UI Grid based on the user permissions. Below are my code snippets:

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

Grid toolbar template:

<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>

I also tried specifying the toolbar in the grid options and then toggling its visibility using $(".k-grid-toolbar").hide();; but it makes the toolbar appear on the UI and then disappear causing the control to flicker on the UI.

I even tried something like below, but couldn't get it working:

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;
    },

Is there a way I can create and render the toolbar on the grid dynamically based on a particular condition ?

References used: Create another toolbar in kendo grid

EDIT : I implemented @DontVoteMeDown's solution, but it broke another functionality. I am using custom editors for some fields. When the 'create' popup dialog opens up, it fails to render the custom kendo controls. In the column configuration I am specifying a custom editor template for my fields as below:

{
    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);
            }
},

If I remove my dataBound event which conditionally adds the toolbar to the grid, and specify the toolbar as a property on the grid options, then the controls appear to be rendering correctly.

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");
                }
            },

Any help on this please ?

I want to conditionally add a toolbar to my Kendo UI Grid based on the user permissions. Below are my code snippets:

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

Grid toolbar template:

<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>

I also tried specifying the toolbar in the grid options and then toggling its visibility using $(".k-grid-toolbar").hide();; but it makes the toolbar appear on the UI and then disappear causing the control to flicker on the UI.

I even tried something like below, but couldn't get it working:

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;
    },

Is there a way I can create and render the toolbar on the grid dynamically based on a particular condition ?

References used: Create another toolbar in kendo grid

EDIT : I implemented @DontVoteMeDown's solution, but it broke another functionality. I am using custom editors for some fields. When the 'create' popup dialog opens up, it fails to render the custom kendo controls. In the column configuration I am specifying a custom editor template for my fields as below:

{
    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);
            }
},

If I remove my dataBound event which conditionally adds the toolbar to the grid, and specify the toolbar as a property on the grid options, then the controls appear to be rendering correctly.

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");
                }
            },

Any help on this please ?

• javascript
• angularjs
• kendo-ui
• kendo-grid

• How are you creating the grid? with js? – raven Commented Apr 1, 2016 at 16:35
• No. the grid control is defined in the markup and the grid options are defined in the angular controller. – Lucifer Commented Apr 1, 2016 at 16:56
• I don't understand why do you want to add the "Create" button at that point, you can create it before when the grid is created (I'm not sure how you are doing that), then in the dataBound you can show/hide or even remove the button if the user is not Admin. – Gabriel Cerutti Commented May 16, 2017 at 7:33

1 Answer 1

Use Grid's setOptions() method to change the initialization options:

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

Demo