1

私はMVCにTelerikExtensionsを使用しています。1つのページで、グリッドを使用してステータスメッセージを表示します。status_idが正のすべてのステータスメッセージの編集ボタンを表示したい。

以前、サーバーにバインドされたグリッドとCellActionを使用してこれを実行しました。ただし、Ajaxバインドグリッドに変更しようとしていますが、特定の行のボタンを非表示にする方法がわかりません。

おそらく、JavaScriptから特定のセルを参照し、その方法で非表示にする方法はありますか？

ありがとう！

4

4 に答える 4

7

この質問は少し前に投稿されたものですが、私の回答が他の人にも役立つことを願っています。

データモデルでフィールドを渡します。この場合は「RemoveDelete」であり、あらかじめ決められた条件に基づいて削除ボタンを削除するために明示的に使用されるため、グリッドに非表示に設定されます。グリッドに表示されるデータに、調べたい条件がすでに含まれている場合は、これを行う必要はありません。

グリッド内...

.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
.Columns(columns => {
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Bound(c => c.ColumnName).Attributes().Etc();
  columns.Command(commands => {
    commands.Edit().ButtonType(ButtonType);
    commands.Delete().ButtonType(ButtonType);
  });
  columns.Bound(c => c.RemoveDelete).Hidden(true);
})

スクリプト...

<script type="text/javascript">
  function onRowDataBound(e) {
    if (e.dataItem.RemoveDelete > 0) {
      $(e.row).find('a.t-grid-delete').remove(); //remove Delete button
    }
  }
</script>

[編集]ボタンを削除するには...

$(e.row).find('a.t-grid-edit').remove();

最後の列を非表示にするには

$(e.row).find('td.t-last a.t-grid-action').hide();

以上のことをすべて踏まえると、これにより、行ごとに表示するボタンを事前に決定できます。

于 2011-08-27T20:41:16.463 に答える
2

私はそれをややハッキーな方法で解決することができました：

「OnRowBound」イベントの関数を追加しました。この関数は、[編集]ボタンを含むセルのinnerTextを何にも設定しません。

イベントへの関数の追加：

.ClientEvents(events => events.OnRowDataBound("hideEdit"))

関数：

function hideEdit(e) {

    if (e.dataItem["status_id"] < 0) {
        e.row.cells[5].innerText = "";
    }
}
于 2011-02-21T23:44:30.923 に答える
2

@AZeeの現在受け入れられている答えは良いですが、Telerikが「MVC拡張機能」からKendoUIラッパーに移行したため、機能しなくなります。Telerikグリッドの移行ページを参照してください。下部にはDataBound、イベントの代わりにグリッドイベントを使用するための手順がありonRowDataBoundます。 前のリンクのは使用できないため、を使用する必要があることにも注意してください。最後に、クラスプレフィックスがからに変更されました。view()_datat-k-

これらの変更の影響：イベントハンドラーを設定するには：

@(Html.Kendo().Grid<type>()
    .Name("grid")
    .Events(e => e.DataBound("onDataBound"))
    ...

そして、イベントハンドラー自体：

function onDataBound() {
    var data = this._data;

    for (var i = 0; i < data.length; i++) {
        // the relevant row-data
        var dataItem = data[i]; 
        // selector for the table-row in the DOM
        var $tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");

        if (<dataItem not deleteable>) $tr.find("a.k-grid-delete").remove();
        if (<dataItem not editable>) $tr.find("a.k-grid-edit").remove();
    }
}
于 2016-09-30T18:45:56.197 に答える
1

私の場合、別のjQuery関数を使用して[編集]ボタンを非表示にしましたが、そのように見えます。

スタイルを作成します。

.hide
 {
   display:none !important;
 }

onRowDataBound javascript関数の場合：

if (e.dataItem.SomeValueA!= 4 || e.dataItem.SomeValueB != 16) {
   $(e.row).find('a.t-grid-edit').removeClass("t-button"); 
   $(e.row).find('a.t-grid-edit').addClass("hide");
}

願っています、この助け。

于 2012-11-02T18:28:33.773 に答える