Control when buttons is enabled/disabled

[Jacob]

Hi,

In a Kendo.Grid... there are a lot of buttons, edit, refresh, add etc...
How do i control the buttons so e.g. the refresh button is disabled as long as a row is in edit mode and other similar situations ??

Thank you in advance.

[Dimo]

Hello Jacob,

You can use the Grid events to make the desired customizations to existing Grid elements:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

E.g. in the case of the Refresh button - use the edit, save and cancel events. Obtain the Refresh button by its CSS class - k-pager-refresh. The button is a hyperlink, so you cannot disable it just like a regular button, but you can easily hide it with a visibility:hidden style.

Regards,
Dimo
Telerik

[Jacob]

Hi Dimo,

I get the idea about searching for the class, but I have problems determine the state of the grid/row.
I have tried to hook up the grid like the below sample (where is the ADD event ??) !!
It is going to be too complicated with templates and so to keep track on all the changes.

.Events(e => e.Cancel("function (){alert('onCancel');}"))
.Events(e => e.Edit("function (){alert('onEdit');}"))
.Events(e => e.Save("function (){alert('onSave');}"))
.Events(e => e.Change("function (){alert('onChange');}"))

Is it possible to get or search for the state (the CRUD states) of the grid ??
Something like:

if ( $("#" + gridname).find('.k-grid-edit-row').length ) {
} else {
}

[Dimo]

Hi Jacob,

The Grid uses a tr.k-grid-edit-row for inline editing and td.k-edit-cell with in-cell editing. You can check for the existence of these elements in the Grid event handlers or at any other time, however, I don't think this is necessary, since the Grid edit state is pretty obvious in each event handler - in edit the Grid enters edit mode, while in the other events it exits it.

On a side note, the change event is related to selection, not editing.

Regards,
Dimo
Telerik

[Jacob]

Thanks Dimo,

Good to know about the change event.
Below is what I have end up with.

function SetPageFuntionality() {
    var grid = $("#" + gridname).data("kendoGrid");
    var data = grid.dataSource.data();
    var gridState = 'IDLE';

    for (var i = 0; i < data.length; i++) {
        var item = data[i];

        if (grid.editable != null) {
            var editableModel = grid.editable.options.model;
            if (editableModel.Id == 0) {
                //new
                gridState = 'NEW';
                itemStateIsNew(item.uid);
            }
            else {
                //edit
                gridState = 'EDIT';
                itemStateIsEdit(item.uid);
            }
        }
        else {
            //idle
            itemStateIsIdle(item.uid);
        }
    } //loop items

    if (gridState == 'NEW')
        gridStateIsNew();
    else if (gridState == 'EDIT')
        gridStateIsEdit();
    else gridStateIsIdle();
}

I apologize for saying this, but the kendo framework seems unnecessary complicated to use.
I now have more than 300 lines of javascript/jquery just to keep the kendo components up and running and there are still long way to go. And I could go on. There are soooo many things not handled out of the box. It is a shame because the idea seems so obvious and right. (Sorry).

[Jacob]

Thanks Dimo,

Good to know about the change event.
I still can't figure out how to get the CANCEL event though.

Below is what I have end up with. On every important event, I simply call this shared method.

function SetPageFuntionality() {
    var grid = $("#" + gridname).data("kendoGrid");
    var data = grid.dataSource.data();
    var gridState = 'IDLE';

    for (var i = 0; i < data.length; i++) {
        var item = data[i];

        if (grid.editable != null) {
            var editableModel = grid.editable.options.model;
            if (editableModel.Id == 0) {
                //new
                gridState = 'NEW';
                itemStateIsNew(item.uid);
            }
            else {
                //edit
                gridState = 'EDIT';
                itemStateIsEdit(item.uid);
            }
        }
        else {
            //idle
            itemStateIsIdle(item.uid);
        }
    } //loop items

    if (gridState == 'NEW')
        gridStateIsNew();
    else if (gridState == 'EDIT')
        gridStateIsEdit();
    else gridStateIsIdle();
}

I apologize for saying this, but the kendo framework seems unnecessary complicated to use. I now have more than 300 lines of javascript/jquery code and still more to come. There are soooo many things not handled by the kendo objects. And it is a shame since the kendo idea seems so obvious and right (sorry).

[Jacob]

Sorry about the duplicated post - I believed I did an edit, but it turned out to be an add....

[Jacob]

    "On a side note, the change event is related to selection, not editing."

How do I get the cancel event then ??

[Dimo]

Hi Jacob,

The cancel event is not used with in-cell editing. You can find out when the edited cell exits edit mode by using the edit event handler to locate the textbox inside the edited cell (which is e.container) and subscribing to its blur event.

Regards,
Dimo
Telerik

[Jacob]

Does this tell me when the user hit the cancel button ??

[Dimo]

Hi Jacob,

No, it doesn't. If you want to know when this happens, attach a click handler to the ".k-grid-cancel-changes" element manually.

Regards,
Dimo
Telerik