Kendo Grid add class to a column header

[Siddhartha]

Hi,

I want to integrate Kendo grid with bootstrap responsive behavior. Below is my code, it did apply to the records column but did not apply to the column header.

In the below example I want the middle name column to be hidden when the screen size is Medium (Bootstrap breaks), the below code does make the columns invisible in case of resolution not large but it does not apply on the column header (Middle Name). Please let me know how I can achieve this.

HTML-
<div kendo-grid k-data-source="someDataSource" k-selectable="'row'"
                                         k-pageable='{ "pageSize": 10, "refresh": true, "pageSizes": false }'
                                        k-sortable="true", k-groupable="true", k-filterable="true" k-columns="gridColumns">
                                   </div>
JS -
$scope.gridColumns = [
                 { "field": "firstName", sortable: true, "title": "First Name" },
                { "field": "lastName", sortable: false, "title": "Last Name" },
                { "field": "middleName", sortable: false, "title": "Middle Name", 
                        attributes: {
                            "class": "hidden-md visible-lg"
                        } }
            ]; 

[Nikolay Rusev]

Hello Siddhartha,

There is a headerAttributes property for the column which will be applied to the column header cell. I believe this is what you are looking for.

Regards,
Nikolay Rusev
Telerik

 

 

[Siddhartha]

Thank you that worked.

I have another question with respect to grid columns - I want to set width attribute for a column through class, how can I achieve that. I tried setting through attributes but that does not apply to Header column. If I add same class to Header Column then the column and its header does not align for the same width.

$scope.gridColumns = [{ "field": "firstName", sortable: true, "title": "First Name", width: "70px" }];

I changed it to - 

$scope.gridColumns = [{ "field": "firstName", sortable: true, "title": "First Name",  attributes: {
                    "class": "width_70px"
                },
                headerAttributes: {
                    "class": "width_70px"
                }}];

[Nikolay Rusev]

Hello Siddhartha,

The width of the column can only be set as configuration option: Column width. It cannot be set with class as the width actually goes to the col elements.

Regards,
Nikolay Rusev
Telerik