We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143555 Mar 26,2019 02:54 PM UTC Apr 3,2019 04:31 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Richard Werning
Asked On March 26, 2019 02:54 PM UTC

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 [Syncfusion]
Replied On 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. 


Richard Werning
Replied On April 2, 2019 02:42 PM UTC

Thank you, consider this closed

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon