Есть ли способ условно отобразить командную кнопку в сетке Telerik MVC? - PullRequest
Новая
       12

Есть ли способ условно отобразить командную кнопку в сетке Telerik MVC?

4 голосов
/ 15 августа 2011

У меня есть столбец в моей сетке, зарезервированный для команд следующим образом: 

.Columns(c =>
{
   c.Command(cmd =>
                  {
                    cmd.Edit().ButtonType(GridButtonType.Image);
                    cmd.Delete().ButtonType(GridButtonType.Image);
                  });
...
}

Есть ли способ условно отобразить кнопку «Удалить» на основе значения поля в текущей строке? Я хотел бы сделать что-то вроде этого: 

cmd.Delete().ButtonType(GridButtonType.Image)
         .HtmlAttributes((item.HasChildren == true ? new { style = "display: none"} : null));

Проблема в том, что элемент находится не в области действия, как в столбце Шаблон.

Спасибо.

Ответы [ 2 ]

6 голосов
/ 15 августа 2011

Лучше всего справиться с этим с помощью события OnRowDataBound на стороне клиента в Grid. Должен работать следующий JavaScript: 

function onRowDataBound(e) {
    if (e.dataItem.HasChildren) {
        $(e.row).find('t-grid-delete').remove();
    }
}

Переменная e может использоваться для доступа к любому из ваших полей (следовательно, HasChildren может быть проверен, если оно истинно или ложно), а затем все, что вам нужно сделать, это посмотреть на конкретную строку ($ (e.row)) и найти элемент, представляющий кнопку Удалить (t-grid-delete).

1 голос
/ 01 мая 2013

Ответ выше работает только с привязкой Ajax.Если вы передаете коллекцию в Grid во время создания экземпляра, вам также нужно будет сделать нечто подобное и в событии OnLoad (поскольку строки на самом деле не привязаны к данным). 

@(Html.Telerik().Grid<Borrower>(Model.Borrowers)
    .Name("BorrowersPopupGrid")
    .Columns(cols =>
    {
        cols.Bound(b => b.FirstName);
        cols.Bound(b => b.MiddleName);
        cols.Bound(b => b.LastName);
        cols.Bound(b => b.MailingAddress).Title("Address");
        cols.Bound(b => b.MailingCity).Title("City");
        cols.Bound(b => b.MailingState.StateCode).Title("State").ClientTemplate("<#= MailingState == null ? '' : MailingState.StateCode#>");
        cols.Bound(b => b.MailingZipCode;
        cols.Bound(b => b.TelephoneNumberFirst).Title("Phone 1");
        cols.Bound(b => b.TelephoneNumberSecond).Title("Phone 2");
        cols.Bound(b => b.EmailAddress).Title("Email");
        cols.Command(command =>
            {
                command.Edit();
                command.Delete();
            });
    })
    .ClientEvents(events =>
    {
        events.OnLoad("BorrowersPopupGridOnLoad");
        events.OnRowDataBound("BorrowersPopupGridOnRowDataBound");
    })
)

function BorrowersPopupGridOnRowDataBound(e) {
    if (e.dataItem.BorrowerId == borrowerOneId || e.dataItem.BorrowerId == borrowerTwoId) {
        $(e.row).find('.t-grid-delete').remove();
    }
} 
function BorrowersPopupGridOnLoad(e) {
    var grid = $('#BorrowersPopupGrid').data('tGrid');
    grid.$rows().each(function(index, row) {
        var dataItem = grid.dataItem(row);
        if (dataItem.BorrowerId == borrowerOneId || dataItem.BorrowerId == borrowerTwoId) {
            row.find('.t-grid-delete').remove();
        }
    });
}
...