Kendo Grid add class to a column header

1 Answer 2655 Views
Grid
Siddhartha
Top achievements
Rank 1
Siddhartha asked on 01 Apr 2014, 01:10 PM
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"
                        } }
            ]; 

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 03 Apr 2014, 07:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Siddhartha
Top achievements
Rank 1
commented on 04 Apr 2014, 03:40 PM

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
Telerik team
commented on 08 Apr 2014, 07:48 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Siddhartha
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or