CODEWITHSUNDEEP
kendo-uikendo-grid
MRP
MRP

Reputation: 609

change kendo grid ui toolbar dynamically

I'm using kendo ui grid, and for initialization I pass create and edit button to grid toolbar like this : 

var grid = elem.kendoGrid({
                        ...
                        toolbar: getToolBar(),
});

getToolbar function return an array list of buttons. now for example after user click on edit button I wanna add two new button with the name of Cancel and Save . I have used this code but I was useless :

var grid = elem.kendoGrid({
                        ...
                        edit: function (e) {
                            e.sender.options.toolbar = getCancelToolBar();
}
});

I wander how can I change this buttons on toolbar after user click on edit button . any idea is welcome and thanks in forward.

Upvotes: 0

Views: 2015

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

You have to specify all button you need in getToolBar() function and then use CSS & JS to toggle them.

CSS:

.k-grid .k-grid-save-changes,
.k-grid .k-grid-cancel-changes {
    display: none;
}

JS:

var grid = elem.kendoGrid({
    ...
    edit: function (e) {
        e.sender.element.find('.k-grid-save-changes').show();
        e.sender.element.find('.k-grid-cancel-changes').show();
    }
});

Upvotes: 3

Related Questions