headerTemplate in JavaScript instead of Wrapper for Kendo-UI Grid - kendo-ui

Question

How can I write this in javascript instead of using the MVC Wrapper?
#(Html.Kendo().Grid(Model.List)
.Name("grid")
.Columns(c => {
c.Bound(e => e.ID);
c.Bound(e => e.Nom).HeaderHtmlAttributes(new { colspan = 2 });
c.Bound(e => e.Nb).HeaderHtmlAttributes(new { style= "display:none;" });
})
)
I started with the following code to experiment, I know it is not an exact
match to the attributes mentioned above, but how can I set
HeaderHtmlAttributes and Headertemplate for columns with javascript for the Kendo grid?
$("div#kendogrid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ID",
title: "Nr Id",
headerTemplate: "sample template text col 1",
width: 100
},
{
field: "Nom",
headerAttributes: {
"class": "myHeader",
style: "text-align: right"
},
width: 200
}
]
});

Answer 1

You are correct, HeaderHtmlAttributes is specified using columns.headerAttributes and the equivalent to your HeaderTemplate is columns.headerTemplate. See the links for documentation:
http://docs.kendoui.com/api/web/grid#columnsheaderattributes-object
http://docs.kendoui.com/api/web/grid#columnsheadertemplate-string
The translation of your original code would be:
$("#kendogrid").kendoGrid({
dataSource: dataSource,
columns : [
{
field: "ID"
},
{
field : "Nom",
headerAttributes: {
colspan: 2
}
},
{
field : "Nb",
headerAttributes: {
style: "display:none"
}
}
]
});