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 selection

Thread ID:

Created:

Updated:

Platform:

Replies:

125323 Aug 8,2016 04:01 PM Aug 10,2016 12:12 AM ASP.NET MVC 3
loading
Tags: Grid
Martin Hoyle
Asked On August 8, 2016 04:01 PM

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 [Syncfusion]
Replied On August 9, 2016 03:25 AM

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> 
 




Help document: 


Regards, 
Venkatesh Ayothiraman. 


Martin Hoyle
Replied On August 9, 2016 02:43 PM

Hi

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


Regards

Martin


Madhu Sudhanan P [Syncfusion]
Replied On August 10, 2016 12:12 AM

Hi Martin, 

We are glad that the provided solution worked for you.  

Regards, 
Madhu Sudhanan P. 


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.

;