KendoUI Grid - how to add a class to the generated table - kendo-ui

Question

I'm generating a KendoUI Grid using ajax dataSource. The table is generated and by default has no class. To keep it looking uniform with the rest of the site, I'd like to add a class "interactive" to it.
$("#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: [...]
});
});
I know that I can do this using JQuery.addClass() method, run after the grid is generated, however if there a way of setting it in the grid setup/configuration?
Thanks in advance.

Answer 1

I guess you don't have any other choice but to use addClass(). Can't find anything on their documentation about setting a grid's(not grid column) htmlAttributes using built-it property in JS. I tried it also with no success. Unless you declare it like this (C#):
#(Html.Kendo().TabStrip()
.Name("TabStrip")
.HtmlAttributes( new { #class = "newclass"})
)
But if you really need it in JS, then you'll have to do it like this:
$("#pending_documents").kendoGrid({
dataSource: {
//code
}
}).addClass("newclass");

Answer 2

You can also use the TableHtmlAttributes()
#(Html.Kendo().Grid<Object>()
.Name("dataGrid").TableHtmlAttributes(new { #class = "interactive" })

Answer 3

The way I do it is add it to my columns in my configuration, in the attributes section. Depending on which column you want to set the class on do the following:
columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: {
"class": "class1 class2"
}},
.
.
.
.
.
.
.]
This way all the items in the 'Name' column (in my case) have their classes set up on initialization of the grid. No need to do extra jquery to add classes. I tried that in the beginning. Doing it the jquery way (using addClass) worked until I tried to sort my columns, then the bindings broke (probably because of the magic we were doing in the implementation). After doing it the way I did above, my bindings worked even after sorting.

Answer 4

You can do it by defining a class in original element, You used, like:
<div id="pending_documents" class="your-class-name"> </div>