I am using Treelist Multicolumn headers to apply multiple columns in treelist. I have been facing an issue when applying attributes & headerAttributes properties. I tried implementing it in the below link example, but it doesn't works. I found there is a bug reported in Github related to this issue, but not sure whether its fixed or available in the latest version. Is there any fixes ? Thanks.
8 Answers, 1 is accepted
The issue you are referring to has been fixed and is not observed in the latest release. With that said, if you would to customize the style of the header cells I would suggest adding a CSS class. When sorting is enabled the text in the column header is wrapped in an anchor element. Thus, the custom CSS would look like this:
.customClass a {
color
:
red
!important
;
}
Check out the updated example that illustrates the approach:
Regards,
Viktor Tachev
Progress Telerik
Hi Viktor,
Thanks for your reply. I will apply the styles using CSS class as you mentioned above for styling. But in my case I had to change the header template as well ( wanted to add some extra icons for hide/show of the columns ). I tried to alter the html using headerTemplate for grouping columns, then the treelist failed to load (throws headerTemplate is not a function). You can find from the below example. I have commented headerTemplate property for "Personal Info" & "Location" columns. Can you pls help me on this.
https://dojo.telerik.com/@paulrajj/EWuZaMom
Regards,
Paulraj
I am afraid that the described behavior is not available for the TreeList. However, I have logged a feature request for the functionality in our Feedback Portal.
https://feedback.telerik.com/kendo-jquery-ui/1388875-add-headertemplate-support-for-multi-column-headers
As a workaround I would suggest getting reference of the custom classes applied to the header cells and change the content manually. The dojo below illustrates the approach:
Regards,
Viktor Tachev
Progress Telerik
Hi Viktor,
Thanks for the feature request on the above issue. Somehow I managed to apply the header template changes inside databound event. But I wanted to implement show/hide columns (using hideColumn/showColumn functions). Both of these functions are not working for the child columns.
If I try to apply hideColumn or showColumn using field names of child columns, the columns are not working as expected. But It works only for parent columns. I have an requirement which involves when I hide parent column, relevant child columns are also should hide.
Kindly let me know if is there any workaround to apply the hide/show of child columns. Thanks.
When using hideColumn and showColumn methods with an index it will be applied for the top level with all child-level columns. If you would like to hide a child column it is recommended to pass the field name as an argument to hide/show a column.
In the updated example below the "City" column is hidden.
Regards,
Viktor Tachev
Progress Telerik
Hi Viktor,
Thanks for the example. The hideColumn works with field name for the child columns. I would like to apply the hide/show columns to the parent row columns (Personal Info & Location). If so the child columns should also be applied to hide/show.
In this below example, I tried to hide parent columns but not working.
In order to hide Personal Info column I would suggest using an index. Then, since Location is nested you can hide it by calling hideColumn for all columns nested under it.
// hide Personal Info
$(
"#treelist"
).getKendoTreeList().hideColumn(2);
$(
"#treelist"
).getKendoTreeList().hideColumn(
"City"
);
$(
"#treelist"
).getKendoTreeList().hideColumn(
"Country"
);
Check out the updated dojo below where the approach is implemened.
Regards,
Viktor Tachev
Progress Telerik