Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › Custom column header and column group header buttons

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 24, 2025 at 10:34 pm #113216
    Patrick Walsh
    Participant

    I’m using the smart-ui-grid web component and I need to add a button to each column’s and column group’s header so that I can have my app do things related to that column.

    What is the best way to accomplish this?

    I’ve tried a couple things based on the docs:

    • Setting a labelTemplate gets me close, but I haven’t found a way to bind a click event handler to it.
    • Enabling the columnMenu, but I need to customize the menu options.
    November 25, 2025 at 2:19 pm #113217
    Markov
    Keymaster

    Hi Patrick,

    You can use something like this: ` “columns”: [
    {
    “label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
    labelTemplate: function () {
    return “<smart-button>Add</smart-button><span style=\”margin-left: 20px;\”>ID</span>”;
    }
    },`

    It renders a button inside the column header. Then you can bind to the columnClick event and handle the button click.

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    November 25, 2025 at 10:56 pm #113219
    Patrick Walsh
    Participant

    Hi, Markov:

    Thank you for suggesting that approach. I’m able to catch clicks on the column, but it doesn’t appear possible to distinguish a click on the button from unrelated clicks on the column. This is important because we want to also have allowColumnHeaderSelection enabled so the column is selected on click.

    I would need the composed path or target, but these are not useful from where columnClicked is dispatched. What is the way forward from here?

    Cheers,

    Patrick

    November 26, 2025 at 5:53 pm #113231
    admin
    Keymaster

    Hi Patrick,

    We just released a new version. You have an originalEvent parameter in the column click.
    Alternatively, the column definition includes a new headerTemplate property which allows you to setup the column’s header after the label template is rendered.

    Here’s the code:

    ` “label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
    labelTemplate: function () {
    return “AddID“;
    },
    headerTemplate: function (header) {
    const button = header.querySelector(‘smart-button’);
    button.addEventListener(‘pointerdown’, function (event) {
    grid.addNewRow();
    event.stopPropagation();
    });
    }`

    Hope this helps.

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    November 26, 2025 at 9:42 pm #113232
    Patrick Walsh
    Participant

    Awesome—thank you for the update! I will try those new options.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.