CODEWITHSUNDEEP
kendo-uikendo-grid
Bryan Schmiedeler
Bryan Schmiedeler

Reputation: 3127

How to control enabled state of a button in a Kendo UI Grid

I have up and down arrows in my Kendo UI grid. For the first item on the grid I do not want do allow the item to move down (it is impossible) and for the last item I do not want the item to move up (also impossible).

How can I do this?

enter image description here

    $(document).ready(function() {

    //Set URL of Rest Service
    var loc = (location.href);
    var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";

    var dataSource = new kendo.data.DataSource({
        transport: {
        read: {
        url: url,
        type: 'GET'
    },batch: false
    }});

    dataSource.read();

    $("#gridIDNoScroll").kendoGrid({
        dataSource: dataSource,
        pageSize: 15,
        noRecords: true,
        selectable : false,
        columns : [{
            field : "name"
        },{
            field : "strDate",
            width : 150
        },{
            field : "$10",
            width : 150
        },{
            command: [
                    {
                    text: "&nbsp",
                    //click: moveDown,
                    imageClass: "k-icon k-i-arrow-s",
                    icon: "k-icon k-i-arrow-s",
                    title: "Up",
                    enable: false
                    },  
                    {
                    text: "&nbsp",
                    //click: moveUp,
                    imageClass: "k-icon k-i-arrow-n",
                    icon: "k-icon k-i-arrow-n"
                    }
              ],
              width:"90px"  
            },
        ]       

    });       
});

Upvotes: 0

Views: 2836

Answers (2)

IKnewThat
IKnewThat

Reputation: 636

This worked for me when I needed to disable the button. Use the databound event to basically change the state, use off to remove the event handler, and then override the click event. Something like this:

$('.k-grid-add').addClass('k-state-disabled');
$('.k-header').off('click').on('click', '.k-grid-add', function (e) { 
  // add new logic here or ignore it 
});

If you have multiple buttons in the toolbar, the something like this:

$('.k-grid-add').addClass('k-state-disabled');
$('a.k-grid-add').on("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
});

Upvotes: 1

dimodi
dimodi

Reputation: 4139

You can use the dataBound event of the Grid to apply a k-state-disabled CSS class to the desired buttons in the first and last row of the Grid.

Keep in mind that k-state-disabled only applies a "disabled" look, but the click event will still fire and the command function will execute. You can skip the row move logic for disabled buttons.

On a side note, you can use a command name to find buttons in the DOM more easily. For example, a command button with a name foo will have a CSS class of k-grid-foo.

Upvotes: 0

Related Questions