Checkbox all for current page

[Kuan Long Khiu]

Hi,

Is that possible to select current page only when click checkbox all? Currently the checkall is selecting all the rows.

Regards,

Kuan Long

[Nithya Sivaprakasam]

Hi Kuan Long,

Greetings from Syncfusion support.

Query: Checkbox all for the current page only.

Yes. It is possible to select only the current page records while clicking the checkbox all. For your reference, we have provided a sample for your reported query. This sample demonstrates the selection functionality of the Grid using checkbox selection, To select and unselect all rows use the header checkbox. To select/unselect a particular row, click the desired row. Delete one or more records using the toolbar delete button.

In this sample, we have used batch editing because it can handle bulk add/edit/delete actions. To enable Batch edit, set the editSettings.mode as Batch. In data grid, we used the batchDelete event to hide the editSettings.confirmDialogBox. In serverside(BatchUpdate) method, we have delete the selected records and updated on UI with changes.

We have attached the sample code and documentation for your reference.

Sample Code:

Index.cshtml

 

@{

    ViewData["Title"] = "Home Page";

}

@Html.AntiForgeryToken()

<ejs-grid id="Grid" batchDelete="batchDelete" allowPaging="true" load="onLoad" actionComplete="actionComplete"  toolbar="@(new List<string>() {"Delete"})">

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" batchUrl="/Home/BatchUpdate"></e-data-manager>

 

    <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch"></e-grid-editSettings>

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

    <e-grid-pagesettings pageCount="2"></e-grid-pagesettings>

 

    <e-grid-columns>

        <e-grid-column type="checkbox" width="50" ></e-grid-column>

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script>

    function onLoad()

    {

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

    }

 

    function batchDelete() {

        var grid = document.getElementById("Grid").ej2_instances[0];

        grid.editSettings.showConfirmDialog = false;

        grid.endEdit();     

    }

    function actionComplete(args) {

        debugger;

    }

   

</script>

 

 

HomeController.cs

 

 

public ActionResult BatchUpdate([FromBody]CRUDModel batchmodel)

        {

            if (batchmodel.Changed != null)

            {

                for (var i = 0; i < batchmodel.Changed.Count(); i++)

                {

 

                    var ord = batchmodel.Changed[i];

                    Orders val = Orders.getAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();

                    val.OrderID = ord.OrderID;

                    val.EmployeeID = ord.EmployeeID;

                    val.CustomerID = ord.CustomerID;

                    val.Freight = ord.Freight;

                    val.OrderDate = ord.OrderDate;

                    val.ShipCity = ord.ShipCity;

                    val.ShipCountry = ord.ShipCountry;

                }

            }

 

            if (batchmodel.Deleted != null)

            {

                for (var i = 0; i < batchmodel.Deleted.Count(); i++)

                {

                    Orders.getAllRecords().Remove(Orders.getAllRecords().Where(or => or.OrderID == batchmodel.Deleted[i].OrderID).FirstOrDefault());

                }

            }

 

            if (batchmodel.Added != null)

            {

                for (var i = 0; i < batchmodel.Added.Count(); i++)

                {

                    Orders.getAllRecords().Insert(0, batchmodel.Added[i]);

                }

            }

            var data = Orders.getAllRecords().ToList();

            return Json(data);

 

        }

 

Documentation:

https://ej2.syncfusion.com/aspnetcore/Grid/CheckboxSelection#/fluent

https://ej2.syncfusion.com/documentation/grid/editing/batch-editing/

Please get back to us if you need further assistance on this.

Regards,

Nithya Sivaprakasam.

Attachment: CheckBoxEJ2_4c9423a1.zip

[Kuan Long Khiu]

HI  Nithya Sivaprakasam,

Thanks for your example and reply. Can we do it without retrieving data from backend controller? What I'm doing is passing all the record to the datagrid in javascript.

For example:

<script>

var grid = document.getElementById('grid').ej2_instances[0];

         grid.dataSource = [{"column1":"AAA","column2":"BBB","column3":"CCC"}, { "column1":"AAA","column2":"BBB","column3":"CCC" }}];

</script>

Regards,

Kuan Long

[Nithya Sivaprakasam]

Hi Kuan Long,

Thanks for your update.

Currently, we are checking your query and we will update further details on May 11th, 2022. Until then we appreciate your patience.

Regards,

Nithya Sivaprakasam.

[Kuan Long Khiu]

Hi  Nithya Sivaprakasam.

Any update?

Regards,

K

[Pavithra Subramaniyam]

Hi Kuan Long,

We are sorry for the delay.

Your requirement can be achieved for local data by dynamically selecting the current page rows(on performing the paging action) using the Grid’s selectRowsByRange method inside the
actionComplete event when paging is performed. The pages for which the selection needs to be performed can be identified by storing the page index in a global array variable when the check all action is performed.

This is demonstrated and explained in the below code snippet,

<ejs-grid id="Grid"  dataSource="ViewBag.dataSource" allowPaging="true" checkBoxChange="checkBoxChange" actionComplete="onGridActionComplete">

            <e-grid-columns>

                .      .     .

            </e-grid-columns>

      </ejs-grid>

<script>

var pages = [];

 

// Check all click event function 

function checkBoxChange(args) {

  var grid = document.getElementById('Grid').ej2_instances[0];

  var pageIndex = grid.pageSettings.currentPage;

  // Store/remove the current page value in a global array based on check state  

  if (args.target.classList.contains("e-check")) {

    var pageIndex = pages.indexOf(pageIndex);

    pages.splice(pageIndex, 1);

  } else {

    pages.push(pageIndex);

  }

}

 

// Grid’s actionComplete event handler 

function onGridActionComplete(args) {

  var grid = document.getElementById('Grid').ej2_instances[0];

  // Check if the action performed is ‘paging’ and if the current page has been stored in global variable 

  if (args.requestType === "paging" && pages.indexOf(args.currentPage) !== -1) {

    // the current page rows are selected 

    grid.selectRowsByRange(0, grid.pageSettings.pageSize - 1);

  }

} 

</script>

API links:
https://ej2.syncfusion.com/javascript/documentation/api/grid/#checkboxchange

                  https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete

             
  https://ej2.syncfusion.com/javascript/documentation/api/grid/#selectrowsbyrange 

Note: The persistSelection need not be enabled for this as we are dynamically persisting the selection for required page rows at the sample level. Using the above approach the dynamic persist selection is done only when the check all action is performed and so the individual row check will not be persisted.

Please get back to us if you require any further assistance.

Regards,

Pavithra S