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.
Unfortunately, activation email could not send to your email. Please try again.

Checkbox select all event

Thread ID:

Created:

Updated:

Platform:

Replies:

129486 Mar 21,2017 04:47 PM Mar 23,2017 02:09 AM ASP.NET MVC 3
loading
Tags: Grid
Martin Hoyle
Asked On March 21, 2017 04:47 PM

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


Venkatesh Ayothi Raman [Syncfusion]
Replied On March 22, 2017 06:17 AM

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. 


Martin Hoyle
Replied On March 22, 2017 01:35 PM

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On March 23, 2017 02:09 AM

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


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.

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.

;