DataGrid Header

[Casper]

Hi,
Can we implement 3 level of Header component? I will build a Data Grid but i have more than 2 level in Header like explan in a Docs. Can you help me please.
Best regards,

[yavordashew]

Hi Casper,
It is better to give us a bit more context and idea on what you are exactly trying to achieve with the grid header.
However I have made a quick code example on how to have basic setup for the grid header and I have used this demo for base: https://www.htmlelements.com/demos/grid/overview/
//In your JS file :

window.Smart('#grid', class {
    get properties() {
        return {
            behavior: { columnResizeMode: 'growAndShrink' },
            appearance: {
                alternationCount: 2,
                showRowHeader: true,
                showRowHeaderSelectIcon: true,
                showRowHeaderFocusIcon: true
            },
            paging: {
                enabled: true
            },
            pager: {
                visible: true
            },
            sorting: {
                enabled: true
            },
            editing: {
                enabled: true
            },
            selection: {
                enabled: true,
                allowCellSelection: true,
                allowRowHeaderSelection: true,
                allowColumnHeaderSelection: true,
                mode: 'extended'
            },
            dataSource: new window.Smart.DataAdapter({
                dataSource: window.generateData(500),
                dataFields: [
                    'id: number',
                    'firstName: string',
                    'lastName: string',
                    'productName: string',
                    'quantity: number',
                    'price: number',
                    'total: number'
                ]
            }),
            columns: [
                {
                    label: 'First Name', dataField: 'firstName', columnGroup: 'name'
                },
                { label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
                { label: 'Product', dataField: 'productName', columnGroup: 'order' },
                { label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
                { label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
                        const rowId = settings.row;
                        const columnDataField = settings.column;
                        const template = settings.template;
                        if (settings.value >= 4) {
                            settings.cell.background = '#00A45A';
                            settings.cell.color = '#fff';
                        }
                        else if (settings.value < 2) {
                            settings.cell.background = '#DF3800';
                            settings.cell.color = '#fff';
                        }
                        else {
                            settings.cell.background = '#FFFDE1';
                            settings.cell.color = '#333';
                        }
                        settings.value = '$' + new Number(settings.value).toFixed(2);
                    }
                },
                { label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
                        const rowId = settings.row;
                        const columnDataField = settings.column;
                        const template = settings.template;
                        if (settings.value >= 20) {
                            settings.cell.background = '#00A45A';
                            settings.cell.color = '#fff';
                        }
                        if (settings.value <= 5) {
                            settings.cell.background = '#DF3800';
                            settings.cell.color = '#fff';
                        }
                        else {
                            settings.cell.background = '#FFFDE1';
                            settings.cell.color = '#333';
                        }
                        settings.value = '$' + new Number(settings.value).toFixed(2);
                    } }
            ],
            columnGroups: [
                { label: 'Customer Name', align: 'center', name: 'name' },
                { label: 'Order Detals', align: 'center', name: 'order' }
            ]
        };
    }
});
window.onload = function (){
    const grid = document.getElementById('grid');
    grid.header.visible = true;
    grid.header.buttons= [ "columns", "filter", "group", "sort", "format", "search" ]
    grid.header.template = '<span> Your Header Template </span> <button> Click me </button>'
}

The HTML file is the same as the one from the demo.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts