剣道UIグリッドのボタンの有効状態を制御する方法

Question

剣道のUIグリッドに上下の矢印があります。グリッド上の最初のアイテムについては、アイテムを下に移動させることはできません（不可能です）。最後のアイテムではアイテムを上に移動したくない（不可能です）。

どうすればいいですか？

$(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" 
      }, 
     ]  

    });  
}); 

Answer 1

これは私がボタンを無効にする必要があるとき私のために働いた。基本的に状態を変更するにはdataboundイベントを使用し、offを使用してイベントハンドラを削除し、clickイベントをオーバーライドします。このような何か：

$('.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 
}); 

ツールバーに複数のボタンを持っている場合は、このような何か：

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

Answer 2

あなたはグリッドの最初と最後の行に必要なボタンにk-state-disabled CSSクラスを適用するには、グリッドのdataBoundイベントを使用することができます。

k-state-disabledは、「無効」の外観のみ適用されますが、clickイベントはまだ発生し、コマンド機能が実行されます。無効化されたボタンの行移動ロジックをスキップできます。

command nameを使用すると、DOMのボタンをより簡単に見つけることができます。たとえば、名前がfooのコマンドボタンのCSSクラスはk-grid-fooになります。