Kendo Grid - визуализация пользовательского HTML на основе значения данных в ячейке столбца. - PullRequest
0 голосов
/ 13 июня 2018

Я новичок в сетке кендо.У меня есть столбец с именем Status, возможные значения для столбцов 1,2,3.Если значение равно 1 или 2, я хочу отобразить текст «Хорошо» в ячейке.Если значение равно 3, я хочу отобразить кнопку «Применить» в ячейке.Пользователь может нажать кнопку, чтобы вызвать всплывающее окно и что-то там сделать.

Я работал с ag-grid, я знаю, что могу сделать это в cellRenderer: (params) => {...} для отображения другого текста в зависимости от значения этой ячейки.Затем в onCellClicked: (params) => {...} вызвать всплывающее окно, если значение равно 3.

Как я могу сделать то же самое в сетке кендо?

1 Ответ

0 голосов
/ 14 июня 2018

Если вы используете Kendo ASP.NET, добавьте ClientTemplate для статуса столбца:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
          columns.Bound("Status").ClientTemplate("#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#");

        ...

Если вы используете Kendo UI JS,

<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "Status",
    template: "#if(Status == 1 || Status == 2 ){# Good #}else{# <input type=button value=apply onclick=CallAnyJSFunction() /> #}#"
  }],
  ...
});
</script>

Также,Вы можете обернуть логику в функцию javascript и вызвать ее из шаблона следующим образом.

function setStatus(status) {
        switch (status) {
            case 1:
                return "Good";
                break;
            case 2:
                return "Good";
                break;
            case 3:
                return "<input type=button value=apply onclick=CallAnyJSFunction() />";
                break;
        }
    }

columns.Bound("Status").ClientTemplate("#= setStatus(Status) #"); 

или

template: "#= setStatus(Status) #"
...