Tagged: 

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101780
    Avatar
    astelcom
    Participant

    Hi,

    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.

    Emmanuel.

    #101782
    Avatar
    Yavor Dashev
    Participant

    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.classList.add('custom-column-header')
        customHeaderColumn.innerHTML= '<h3> Custom Header </h3>'
    

    And the CSS class needed:

    /*In your CSS file */
    .custom-column-header{
        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
    https://www.htmlelements.com/

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

You must be logged in to reply to this topic.