Как скрыть кнопку «Изменить» в Telerik Grid с привязкой к Ajax для MVC? - PullRequest
Новая
       6

Как скрыть кнопку «Изменить» в Telerik Grid с привязкой к Ajax для MVC?

1 голос
/ 22 февраля 2011

Я использую Telerik Extensions для MVC. На одной странице я использую сетку для отображения сообщений о состоянии. Я хочу показать кнопки редактирования для всех сообщений о состоянии с положительным значением status_id.

Ранее я делал это, используя сетку, привязанную к серверу, и CellAction. Однако я пытаюсь преобразовать его в сетку, связанную с Ajax, но не могу понять, как тогда скрыть кнопки для определенных строк.

Возможно, есть ли способ ссылаться на конкретную ячейку из JavaScript и скрывать ее таким образом?

Спасибо!

Ответы [ 4 ]

7 голосов
/ 28 августа 2011

Я понимаю, что этот вопрос был опубликован некоторое время назад, но я надеюсь, что мой ответ окажется полезным для других.

В вашей модели данных передайте поле.В этом случае это «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();

С учетом всего сказанного, это позволяет вамчтобы заранее определить, какие кнопки вы хотите отображать построчно.

2 голосов
/ 30 сентября 2016

@ В настоящее время принятый ответ AZee хорош, но больше не будет работать, поскольку Telerik перешел от «расширений MVC» к оболочкам KendoUI. См. Страница миграции Telerik Grid . Внизу находятся инструкции по использованию события сетки DataBound вместо события onRowDataBound. Также обратите внимание , что view() в предыдущей ссылке недоступно, поэтому вам нужно будет использовать _data. Наконец, префиксы классов были изменены с t- на 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();
    }
}
2 голосов
/ 22 февраля 2011

Мне удалось решить эту проблему несколько хакерским способом:

Я добавил функцию для события «OnRowBound», которая устанавливает нулевой внутренний текст ячейки, содержащей кнопку «Редактировать».

Добавление функции к событию: 

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

Функция: 

function hideEdit(e) {

    if (e.dataItem["status_id"] < 0) {
        e.row.cells[5].innerText = "";
    }
}
1 голос
/ 02 ноября 2012

В моем случае я использовал другую функцию jQuery, чтобы скрыть кнопку «Редактировать», и выглядит так.

Создайте стиль: 

.hide
 {
   display:none !important;
 }

В функции JavaScript onRowDataBound: 

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");
}

Надеюсь, это поможет.

...