Customize headers for a kendo grid using Knockout-Kendo.js for ko binding

Question

I try to use a kendo grid with knockout binding and Knockout-Kendo.js library

It is defined as below:

<div data-bind="kendoGrid:
                {
                    data: SearchResult,
                    rowTemplate: 'rowTmpl',
                    altRowTemplate: 'altTmpl',
                    useKOTemplates: true
                }"> 
</div> 

<script id="rowTmpl" type="text/html">
    <tr class="tdText" role="row">
        <td >
            <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
            </a>
        </td>
        <td data-bind="text: CheckNumber"></td>
        <td data-bind="text: new Date(CreateDate).MMddyyyy()"></td>
        //...
        <td data-bind="text: ParishName">                                        
    </tr>
</script>
<script id="altTmpl" type="text/html">
   //....

The data loaded from the REST service has more columns that I want to be shown in grid The row looks ok, due to template, but the problem is with the grid header, create columns for every field in source.

How can I hide some columns in header, and customize their header label (change column width, header label and eventually allow additional customization .

For example, in image above I want Co

Answer 1

There is currently a specific option to specify the header template directly. What you could do is specify a set of columns and their headers directly either by using the title or headerTemplate options like:

this.gridOptions = {
    data: this.items,
    rowTemplate: "rowTmpl",
    useKOTemplates: true,
    columns: [ 
        {
            title: "My ID"
        },
        {
            headerTemplate: "<strong>Name Edit</strong>"   
        },
        {
            title: "Name Value"   
        }
    ]
}; 

Sample: http://jsfiddle.net/rniemeyer/yjYMK/

Answer 2

You can make the customizations you need by providing the grid with individual column definitions. With those, you can set the width, provide a headerTemplate, hide columns:

columns: [{
    field: "FieldName",
    title: "Contact Name",
    headerTemplate: "This will be shown in the header",
    template: "This will be shown in the column",
    hidden: true,
    width: 140
}]

Answer 3

Also worth noting that you can apply bindings to your templates. The following example uses a knockout binding:

columns: [{
    field: 'FieldName',
    headerTemplate: '<span data-bind="text:headerName"></span>',
    template: 'This will be shown in the column'
}]