This is a migrated thread and some comments may be shown as answers.

Control when buttons is enabled/disabled

10 Answers 825 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 17 Feb 2015, 03:41 PM
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.

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Feb 2015, 12:26 PM
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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

0
Jacob
Top achievements
Rank 1
answered on 24 Feb 2015, 09:59 AM
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 {
}
0
Dimo
Telerik team
answered on 25 Feb 2015, 03:38 PM
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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

0
Jacob
Top achievements
Rank 1
answered on 27 Feb 2015, 07:41 AM
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).
0
Jacob
Top achievements
Rank 1
answered on 27 Feb 2015, 07:49 AM
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).
0
Jacob
Top achievements
Rank 1
answered on 27 Feb 2015, 07:52 AM
Sorry about the duplicated post - I believed I did an edit, but it turned out to be an add....
0
Jacob
Top achievements
Rank 1
answered on 13 Mar 2015, 11:50 AM
    "On a side note, the change event is related to selection, not editing."

How do I get the cancel event then ??
0
Dimo
Telerik team
answered on 13 Mar 2015, 12:15 PM
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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

0
Jacob
Top achievements
Rank 1
answered on 13 Mar 2015, 01:29 PM
Does this tell me when the user hit the cancel button ??
0
Dimo
Telerik team
answered on 17 Mar 2015, 08:57 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Jacob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jacob
Top achievements
Rank 1
Share this question
or