HTML Elements Forums Data Grid Custom column header with html code


This topic contains 1 reply, has 2 voices, and was last updated by Avatar Yavor Dashev 1 month, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #101780


    I would like to use html code to customize the header of a column of a grid.

    I am using the “label” property of “columns” by putting “<div> … </div>”.

    When the grid is loaded, the code is interpreted.

    Everything is OK.

    But, as long as there is a user event, the HTML code is no longer interpreted but displayed.

    I don’t understand why.

    Thank you in advance for your help.


    Yavor Dashev

    Hi Emmanuel,

    This is default functionality of this property and it escapes html code.

    However if you want to achieve this kind of functionality I have prepared a little code snippet for you:

       // In your JS file 
        const grid = document.querySelector('smart-grid');
        const column = grid.querySelectorAll('smart-grid-column')
        let customHeaderColumn = column[2]
        customHeaderColumn.innerHTML= '<h3> Custom Header </h3>'

    And the CSS class needed:

    /*In your CSS file */
        line-height: unset!important;
        justify-content: center!important;

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.