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

Checkbox selection


I have managed to add a checkbox column using a template


</script>    <input type="checkbox" class="rowCheckbox" /><script type="text/x-jsrender" id="checkboxTemplate">

I need to preserve the checkbox / selection state when the page is changed ( on a multi page grid ).
I also need to maintain a list of the row ID's that have been selected so they can be passed back to my controller.

Do you have a sample that shows this functionality.



3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team August 9, 2016 07:25 AM UTC

Hi Martin, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement by using column template feature and Grid events like ActionBegin, ActionComplete. We can render the template column by using templateRefresh event and we can create an additional property for selectedRecords and selectedrowindexes in Databound event. In this property we can store the selectedrecords as well as selectedRow indexes while performing paging operation. Please refer to the sample, code example and Help document, 
Code example: 
<input type="button" id="btn" value="getSelectedRecords"/>  
         .AllowPaging()    /*Paging Enabled*/ 
              . . . 
                       .ClientSideEvents(eve => eve. ActionComplete("actionComplete"). ActionBegin("actionBegin").DataBound("dataBound").TemplateRefresh("TemplateRefresh")) 
        .Columns(col => 
            col.HeaderText("Checkbox selection").Template(" <input type='checkbox' class='rowCheckbox' />").Width("80px").TextAlign(TextAlign.Center).Add(); 
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
           . . . 
<script type="text/javascript"> 
    //DataBound event     
        function dataBound(args) { 
            $("#UserGrid .rowCheckbox").ejCheckBox({ "change": checkChangeMethod }); 
            this.model.records = {}; /* Additional property for getSelected records*/ 
            this.model.selectedIndex = {}; /* Additional property for getSelected record indexes*/ 
        function TemplateRefresh(args) { 
            $("#UserGrid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChangeMethod }); // Render the Checkbox control in Grid 
 //Checkbox check change 
        function checkChangeMethod(e) { 
            gridObj = $("#UserGrid").data("ejGrid"); 
            var rowCheck = $(".rowCheckbox:checked"); 
            var trueCheckBox = $("#UserGrid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parent("td"); 
            var falseCheckBox = $("#UserGrid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").parent("td"); 
            trueCheckBox.addClass("e-selectionbackground e-active"); 
            trueCheckBox.siblings().addClass("e-selectionbackground e-active"); 
            falseCheckBox.removeClass("e-selectionbackground e-active"); 
            falseCheckBox.siblings().removeClass("e-selectionbackground e-active"); 
            gridObj.multiSelectCtrlRequest = true; 
        function actionBegin(args) { 
            if (args.requestType == "paging") { 
                if (this.selectedRowsIndexes.length > 0) 
                    this.model.records[args.previousPage] = this.getSelectedRecords(); //Store the selected records  
                    this.model.selectedIndex[args.previousPage] = this.selectedRowsIndexes; // Store the selectedRow indexes 
        function actionComplete(args) { 
            if (args.requestType == "paging") { 
                var indx = this.model.selectedIndex[args.currentPage]; // Get the current page selected row indexes 
                for (var i = 0; i < (indx || []).length; i++) { 
                    $("#UserGrid .rowCheckbox").eq(indx[i]).ejCheckBox("model.checked", true) 
                    this.selectRows(indx[i]); // Select the rows for previously selected records 
  //Get All selected records 
        $("#btn").ejButton({ click: "getMergedSelected" }); 
        function getMergedSelected() { 
            var obj = $("#UserGrid").ejGrid("instance"); 
            var r = obj.model.records, selected = []; 
            for (var p in r) 
                ej.merge(selected, r[p]); 
            ej.merge(selected, obj.getSelectedRecords()); 
            var rowID = []; 
            for (count = 0; count < selected.length; count++) { 
            return rowID; // Returns the all selected row primarykey value 

Help document: 

Venkatesh Ayothiraman. 

MH Martin Hoyle August 9, 2016 06:43 PM UTC


Thanks for the sample it works brilliantly -  problem solved!!



MS Madhu Sudhanan P Syncfusion Team August 10, 2016 04:12 AM UTC

Hi Martin, 

We are glad that the provided solution worked for you.  

Madhu Sudhanan P. 

Live Chat Icon For mobile
Up arrow icon