Use header check box for select all in infinite scolling using ag-grid angular 4

Question

I would like to use a checkbox in the header of ag-grid for Select All option. The row model type I'm using is infinite. I guess this model doesn't support headerCheckboxSelection=true.

How else I can use a checkbox inside the header cell?

I will be making a service call on click of this checkbox for further processing.

This is how i am configuring the table:

this.columnDefs = [
      {
       headerCheckboxSelection:true
       checkboxSelection: true,
       width: 40,
      },
      {
        headerName: "Date/Time",
        field: "createdDate",
        width: 230
      },
      {headerName: 'File Name', field: 'fileName', width: 240},
      {headerName: 'Count', field: 'count', width: 100}
    ];

    this.gridOptions = {
      rowSelection: 'multiple',
      cacheBlockSize: 30,
      rowModelType: 'infinite',
      paginationAutoPageSize: true,
      suppressRowClickSelection: true
    };

Please, add some code on your question so we could help understand better the context of your issue. Thank you — Ricardo Rocha, Jul 25 '18 at 10:00
Please refer this https://stackoverflow.com/questions/57890959/header-checkbox-selection-doesnt-work-when-using-server-side-data-source — SrinivasMusturi, Mar 26 '21 at 10:43

score 0 · Answer 1 · answered Jul 10 '23 at 04:12

1. In Column defs, add checkbox column:

columnDefs: [
    {
        headerName: '',
        width: 40,
        field: 'checkbox',
        width: 50,
        checkboxSelection: true,
        showDisabledCheckboxes: true
    }
]

2. Custom Checkall checkbox:

<script>
    $(document).ready(function () {
        //--Add CheckAll Checkbox
        let checkAllHtml = '<div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper divCheckAll" id="divCheckAll" role="presentation"><input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="checkAllCheckbox" tabindex="-1"></div>';
        $('.ag-header-cell-label').eq(0).append(checkAllHtml);

        $(document).on('click', '#checkAllCheckbox', function () {
            let checking = 'checking';
            let checkClass = "ag-checked";
            $('#divCheckAll').toggleClass(checkClass);

            var gridOptionApi = gridOptions.api;

            if ($(this).hasClass(checking)) {
                $(this).removeClass(checking);
                gridOptionApi.forEachNode(function (rowNode) {
                    rowNode.setSelected(false);
                });
            } else {
                $(this).addClass(checking);
                gridOptionApi.forEachNode(function (rowNode) {
                    rowNode.setSelected(true);
                });
            }
        });
    });
</script>

Use header check box for select all in infinite scolling using ag-grid angular 4

1 Answers1