KendoUIGridのセル内の条件付きでボタンを非表示にする

私は剣道のUIグリッドを持っていますが、ボタンには1つの列がありますが、ボタンがある行（この場合は最初の行と最後の行）に応じてボタンを隠しています。KendoUIGridのセル内の条件付きでボタンを非表示にする

どうすればいいですか？

私のコードは以下の通りです。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 

</head> 
<body> 

<div id="grid"> 
</div> 

<script> 
$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" }, 
     { width: 150, 
      command:    
        [ 
       { 
        name:"Up", 
        imageClass: "k-icon k-i-arrow-s", 
        click: function(e) { 
         var tr = $(e.target).closest("tr"); 
         var item = this.dataItem(tr); 
         var dir = "U"; 
         var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
         moveItem.moveUp(dir,dataItem.order).addCallback(function(response){ 
         alert(response); 
         }) 
        } 
       }, 
      ] 
      } 
    ], 
    dataSource: [ 
     { name: "Jane Doe", age: 30 }, 
     { name: "John Doe", age: 33 } 
    ] 
}); 
var grid = $("#grid").data("kendoGrid"); 
grid.hideColumn(grid.columns[0].columns[0]); 
</script> 
</body> 
</html>

==================

私はmoveItem.moveItemUpメソッドを含むコードを追加しました。

このメソッドでは、リモートプロシージャコールを使用して、サーバーサイドのJavaScriptを実行します。本当に、ボタンを隠して、何もする必要はありません。

<xe:jsonRpcService 
     id="jsonRpcService1" 
     serviceName="moveItem"> 
     <xe:this.methods> 
      <xe:remoteMethod 
       name="moveUp" 
       script="return direction + order"> 
       <xe:this.arguments> 
        <xe:remoteMethodArg 
         name="direction" 
         type="string"> 
        </xe:remoteMethodArg> 
        <xe:remoteMethodArg 
         name="order" 
         type="number"> 
        </xe:remoteMethodArg> 
       </xe:this.arguments> 
      </xe:remoteMethod> 
     </xe:this.methods> 
    </xe:jsonRpcService>

出典

2016-08-20 Bryan Schmiedeler

メソッド "moveItem.moveUp"を共有してください。 –

最初と最後の行のボタンを隠すだけでいいですか、無効にするボタンがある行は変わりますか？ –

この場合、最初の行では下ボタンを無効にし、最後の行では上ボタンを押す必要があります。 –

剣道UIグリッド行とセルの外観をカスタマイズするには、3つの方法があります。残りのオプションは、にあるよう

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/style-rows-cells-based-on-data-item-values

行と列のテンプレートは、データ項目のインデックスについての情報を提供していません。 dataBoundイベントを使用し、グリッドtbodyを取得し、最初と最後の子テーブルの行を見つけて、最後にその中のボタンを非表示にします。ボタンにはk-grid-Up CSSクラスがあります。つまり、コマンドname（大文字と小文字を区別します）に応じて異なります。

出典

2016-08-22 20:07:26 dimodi

グリッド内のコントロールを隠す1つの方法は、CSS経由です。あなたは、行の最初と最後のボタンを非表示にするには、次のスタイルを作成することができます。

#grid> tbody > tr:first-child > td > input { 
    display:none; 
} 

#grid> tbody > tr:last-child > td > input { 
    display:none; 
}

（あなたはそれがあなたの特定のグリッドとボタンと協力を得るためにこれらのスタイルを変更する必要があります）。

出典

2016-08-24 08:56:55

KendoUIGridのセル内の条件付きでボタンを非表示にする

答えて

関連する問題