Control when buttons is enabled/disabled

12 posts, 0 answers
  1. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 17 Feb 2015 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 19 Feb 2015 Link to this post

    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.

  3. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 24 Feb 2015 in reply to Dimo Link to this post

    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 {
    }
  4. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 25 Feb 2015 Link to this post

    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.

  5. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 27 Feb 2015 in reply to Dimo Link to this post

    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).
  6. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 27 Feb 2015 in reply to Dimo Link to this post

    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).
  7. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 27 Feb 2015 in reply to Jacob Link to this post

    Sorry about the duplicated post - I believed I did an edit, but it turned out to be an add....
  8. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 27 Feb 2015 in reply to Jacob Link to this post

    I have changed the code sample found in my previous post AND found yet another things that seems strange:

    1:If you CANCEL an ADD handling, an event is called, but if you CANCEL an EDIT handling, an event is NOT called.
    2:It seems like there is a isNew() method on the row-item (model) but not an IsEdit() method.


    function SetPageFuntionality() {
        var grid = $("#" + gridname).data("kendoGrid");
        var data = grid.dataSource.data();
        var gridState = 'IDLE';
        var editableModel = null;
     
        if (grid.editable != null)
            editableModel = grid.editable.options.model;
     
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
     
            if (editableModel != null && editableModel.uid == item.uid) {
                if (item.isNew()) {
                    //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();
    }

    Thanks
  9. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Dimo Link to this post

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

    How do I get the cancel event then ??
  10. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 13 Mar 2015 Link to this post

    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.

  11. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Dimo Link to this post

    Does this tell me when the user hit the cancel button ??
  12. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 17 Mar 2015 Link to this post

    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.

     
Back to Top