Treelist multicolumn headers styling issues

9 posts, 1 answers
  1. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 14 Feb 2019 Link to this post

         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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2485 posts

    Posted 18 Feb 2019 Link to this post

    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.
  3. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 18 Feb 2019 in reply to Viktor Tachev Link to this post

    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

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2485 posts

    Posted 20 Feb 2019 Link to this post

    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.
  5. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 20 Feb 2019 in reply to Viktor Tachev Link to this post

    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.

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2485 posts

    Posted 22 Feb 2019 Link to this post

    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.

  7. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 22 Feb 2019 in reply to Viktor Tachev Link to this post

    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

  8. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2485 posts

    Posted 26 Feb 2019 Link to this post

    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.
  9. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 26 Feb 2019 in reply to Viktor Tachev Link to this post

    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.
Back to Top