KendoUI Grid - как добавить класс в сгенерированную таблицу

Question

Я создаю сетку KendoUI с использованием ajax dataSource. Таблица генерируется и по умолчанию не имеет класса. Чтобы он выглядел единообразно с остальной частью сайта, я хотел бы добавить к нему класс «интерактивный».

$("#pending_documents").kendoGrid({ 
    dataSource: { 
     transport: { 
      read: "/get-data?type=1" 
     }, 
     schema: { 
      data: "data", 
      total: "total" 
     }, 
     pageSize: 2, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true, 
     reorderable: true 
    }, 
    height: 500, 
    filterable: { 
     extra: false 
/* 
, ui: "datetimepicker" // use Kendo UI DateTimePicker 
*/ 
    }, 
    sortable: true, 
    pageable: { 
     pageSize: 2  }, 
    columns: [...] 
}); 
    }); 

Я знаю, что я могу сделать это, используя метод, JQuery.addClass() запуска после генерируется сетка, однако, если есть способ установки его в настройки сетки/конфигурации?

Заранее спасибо.

Answer 1

Я думаю, у вас нет другого выбора, кроме как использовать addClass(). Не могу найти что-либо в своей документации о настройке столбца сетки (не сетки) htmlAttributes с использованием встроенного свойства в JS. Я тоже пробовал это без успеха. Если вы не объявить его как это (C#):

@(Html.Kendo().TabStrip() 
    .Name("TabStrip") 
    .HtmlAttributes(new { @class = "newclass"}) 
) 

Но если вам действительно нужно в JS, то вы должны будете сделать это следующим образом:

$("#pending_documents").kendoGrid({ 
dataSource: { 
    //code 
    } 
}).addClass("newclass"); 

Answer 2

Вы можете сделать это, определив класс в оригинальном элементе, Вы использовали, как:

<div id="pending_documents" class="your-class-name"> </div> 

Answer 3

так, как я это добавить к моим колонкам в моей конфигурации, в разделе attributes. В зависимости от того, какого столбца вы хотите установить класс по выполнить следующие действия:

columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: { 
        "class": "class1 class2" 
       }}, 
      . 
      . 
      . 
      . 
      . 
      . 
      .] 

Таким образом, все элементы в столбце «Name» (в моем случае) имеют свои классы созданы при инициализации сетки. Не нужно добавлять дополнительные jquery для добавления классов. Я попробовал это в начале. Выполнение этого метода jquery (с помощью addClass) работало до тех пор, пока я не попытался отсортировать мои столбцы, а затем сломались привязки (вероятно, из-за магии, которую мы делали в реализации). После того, как я сделал это, мои привязки работали даже после сортировки.

Answer 4

Вы также можете использовать TableHtmlAttributes()

@(Html.Kendo().Grid<Object>() 
     .Name("dataGrid").TableHtmlAttributes(new { @class = "interactive" })