This is a migrated thread and some comments may be shown as answers.

Grid Options does not include Header Attributes

3 Answers 746 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 19 Dec 2014, 06:25 PM
The object returned by grid.getOptions() includes the "attributes" object for columns, such as the following:

"attributes":{"style":"text-align: right;"}

However, it does not include the header attributes. If I apply saved grid state using grid.setOptions(), my header attributes defined via HeaderHtmlAttributes is removed. Is there a way to set the grid options while preserving the header attributes?

Here's the code I'm using to set the grid options:

var grid = $("#CaseloadGrid").data("kendoGrid");
var savedOptions = localStorage["caseload-grid-options"];
 
if (savedOptions)
{
    var state = JSON.parse(savedOptions);
    var options = grid.options;
    options.dataSource.pageSize = state.dataSource.pageSize;
    options.dataSource.sort = state.dataSource.sort;
    options.dataSource.page = state.dataSource.page;
    grid.setOptions(options);
}

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Dec 2014, 08:53 AM
Hi Jon,

HeaderHtmlAttributes() are not serialized to the client-side Grid initialization script. Instead, they are rendered from the server. That's why you will need to include them to the saved options manually.

var opts = $("#grid").data("kendoGrid").getOptions();
 
// replace 0 with the actual column index
opts.columns[0].headerAttributes = { /* use client side API syntax here */ };


The same applies for server-side templates, such as the toolbar template and server-side column templates (if server binding is used).

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Roberto Montoya
Top achievements
Rank 1
answered on 24 Feb 2017, 05:04 PM

Hi, I was having this issue as well and the solution provided here works except that we support column re-ordering so I need to access the column by name or some other way instead of index.

opts.columns[xxx].headerAttributes = { /* use client side API syntax here */ };

Is something like this possible?

0
Dimo
Telerik team
answered on 27 Feb 2017, 11:06 AM
Hello Roberto,

Direct access to a column by its (field) name is unfortunately not available, but you can iterate the column objects and check their field key to find the correct one.

Regards,
Dimo
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Roberto Montoya
Top achievements
Rank 1
Share this question
or