Select all rows programmatically and keep selection

How do I select all rows in my Bootgrid table programmatically with JavaScript?

I've added a button in the action bar and i have a function which is looping through all the rows in the JQuery Bootgrid table.

so far, I'm getting all the rows id (data-row-id) in the table, even on other pages in the bootgrid table.

How do i select all the rows from here and keep the selection programmatically?

Thanks

Code Below:

// JS
<script>
    $(document).ready(function () {
        var count = 0;
        var dt = $("#table1").bootgrid({
            selection: true,
            multiSelect: true,
            keepSelection: true,
            rowSelect: true
        }).on("selected.rs.jquery.bootgrid", function (e, rows) {
            var rowIds = [];
            for (var i = 0; i < rows.length; i++) {
                count++;
            }

            $('#NumSelected').html(count);
            console.log(count);

        }).on("deselected.rs.jquery.bootgrid", function (e, rows) {
            var rowIds = [];
            for (var i = 0; i < rows.length; i++) {
                count--;
            }

            $('#NumSelected').html(count);
            console.log(count);

        });

        var rows = dt.data('.rs.jquery.bootgrid').rows;

        // Get all Ids in the table and log
        for(var i = 0; i < rows.length; i++)
        {
            console.log(rows[i].ID);
        }

        // append button in action bar
        $(".bootgrid-header .actionBar").find('.actions.btn-group').append('<button id="selectAll" class="btn btn-default" type="button" title="Select All Clients Listed"><span class="icon glyphicon glyphicon-saved"></span></button>');


        // Select all rows in table
        // This is not working, I have data paginated in 8 pages (80 rows)
        // and the code below only select the data in the first page

        // I want to select all rows in the table and keep the selection by using jquery bootgrid
        $("#selectAll").click(function () {
            $('#table1 tbody > tr').each(function() {
                $(this).addClass('active').attr('aria-selected', true);
                $(this).find(":checkbox").prop('checked', true);
            });

            // get all selected rows id in array
            var selectedRowsId = $("#table1").bootgrid('getSelectedRows');
            console.log(selectedRowsId);
        });

    });
</script>


// html
<table id="table1">
<thead>
<tr>
<th data-column-id="ID" data-identifier="true" data-type="numeric">ID</th>
<th data-column-id="Name" data-type="string">Name</th>
<th data-column-id="OtherDetails" data-type="string">Other Details</th>
</tr>
</thead>
<tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.OtherDetails</td>
            </tr>
        }
    </tbody>
</table>

First, it's important to set the values for the grid init (as you have already done correctly)

var dt = $("#table1").bootgrid({
        selection: true,
        multiSelect: true,
        keepSelection: true,
        rowSelect: true
        ...

Second, as of bootgrid Version 1.1.0 you can call the "select" method for selecting all items:

$("#yourGridName").bootgrid("select");

In your case:

$("#table1").bootgrid("select");

(in server-side scenario only the loaded items are selectable.)

So for this, you could generate a JS-function and a HTML-Button:

<button onclick="selectAllItems();">Select all loaded Items</button>

function selectAllItems()
{
  $("#table1").bootgrid("select");
}

I've tested it with several pages. All loaded items will be selected and the selection is kept after going forward and backward to several pages.

I'm using the current version of bootgrid: V 1.3.1

In my case, after turning over to a new page I'm loading the new page via AJAX. So only the loaded items could get checked. But the checked checkboxes are kept after loading a new page.

If you want to check certain items, you could select the items with an array of ids:

$("#table1").bootgrid("select", [rowIdsArray]);

For example:

$("#table1").bootgrid("select", [1,3,5,8,9]);

In the bootgrid documentation, it's not very clear, what is meant with "row ids".

I think, it's the "data-row-id" attribute, because the input-tags don't have an id. There is only a class.