Select only the rows of the active page

[Manuel Caballero]

Hello,

I want to know if there is a way to only select the rows of the active page with the checkbox of the header of the column of selection. I don't mind if I have to use javascript o if is possible with the grid configuration.

Thanks.

[Pavithra Subramaniyam]

Hi Manuel Caballero,

By default, the "Select All" checkbox selects all records in the data source, not just those on the current page. However, to meet your requirement, you can customize the default checkbox column by adding a custom checkbox within the headerTemplate property. In the change handler for this custom checkbox, you can manage the selection or deselection of rows on the current page using the selectRows method.

Refer to the code example, API documentation, and sample link below for more details. In the provided sample, rows are selected or deselected within the checkbox change event. Additionally, the checkbox state is reset during paging based on the selection using the actionBegin and actionComplete event.

@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging().Height("348px").Columns(col =>

{

col.Type("checkbox").Width("50").HeaderTemplate("#headerTemplate").Add();

 

}).HeaderCellInfo(“headerCellInfo”).ActionBegin(“actionBegin”).ActionComplete(“actionComplete”).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()

 

 

<script id="headerTemplate" type="text/x-template">

        <input id="chk" />

    </script>

 

 

 

function headerCellInfo(args) {

  if (args.cell.column.type == 'checkbox') {

    var input = args.node.querySelector('#chk');

    let chkBox = new ej.buttons.CheckBox({

      change: changeHandler,

    });

    chkBox.appendTo(input);

  }

}

 

// select/unselect current page records

function changeHandler(args) {

  var length = grid.currentViewData.length;

 

  if (args.checked) {

    grid.selectRowsByRange(0, length - 1);

  } else {

    grid.selectRows([]);

  }

}

function actionBegin(args) {

  if (args.requestType == 'paging') {

    grid.selectionModule.isInteracted = false;

  }

}

 

// reset the checkbox based on the selectino

function actionComplete(args) {

  if (args.requestType == 'paging') {

    grid.element.querySelector('#chk').ej2_instances[0].checked =

      args.rows.filter((row) => row.isSelected).length ==

      grid.currentViewData.length;

  }

}

 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/selection/check-box-selection#hide-selectall-checkbox-in-column-header

Regards,

Pavithra S