using Grid Toolbar buttons to check/uncheck a a checkbox field on a grid

[pbassey]

I have found the example to check/uncheck the entire column, but I am looking for a way to use a button(s) to check a checkbox cell when the checkbox value starts with a letter or set of letters (e.g. Starts with A, Starts with A45, etc).  Are there any examples of buttons doing this?  Below is the code I gave right now for the grid:

    var colModel = [
        {
            title: "Activity",
            minWidth: '30%',
            dataIndx: "FASActivity",
            type: 'checkbox',
            cbId: 'chk',
            hidden: false,
            useLabel: false
        },
        {
            dataIndx: 'chk',
            dataType: 'bool',
            cb: { header: true },
            hidden: true,
            editable: function (ui) {
                //to make checkboxes editable selectively.
                return !(ui.rowData.Activity.length > 10);
            }
        },
        { title: "Description", dataType: "String", dataIndx: "FASDesc", editable: false, minWidth: '30%', },
        { title: "Region", dataType: "String", dataIndx: "Region", editable: false, minWidth: '10%', },
        { title: "Country", dataType: "string", dataIndx: "Country", editable: false, minWidth: '10%', },
        { title: "Year", dataType: "String", dataIndx: "YearSplit", editable: false, minWidth: '10%', }
    ];
    //Define Data Mode;
    var dataModel = {
        location: "remote", //server side call
        dataType: "jsonp",
        method: "GET",
        url: "/CCRSearch/FAS/grid_jsonp", //URL
        getData: function (dataJSON, yearval) {
            var data = dataJSON.data;
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
        }
    };
    var pageModel = {
        type: "remote", //Paging remote
        rPP: 500, strRpp: "{0}", //default paging parameters
    }

    var grid = $("#grid_jsonp").pqGrid({
        height: 550,
        scrollModel: { autoFit: true },
        dataModel: dataModel,
        colModel: colModel,
        auroRow: false,
        numberCell: { show: false },
        resizable: true,
        filterModel: {
            on: true,
            header: false,
            type: 'remote',
            menuIcon: false,
            mode: "AND"
        },
        pageModel: pageModel,
        toolbar: {
            style: 'text-align:center;',
            items: [

                {
                    type: 'button',
                    label: 'ATP',
                    listener: function () {
                        // check all Activities that start with 'A19'
                        EntityFilter('ATP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'FMD',
                    listener: function () {
                        // check all Activities that start with 'F'
                        EntityFilter('FMD');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'MAP',
                    // check all Activities that start with 'M'
                    listener: function () {
                        EntityFilter('MAP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'RAPP',
                    // check all Activities that start with 'A24'
                    listener: function () {
                        EntityFilter('RAPP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'RAPP2',
                    // check all Activities that start with 'A25'
                    listener: function () {
                        EntityFilter('RAPP2');
                    }
                }
            ]
        },

        wrap: true, hwrap: true,
        virtualX: true, virtualY: true,
        complete: function (event, ui) {

            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        }
    });

[paramvir]

It can be done with checkNodes method of Checkbox object: https://paramquery.com/pro/api#method-Checkbox

IN button click event: find the rows from pqgrid matching your criteria: var nodes = grid.pageData().filter(...)

and pass it to grid.Checkbox( dataIndx ).checkNodes ( nodes );

[pbassey]

I am using the following code:

       var grid = $("#grid_jsonp").pqGrid("instance");       
       var matchingRows = grid.pageData().filter(function (row) {
            return row.FASActivity.startsWith("F");
        });

        // Get the row indices of the filtered rows
        var matchingIndices = matchingRows.map(function (row) {
            return grid.getRowIndx({ rowData: row }).rowIndx;
        });
       
        // Use the checkNodes API to check the matching rows
        grid.Checkbox("selected").checkNodes(matchingIndices);

Everything is working correctly expect the last line where the checkNodes function is called.

I am getting the following error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'checkNodes')

I am using v9.x.  Could that be the issue?

[paramvir]

Please use dataIndx of the Checkbox column instead of "selected". and pass matchingRows  instead of matchingIndices

Code: [Select]

grid.Checkbox( "FASActivity" ).checkNodes( matchingRows );


[pbassey]

Your response worked great, Thank you!

I have 2 followup questions -

1. How to I make this button toggle the checkbox on/off.  Right now, it only checks the boxes based on the page filter.

2. I have this javascript function (below) that currently passes a list of rows that remain in the grid (based on grid filtering).  How do I get the list of grid rows that are only checked?

    $("#btnSubmit").click(function () {
        var pFASIDs = "";
        var grid = $("#grid_jsonp").pqGrid("instance");
        var selectedRows = grid.pageData().filter(function (row) {
            return row.FASActivity.length > 1;
        });
        // Extract the IDs of selected rows
        var selectedIDs = selectedRows.map(function (row) {
            return row.FASActivity;
        });
        pFASIDs = selectedIDs.join(","); ;

        window.location.href = '/CCRSearch/Reports/Index?LayoutId=180&IDs=' + pFASIDs;

    });

[paramvir]

1) There are checkNodes and unCheckNodes methods but no toggle function. Checked rows can be found out by checking chk property of rows.

if( rowData.chk ) //checked rows.

you can pass rows to be checked to checkNodes and rows to be unchecked to unCheckNodes

2) You can use either getCheckedNodes() method of Checkbox object or check chk property of individual rows to get list of checked rows.