Wie aktiviere ich den aktivierten Zustand einer Schaltfläche in einem Kendo UI Grid?

Question

Ich habe Pfeile in meinem Kendo UI Grid. Für den ersten Gegenstand im Raster möchte ich nicht, dass der Gegenstand nach unten fährt (es ist unmöglich) und für den letzten Gegenstand möchte ich nicht, dass der Gegenstand nach oben geht (auch unmöglich).

Wie kann ich das tun?

$(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

Das funktionierte für mich, als ich den Knopf deaktivieren musste. Verwenden Sie das Ereignis databound, um den Status grundlegend zu ändern, verwenden Sie off, um den Ereignishandler zu entfernen, und überschreiben Sie dann das Klickereignis. Etwas wie folgt aus:

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

Wenn Sie mehrere Schaltflächen in der Symbolleiste, die so etwas wie dieses:

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

Answer 2

können Sie das dataBound Ereignis des Grid verwenden, um eine k-state-disabled CSS-Klasse auf die gewünschten Tasten in der ersten und letzten Zeile des Grid anzuwenden.

Denken Sie daran, dass k-state-disabled nur ein "deaktiviert" -Look anwendet, aber das click-Ereignis wird weiterhin ausgelöst und die Befehlsfunktion wird ausgeführt. Sie können die Zeilenverschiebelogik für deaktivierte Schaltflächen überspringen.

Als Randnotiz können Sie command name verwenden, um Schaltflächen im DOM leichter zu finden. Beispiel: Eine Befehlsschaltfläche mit dem Namen foo verfügt über eine CSS-Klasse von k-grid-foo.