Checkbox selection

[Martin Hoyle]

Hi

I have managed to add a checkbox column using a template

 col.HeaderText("Remove").Template(true).Template("#checkboxTemplate").Width(50).Add();

</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.

Regards

Martin

[Venkatesh Ayothi Raman]

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: 

<Grid> 

 

<input type="button" id="btn" value="getSelectedRecords"/>  

 

@(Html.EJ().Grid<object>("UserGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowScrolling() 

         .AllowPaging()    /*Paging Enabled*/ 

            .SelectionType(SelectionType.Multiple) 

              

              . . . 

 

                       .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*/ 

        } 

         

      

    //TemplateRefresh 

 

        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; 

        } 

 

//ActionBegin 

        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 

            } 

        } 

 //ActionComplete 

 

 

        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++) { 

 

                

                rowID.push(selected[count]["OrderID"]); 

 

            } 

            ej.distinct(rowID); 

 

            return rowID; // Returns the all selected row primarykey value 

        } 

 

</script> 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/SampleGrid1698601193 

Help document: 

1)Column template: http://help.syncfusion.com/aspnetmvc/grid/columns?#column-template 

2)ActionBegin: http://help.syncfusion.com/js/api/ejgrid#events:actionbegin 

3)ActionComplete: http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete 

4)TemplateRefresh: http://help.syncfusion.com/js/api/ejgrid#events:templaterefresh 

Regards, 

Venkatesh Ayothiraman. 

[Martin Hoyle]

Hi

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

Regards

Martin

[Madhu Sudhanan P]

Hi Martin, 

We are glad that the provided solution worked for you.  

Regards, 

Madhu Sudhanan P.