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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Checkbox select all event

Checkbox select all event

Hi

I have a grid defined
<script type="text/javascript">
        var selectedIds;
        var rowID = [];
        function select(args) {
            var id = args.data.ID;
            var index = rowID.indexOf(id);
            if (index > -1) {
                rowID.splice(index, 1);
            }
            else {
                rowID.push(id);
            }
            $("#selectedIds").val(rowID.toString());

        }
</script>

            <input id="selectedIds" name="selectedIds" type="hidden" value="" />
            @(Html.EJ().Grid<coursedelegate>("UserGrid")
            .Datasource(Model.delegates)
            .AllowPaging()
            .AllowTextWrap()
            .AllowSelection()
            .SelectionType(SelectionType.Multiple)
            .ClientSideEvents(eve => eve.RowSelecting("select"))
            .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Both); })
            .Columns(col =>
            {
                col.Type("checkbox").Width(50).Add();
                col.Field("ID").Visible(false).IsPrimaryKey(true).Add();
                col.Field("First_Name").HeaderText("First Name").Width(100).Add();
                col.Field("Last_Name").HeaderText("Last Name").Width(100).Add();
                col.Field("Passed").HeaderText("Passed").Width(50).Add();
                col.Field("Certificate_Number").HeaderText("Cert No.").Width(50).Add();
    
            })
            )

if i select individual rows all works fine but if i select the checkbox in the header - to select all rows i only get an event RowSelecting for the first row - i would expect to get an event for each row.
Should i be using a differant event for the select all checkbox ?

Regards

Martin


3 Replies
VA Venkatesh Ayothi Raman Syncfusion Team March 22, 2017 10:17 AM UTC

Hi Martin, 
Thanks for contacting Syncfusion support. 

Do you want to trigger RowSelecting event for each row while check the header checkbox in Checkbox column? if so, it may cause the performance issue while grid has large number of records and its takes little bit more time to execute.  
We went through your code example that you have shared for us and we suspect that you want to access the primary key field value for each selected row. If so, we suggest you to use RowSelected, Create event and built-in API of getSelectedRecords. We can get the selected records primary key field like as follows, 
Code example: 
@Grid 
 
@(Html.EJ().Grid<object>("FlatGrid") 
            .AllowPaging() 
 
                 
            .Columns(col => 
            { 
                col.Type("checkbox").Width(70).Add(); 
                . . . 
            }) 
            .ClientSideEvents(eve=>eve.Create("create").RowSelected("rowSelected").ActionComplete("actionComplete"))  
        ) 
 
//Code example using by your code snippet 
@Create event 
<script type="text/javascript"> 
 
    //Create event in Grid 
    function create(args) { 
        //Bind the change event for header checkbox 
        $(".e-checkselectall").change(function () { 
            var gridObj = $("#Grid").ejGrid("instance"),selectedRecords=gridObj.getSelectedRecords(),len =gridObj.getSelectedRecords().length, rowID=[]; 
            if (len > 0) { 
                for (var i = 0; i < len; i++) { 
                    var id = selectedRecords[i].OrderID; 
                    var index = rowID.indexOf(id); 
                    if (index > -1) { 
                        rowID.splice(index, 1); 
                    } 
                    else { 
                        rowID.push(id); 
                    } 
                    $("#selectedIds").val(rowID.toString()); 
                } 
            } 
        }); 
     
    }       
</script> 
 
//Simplest way to get the primary key field value for single selection or multiple selection 
 
<script type="text/javascript"> 
    //Create event in Grid 
    function create(args) { 
        //Bind the change event for header checkbox 
        $(".e-checkselectall").change(function () { 
            var gridObj = $("#Grid").ejGrid("instance"),selectedRecords=gridObj.getSelectedRecords(), rowID=[]; 
            rowID = ej.DataManager(selectedRecords).executeLocal(new ej.Query().select("OrderID"));//we can simply get the primary key field values for selected records using Data manager query 
        }); 
     
    } 
 
    } 
</script> 

Please refer to the Help documentation for more information, 
Help documentation: 

We can also get the primary key field value for selected records while paging operation by using actionComplete event and requestType as paging. Please refer to the following code example and Help documentation for more information, 
Code example: 
@Grid 
 
@(Html.EJ().Grid<object>("FlatGrid") 
            .AllowPaging() 
 
                 
            .Columns(col => 
            { 
                col.Type("checkbox").Width(70).Add(); 
                . . . 
            }) 
            .ClientSideEvents(eve=>eve.Create("create").ActionComplete("actionComplete")) 
 
        ) 
 
//Code example using by your code snippet 
 
@action complete event 
function actionComplete(args) { 
 
        if (args.requestType == "paging") { 
            var  selectedRecords = this.getSelectedRecords(), len = this.getSelectedRecords().length, rowID = []; 
            if (len > 0) { 
                for (var i = 0; i < len; i++) { 
                    var id = selectedRecords[i].OrderID; 
                    var index = rowID.indexOf(id); 
                    if (index > -1) { 
                        rowID.splice(index, 1); 
                    } 
                    else { 
                        rowID.push(id); 
                    } 
                    $("#selectedIds").val(rowID.toString()); 
                } 
            } 
        } 
    } 
 
//Simplest way to get the primary key field value for single selection or multiple selection 
<script type="text/javascript"> 
     
    function actionComplete(args) { 
 
        if (args.requestType == "paging") { 
            var  selectedRecords = this.getSelectedRecords(),rowID = []; 
            rowID = ej.DataManager(selectedRecords).executeLocal(new ej.Query().select("OrderID"));//we can simply get the primary key field values for selected records using Data manager query 
        } 
    } 
</script> 

 If we misunderstood your requirement, then could you please share more details about your requirement? 
Regards, 
Venkatesh Ayothiraman. 


MH Martin Hoyle March 22, 2017 05:35 PM UTC

Hi

Thanks for tht information i have now managed to get it to work.
Only 1 change the value for len is not the length of the selected records it seems to be the length of the grid so a test for null seems to solve that problem see below

            $(".e-checkselectall").change(function () {
                var gridObj = $("#UserGrid").ejGrid("instance"), selectedRecords = gridObj.getSelectedRecords(), len = gridObj.getSelectedRecords().length, rowID = [];
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (selectedRecords[i] != null) {
                            var id = selectedRecords[i].ID;
                            var index = rowID.indexOf(id);
                            if (index > -1) {
                                rowID.splice(index, 1);
                            }
                            else {
                                rowID.push(id);
                            }
                            $("#selectedIds").val(rowID.toString());
                        }
                    }
                }
            });

VA Venkatesh Ayothi Raman Syncfusion Team March 23, 2017 06:09 AM UTC

Hi Martin, 
Thanks for the update. 
We are very happy to hear that your requirement is achieved.  
Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon