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

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");