Как раскрасить команды в сетке кендо

Question

Я новичок в mvc, но у меня было 2 года опыта работы с приложениями веб-форм на C #, у меня проблема с раскрашиванием команд в сетке Kendo.

Обычно в веб-формах я использую функцию RowDataBoundчтобы проверить значение столбца, затем используйте cssClass для установки формы и цвета иконки.

Это будет примерно так:

 LinkButton lbEdit = e.Row.Cells[7].FindControl("lbEdit") as LinkButton;

  if (lbEdit != null)
  {
    if (User != null)
        {
         lbEdit.Visible = true;
         lbEdit.CssClass = "fa fa-pencil-square-o  text-muted fa-2x";
         lbEdit.Enabled = false;
          }
          else
          {
           lbEdit.Visible = true;
           lbEdit.CssClass = "fa fa-pencil-square-o  text-success fa-2x";
            lbEdit.Enabled = true;
              }
      }

Предыдущий код простоНапример, но я пытаюсь сделать то же самое с сеткой Kendo в моем новом приложении, как я могу это сделать?

Вот пример текущей сетки Kendo:

 @(Html.Kendo().Grid<Requested>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.RequestNum).Width(200);
          columns.Bound(p => p.ProposedAppTitle).Width(200);
          columns.Bound(p => p.StatusId);
          columns.Bound(p => p.OriginatingDeptName);
          columns.Bound(p => p.AssignedPaUsername);
          columns.Bound(p => p.ProposedAppTitle);
          columns.Command(command =>
          {
              command.Custom("Edit").Text(" ").SendDataKeys(true).HtmlAttributes(new { @title = "Edit" }).IconClass("fa fa-pencil-square-o  text-success fa-lg").Click("Edit");


      })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(5)
          .Model(model =>
          {
              model.Id(p => p.Id);
          })
          .Read(read => read.Action("Read", "Requested"))
      )
      .Pageable()
      .Sortable()
      .Filterable()

      )

Answer 1

Сделайте что-то вроде этого примера кендо, где классы добавляются для стилизации на основе значений сетки: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

Answer 2

Это не дает прямого ответа на ваш вопрос, однако, вот один из способов добавить пользовательскую кнопку и ответить на событие щелчка, как пользовательская команда.

columns.Bound(p => p.ItemID).Title("Configure").Sortable(false)
    .Width(275)
    .ClientTemplate(
        "<button  title='Edit the selected item' onclick='editItem(#=ItemID#)' tabindex='0' class='k-button k-button-icontext' id='btnEdit#=ItemID#' role='button' aria-disabled='false' type='button' data-role='button'><span class='k-icon k-i-pencil'></span>Edit</button>" +
        "#if(Active){#" +
            "<button title='Pause delivery of the selected item' onclick='pauseItem(#=ItemID#)' tabindex='0' class='k-button k-button-icontext' id='btnPause#=ItemID#' role='button' aria-disabled='false' type='button' data-role='button'><span class='k-icon k-i-exception'></span>Pause</button>" +
        "#}else{#" +
            "<button title='Resume delivery of the selected Item' onclick='resumeItem(#=ItemID#)' tabindex='0' class='k-button k-button-icontext' id='btnResume#=ItemID#' role='button' aria-disabled='false' type='button' data-role='button'><span class='k-icon k-i-refresh'></span>Resume</button>" +
        "#}#" +
        "<button title='Delete the selected item' onclick='deleteItem(#=ItemID#)' tabindex='0' class='k-button k-button-icontext' id='btnDelete#=ItemID#' role='button' aria-disabled='false' type='button' data-role='button'><span class='k-icon k-si-minus'></span>Delete</button>"
    )
    .HeaderHtmlAttributes(new { title = "Configure", style = "text-align:center" });

В файле cshtml и выше, где определена сетка ...

<script type="text/javascript">
    /*------------------------------------------------------------------------------------------------------------------------------------*/
    function editItem(itemID)
    {
      //do edit
    }

    function sendItem(itemID)
    {
        showWaitIndicator(true);
        var postDataOptions = {
            url: '@Url.Action("YourMethod", "YourConroller")',
            data: {
                ItemID:itemID
            },
            successFunction: function (data, status, xhr ) {
                showWaitIndicator(false);
            },
            errorFunction: function(){
                showWaitIndicator(false);
                alert("An error occurred while processing your request.");
            }
        };
        performYourAjaxPost(postDataOptions);
    }

    function deleteItem(itemID){
        //do delete
    }

</script>