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

Treelist multicolumn headers styling issues

8 Answers 423 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Paulraj
Top achievements
Rank 1
Paulraj asked on 14 Feb 2019, 12:29 PM

     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.

https://dojo.telerik.com/@paulrajj/iJifOwas

8 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 18 Feb 2019, 11:31 AM
Hello Paulraj,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Paulraj
Top achievements
Rank 1
answered on 18 Feb 2019, 12:08 PM

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

0
Viktor Tachev
Telerik team
answered on 20 Feb 2019, 10:21 AM
Hello 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Paulraj
Top achievements
Rank 1
answered on 20 Feb 2019, 01:17 PM

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.

0
Viktor Tachev
Telerik team
answered on 22 Feb 2019, 08:42 AM
Hello Paulraj,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

0
Paulraj
Top achievements
Rank 1
answered on 22 Feb 2019, 01:01 PM

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.

https://dojo.telerik.com/@paulrajj/ipUsOFIH

0
Accepted
Viktor Tachev
Telerik team
answered on 26 Feb 2019, 08:01 AM
Hi Paulraj,


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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Paulraj
Top achievements
Rank 1
answered on 26 Feb 2019, 12:44 PM
Seems to be working fine by applying the index number to the top level columns and through field names to the sub columns. Thanks Viktor.
Tags
TreeList
Asked by
Paulraj
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Paulraj
Top achievements
Rank 1
Share this question
or