How to limit "Select All" checkbox to a subset of records?

[Richard Werning]

I'm trying to get the grid to function so that when a user clicks the "Select All" checkbox that can be added, only some records are selected. In this example, I only want to select the records that have a "Prefix" assigned.  But no matter how I set up the javascript, it still ends up selecting each row.  The only examples I've been able to find in the forums have to do with EJ1, we're using EJ2 essential. 

With my grid defined as:

<div class="row">

    @(Html.EJS().Grid<PersonVm>("PersonGrid")

          .DataSource(ds => { ds.Url(Url.Action("LoadRecords")).UpdateUrl(Url.Action("Edit")).InsertUrl(Url.Action("Create")).Adaptor("UrlAdaptor"); }) // .RemoveUrl(Url.Action("Delete"))

          .Columns(col => {

              col.Field(p => p.Id).IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();

              col.Type("checkbox").Width(50).Add();

              col.Field("Prefix").HeaderText("Prefix").Type("string").Add();

              col.Field("FirstName").HeaderText("First tName").Type("string").Add();

              col.Field("LastName").HeaderText("Last Name").Type("string").Add();

              col.Field("Suffix").HeaderText("Suffix").Add();

              col.Field("PhoneNumber").HeaderText("Phone Number").Type("string").ValueAccessor("formatPhoneNumber").Add();

              col.Field("Birthday").HeaderText("Birthday").Type("date").Format("yMd").Add();

              col.Field("DateCreated").HeaderText("Date: yMd").Type("date").Format("yMd").Add();

          })

          .RowSelecting("rowSelecting")

          .Render()

    )

</div>

using Javascript, how can I limit the selected rows?

    function rowSelecting(args) {

        console.log('rowSelecting');

        if (args.isCtrlPressed == true && args["rowIndexes"] != null) {

            console.log('Select All');

            var gridObj = document.getElementById("PersonGrid").ej2_instances[0];

            args.rowIndexes = [];

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

                if (gridObj.currentViewData[i].Prefix != null)

                    args.rowIndexes.push(i);

            }

        }

    }

[Pavithra Subramaniyam]

Hi Richard, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your requirement. We suggest you to use the “selectRows” method of Grid to achieve this requirement. We have prepared a sample based on your requirement, and we are attaching the sample for your convenience. Please download the sample from the link below, 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1077977117 

 

Documentation :  

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

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

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

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

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

 

In the above sample, we have selected the rows only when the “CustomerID” column value is “ANTON”. We have initially fetched the rows with this value “ANTON” by using the “RowDataBound” event of Grid. And in the “Created” event of Grid, we have bind a “click” event to the selectAll checkbox. When the header “selectAll” checkbox is clicked, it will trigger the click event handler and there we will be calling the “selectRows” method to select the rows with value “ANTON”. If already selection is appied, then we will call the “clearSelection()” method to clear the selection in Grid. And also we have bound the “RowSelecting” event of Grid to cancel the default selection which takes place when clicking on the “selectAll checkbox”. Please refer the code example below, 

 

 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 

    { 

        ... 

        col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    }).AllowPaging().RowSelecting("rowSelecting").Created("created").RowDataBound("rowDataBound").Render() 

 

 

    <script> 

        var selIndex = []; 

        function rowDataBound(args) { 

            if (args.data['CustomerID'] == 'ANTON') { 

                selIndex.push(parseInt(args.row.getAttribute('aria-rowindex'))); // push the row index when match data 

            } 

        } 

       function rowSelecting(args) { 

            if (args.target && args.target.parentElement.classList.contains("e-checkbox-wrapper") && args.data['CustomerID'] != 'ANTON') {  

                args.cancel = true;           //Cancels the default select all rows action 

            } 

        } 

        function created(args) { 

            document.getElementsByClassName("e-checkselectall")[0].nextSibling.addEventListener('click', function (e) {//Bind the click event to selectAll checkbox 

                if (!document.getElementsByClassName("e-checkselectall")[0].checked) { 

                    this.selectRows(selIndex);   //Select the specific rows in Grid 

 

                    setTimeout(function () { 

                        document.getElementsByClassName("e-checkselectall")[0].checked = true; 

                    }, 1); 

                } 

                else { 

                    this.clearSelection();       //Clear the selection in Grid 

                    setTimeout(function () { 

                        document.getElementsByClassName("e-checkselectall")[0].checked = false; 

                    }, 1); 

                } 

            }.bind(this)) 

        } 

    </script> 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

[Richard Werning]

Thank you, consider this closed

[Pavithra Subramaniyam]

Hi Richard,  

Thanks for your update. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.