Our blazing fast Grid component built with pure JavaScript


Post by notepads »

if you want to select a row, you can put the code as below

   selectionMode: {
                //rowCheckboxSelection: true,
                row: true,
                checkbox: true,
                multiSelect: true
            },

But I want to control the header by having a name like ' Row Selection'. Even more, I want to call the function to select all records. How do I do that? The image below explains better.

https://imgur.com/a/8PBx3QP


Post by arcady »

Adding a checkbox to select all the records is easy:

    selectionMode : {
        ...
        showCheckAll : true
    },

And changing the checkcolumn header is doable yet a bit more complex. You need to override standard CheckColumn since it doesn't support that out of the box:

// override standard CheckColumn
class MyCheckColumn extends CheckColumn {

    static get type() {
        return 'check';
    }

    // We override headerRenderer to support providing a text to that column,
    // it will get the text from new checkAllText config on the Grid
    headerRenderer({ column }) {
        if (column.showCheckAll && column.grid.checkAllText) {
            super.headerRenderer(...arguments);
            // return checkAllText if provided
            return column.grid.checkAllText;
        }
        else {
            return super.headerRenderer(...arguments);
        }
    }
}

// register the new column
ColumnStore.registerColumnType(MyCheckColumn, true);

After doing that the text will be added to the title but won't appear because of CSS rules hiding .b-grid-header-text element for CheckboxColumn ..so you will need to debug & override corresponding rule in your application.


Post by notepads »

arcady wrote: Tue Sep 15, 2020 8:29 am

Adding a checkbox to select all the records is easy:

    selectionMode : {
        ...
        showCheckAll : true
    },

And changing the checkcolumn header is doable yet a bit more complex. You need to override standard CheckColumn since it doesn't support that out of the box:

// override standard CheckColumn
class MyCheckColumn extends CheckColumn {

    static get type() {
        return 'check';
    }

    // We override headerRenderer to support providing a text to that column,
    // it will get the text from new checkAllText config on the Grid
    headerRenderer({ column }) {
        if (column.showCheckAll && column.grid.checkAllText) {
            super.headerRenderer(...arguments);
            // return checkAllText if provided
            return column.grid.checkAllText;
        }
        else {
            return super.headerRenderer(...arguments);
        }
    }
}

// register the new column
ColumnStore.registerColumnType(MyCheckColumn, true);

After doing that the text will be added to the title but won't appear because of CSS rules hiding .b-grid-header-text element for CheckboxColumn ..so you will need to debug & override corresponding rule in your application.

Thank you for your support. I am sure that it will help others who have the similar problems.


Post Reply