Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
150
"Select All" with Remote Paging
posted

Hi, 

I realize that this is a known limitation. Select All will not work across all pages when Remote Paging is enabled; however, this is causing some major problems. Remote Paging is necessary in our situation as we are dealing with more than 10,000 rows. There aren't many cases where we would need to "select all" rows, but "deselecting all" is critical. When a user has a row checked buried within one of the pages it is extremely difficult to find the row that is checked.

I am looking for a solution to this first and foremost. I can try to solve this in a couple ways...

1) I've tried to bind a javascript function to the "select/deselect all" check box so that I could try to programmatically select all rows in the grid DataSource on the client side to no avail. I'd rather not use an external button for aesthetic reasons. Having the "select all" checkbox on top of the column is a natural assumption for the user and there isn't a nice way to hide it. If it is visible the assumption is the user is going to try and use it (to select/deselect all).

2) Is it possible to sort by the "check box" column? I am also using Remote Sorting.

3) Lastly, and this would be most ideal, Is there a way to capture the event of the "select all" checkbox, send the value to the server and set a "Selected" property on the GridDataSource rows? I think this column value could then be used to pprogrammatically select the grid rows in the grid.

Parents
  • 29417
    Offline posted

    7230.Grid_RemotePaging_SelectAll.zip

    Hello ericl, 

    Thank you for posting in our forum. 

    Unfortunately selection is not stored in the Data Source (neither on the client nor on the server side).

    You could however select/deselect a row by its id even if it is not yet available on the client so that when it does become available it is already selected/deselected.

    You could add a custom checkbox to the header (because the default one will be updated when page/selected records change based on the local data, which you will probably not want) and on its value changed event make a remote request to get the ids of the remote records and mark them as selected/deselected via the Selection API methods. For example, on the headerRendered event, hide the default checkbox, add your own and on its value changed get the ids of your remote records and select or deselect all of them:

    var ids = [];
            function headerRenderedHandler(evt, ui) {
                //hide default checkbox
                $(ui.table).find("span[data-chk]").hide();
                //create your own whose state you can update yourself
                $(ui.table).find("span[data-chk]").parent().append("<input id='customCheckBox'></input>");
                $("#customCheckBox").igCheckboxEditor({
                    value: false,
                    valueChanged: function (evt, ui) {
                        var allSelected = ui.newValue;
                        // get all ids from backend records
                        $.get("@Url.Action("GetIDs")", function (data) {
                            for (var i = 0; i < data.length; i++) {
                                $("#Grid").igGridSelection( allSelected ? "selectRowById" : "deselectRowById", data[i]);
                            }
                            ids = data;
                        });
                    }
                });
                    }

     

    Then you can update the state of the header checkbox manually on the related events (dataRendered and rowSelectionChanged) by checking if all remote ids are in the selectedRows collection:

    function dataRenderedHandler(evt, ui) {
                updateHeaderState();
            }
            function selectionChangedHandler(evt, ui) {
                updateHeaderState();
            }
            function updateHeaderState() {
                var rows = $("#Grid").igGridSelection("selectedRows");
                //check if all remote ids are selected
                var allSelected = ids.length > 0 && rows.length === ids.length;
                $("#customCheckBox").igCheckboxEditor("value", allSelected);
            }
    7230.Grid_RemotePaging_SelectAll.zip

     

    I’ve attached a MVC sample for your reference. Let me know if you’re aiming to achieve something similar.

Reply Children