Checkbox select all only for current page Ajax data

[DD]

Hi,

I'm trying to use checkboxes on my grid and want to use the select all function.

When I click on the select all checkbox on the column header, for some reason it selects all items on every single page instead of just the current page.

You can see this happening on the current demo screen as well:

https://ej2aspnetcore.azurewebsites.net/aspnetcore/grid/checkboxselection#/fluent

Click on the header checkbox to select all items, then navigate to the second page, and everything on the second page will automatically be selected too.

Is there a way to prevent this from happening so when you tick the column, it only selects everything for the current page? Moving to a different page should prevent all items on that page from being selected as well - until the user presses the select all checkbox again.

I've seen a forum post here regarding a similar case as me:

https://www.syncfusion.com/forums/174829/checkbox-all-for-current-page

And downloading the solution and running it shows that it's working as expected, only the current page is selected.

However I cannot figure out what part of the code is actually modifying this behaviour as I am doing the exact same thing, but it doesn't work on my case.

My grid is as follows:

<e-grid id="myDataGrid"

        allow-paging="true"

        allow-sorting="true"

        allow-filtering="true"

        load="dataFunctions.setQueryParams"

        data-bound="dataFunctions.onDataBound">

    <e-data-manager url="/Api/Data/GridEndpoint"

                    adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-filtersettings type="FilterBar"

                           mode="Immediate"

                           immediateModeDelay="250"></e-grid-filtersettings>

    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>

    <e-grid-selectionSettings type="Multiple"

                              persistSelection="true"

                              checkboxOnly="true"></e-grid-selectionSettings>

    <e-grid-sortsettings columns="@initialSortConfig"></e-grid-sortsettings>

    <e-grid-columns>

        <e-grid-column type="checkbox"

                       width="18"></e-grid-column>

        <e-grid-column field="ItemId"

                       isPrimaryKey="true"

                       visible="false"></e-grid-column>

        <e-grid-column field="Date"

                       headerText="Date"

                       width="150"

                       template="#dateTemplate"></e-grid-column>

        <e-grid-column field="ReferenceNumber"

                       headerText="Reference"

                       width="150"

                       template="#refTemplate"></e-grid-column>

    </e-grid-columns>

</e-grid>

I'm currently using V27.1.48.

[Aishwarya Rameshbabu]

Hi,

Greetings from Syncfusion support.

Based on the provided information, it has been observed that you wanted to prevent the selection of all page records upon clicking the header checkbox while utilizing the persist selection feature in the Grid. By default, when persist selection is enabled in the Syncfusion Grid, clicking the header checkbox selects all the records in the Grid. However, we have addressed your requirement to select only the current page records by overriding the internal methods `updatePersistSelectedData` and `setRowSelection` of the selection module during the Grid component’s `created` event. For more detailed information, please refer to the code example, sample, and video demonstration provided below.

Index.cshtml

<div>

    <ejs-grid id="grid01" allowPaging="true" allowSorting="true" allowFiltering="true" created="created">

        ……………………………………………

    </ejs-grid>

</div>

<script>

function created() {

    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

  (grid.selectionModule).updatePersistSelectedData = function (checkState) {

    if (this.parent.isPersistSelection) {

      var rows = this.parent.getRows();

      for (var i = 0; i < rows.length; i++) {

        this.updatePersistCollection(rows[i], checkState);

      }

      if (this.parent.checkAllRows === 'Uncheck') {

        this.setRowSelection(false);

        this.persistSelectedData = this.parent.getDataModule().isRemote()

          ? this.persistSelectedData

          : [];

      } else if (this.parent.checkAllRows === 'Check') {

        this.setRowSelection(true);

        this.persistSelectedData =

          !this.parent.getDataModule().isRemote() && !this.isPartialSelection

            ? this.parent.groupSettings.columns.length

              ? this.parent

                  .getDataModule()

                  .dataManager.executeLocal(

                    this.parent.getDataModule().generateQuery()

                  )

                  .records.slice()

              : this.parent

                  .getDataModule()

                  .dataManager.executeLocal(

                    this.parent.getDataModule().generateQuery()

                  )

                  .slice()

            : this.persistSelectedData;

      }

    }

  };

  (grid.selectionModule).setRowSelection = function (state) {

    if (!this.parent.getDataModule().isRemote()) {

      if (state) {

        if (

          this.isPartialSelection &&

          (this.parent.enableVirtualization ||

            this.parent.enableInfiniteScrolling)

        ) {

          var rowObj = this.parent.getRowsObject().filter(function (e) {

            return e.isSelectable;

          });

          for (var _i = 0, rowObj_1 = rowObj; _i < rowObj_1.length; _i++) {

            var row = rowObj_1[_i];

            this.selectedRowState[row.data[this.primaryKey]] = true;

          }

        } else {

          var selectedData = this.isPartialSelection

            ? this.parent.partialSelectedRecords

            : this.parent

                .getDataModule()

                .dataManager.executeLocal(

                  this.parent.getDataModule().generateQuery()

                );

          if (this.parent.groupSettings.columns.length) {

            for (

              var _a = 0,

                _b = this.isPartialSelection

                  ? selectedData

                  : selectedData.records;

              _a < _b.length;

              _a++

            ) {

              var data = _b[_a];

              this.selectedRowState[data[this.primaryKey]] = true;

            }

          } else {

            for (

              var _c = 0, selectedData_1 = selectedData;

              _c < selectedData_1.length;

              _c++

            ) {

              var data = selectedData_1[_c];

              this.selectedRowState[data[this.primaryKey]] = true;

            }

          }

        }

      } else {

        this.selectedRowState = {};

      }

    }

  };

}

</script>

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 194839SampleAndVideo_ebeae67a.zip

[DD]

Hi Aishwarya,

Thanks for getting back to me.

I'm a bit confused as to what's happening here.

If you have a look at the following link's solution:

https://www.syncfusion.com/forums/174829/checkbox-all-for-current-page

It does exactly what I am looking for.

It has ajax grid and selecting all only selects the items on the current grid and nothing else.

It has no extra code or functionality on it and it just works.

However, if I try the same thing as in the example to my source, it doesn't work and selects all items on every page.

Can you let me know what the difference is between the solution on the above link and why that works without any extra work arounds?

Thanks 

Additional question.

On the example that you've provided, it works well when you're selecting all items for the selected page. 

However, when you deselect all items from the column menu - ALL items are deselected instead of just deselecting the current page.

This also happens on the other example link I sent above.

Is there a way to prevent this happening so only the items on the current page are deselected?

Thanks 

[Aishwarya Rameshbabu]

Hi,

The sample code in the forum post refers to a feature from an earlier version of the Syncfusion EJ2 Grid. In recent updates, Syncfusion has enhanced the persistSelection feature, where selecting or deselecting the header checkbox by default selects or deselects all records across all pages in the Grid. However, this global selection behavior complicates the control of selection or deselection on a page-by-page basis, as the Grid’s default functionality does not limit record selection to the currently visible page. Consequently, the custom solution provided in our previous update does not support the functionality of deselecting records based on the current page.

Attempting to alter the Grid’s default behavior to enable page-based selection could lead to significant performance issues, especially since this customization would disrupt the built-in selection logic, potentially causing problems such as flickering or slow response times within the Grid. Given these constraints, it is recommended to utilize the persistSelection feature as designed for selecting records across all pages.

Regards,

Aishwarya R