Skip to main content

header

Optional. Adds a header with a text or with custom content for a cell

Usage​

type TCellHeaderTemplate = (cell: ICellConfig) => string | IView;

header?: string | TCellHeaderTemplate;

The type of the value defines the way Layout renders the content of a header:

  • a string - defines the text the header shows. Layout doesn't interpret HTML tags and displays them as a part of the text

  • a callback function - defines the custom content the header shows. While rendering the cell, Layout calls the function with the following parameter:

    • cell: ICellConfig - the configuration object of the cell the header belongs to

    Layout places the value that the function returns into the DOM of the header:

    • a string with HTML markup - the header renders the tags as markup instead of showing them as text
    • an object of a DHTMLX widget - an initialized widget, the same object that you pass to the attach() method of a cell

Example​

  • a header with a text
const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header" }
    ]
});
  • a header with HTML content
const layout = new dhx.Layout("layout_container", {
    cols: [
        {
            id: "orders",
            header: cell => `<b>Orders</b> <i>3 new</i>`
        }
    ]
});
  • a header with a DHTMLX widget inside
const toolbar = new dhx.Toolbar(null, {
    data: [
        { id: "add", type: "button", value: "Add", icon: "dxi dxi-plus" }
    ]
});

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: () => toolbar }
    ]
});

A header with custom content has the following specifics:

  • events: to handle clicks and other DOM events of the markup returned by the callback, use the on property of the cell with the selector of the necessary element
  • icon and image: the headerIcon and headerImage options work as well. The cell renders the icon and the image before the content that the callback returns
  • height: the height of a header adjusts to the size of the custom content. The headerHeight option sets a fixed height for it
  • collapsing: a collapsable cell shows the collapse/expand icon in a header of any type. A click on the custom content of a header calls no API of the cell, so controls inside the header remain operable. A user collapses and expands the cell by clicking the collapse icon or the free space of the header
Need more help?Contact Support