1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to limit "Select All" checkbox to a subset of records?

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

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);
            }
        }
    }

3 Replies
PS Pavithra Subramaniyam Syncfusion Team March 27, 2019 06:07 AM UTC

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, 
 
 
Documentation :  
 
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. 


RW Richard Werning April 2, 2019 02:42 PM UTC

Thank you, consider this closed

PS Pavithra Subramaniyam Syncfusion Team April 3, 2019 04:31 AM UTC

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. 
 


Loader.
Up arrow icon