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

Find selected checkboxes

Hi, I have a grid with a checkbox column like so: 
 column.Add(p => p.TeamId).HeaderText("Select").Format("<input type=\"checkbox\" name=\"check_{TeamId}\"  />").Width(40);

In my jQuery function, I would like to get each checked item in the grid, so another form on the page can use it. How do I do this, I can find any examples how to get the checked grid items?

Thanks in advance,


4 Replies

HJ Hariharan J V Syncfusion Team May 28, 2013 12:19 PM UTC

Hi Brad,


Thanks for using Syncfusion products.


We glad to inform you that we have achieved your requirement(‘Checked items’). We have prepared a simple sample to demonstrate this and please refer the below code snippets.


var gridId = "Grid1";

           $("#Save").click(function (e) {

               var tempCheckedRecords = new Array();

               var gridobj = $find('Grid1');

               var checkboxes = $('#' + gridId + ' .check');

               $.each(checkboxes, function (index, element) {

                   if (element.checked == true) {



                       tempCheckedRecords.push(gridobj.jsonrecord[0]); //Here you get the selected checkbox items





And the same can be downloaded from the below link.


Sample: Sample.zip


Please try this, and if it does not meets your requirement, could you please provide more information on this so that we can provide a better solution quickly?.


Please let us know if you have any concerns.



Hariharan J.V.

GQ Greg Quinn June 15, 2013 09:08 PM UTC

What is the point of posting samples in your forums if they get removed from your server?

GQ Greg Quinn June 15, 2013 10:46 PM UTC

I couldn't get the above example working, so here is what I got working....

Step 1 : Add a column to your grid with a checkbox, make sure to give a class named 'chkClass'
Note the {ID} value in the name denotes the name of your record ID in the database.
column.Add(p => p.ID).HeaderText("ID").Format("<input type='checkbox' name='check_{ID}' class='chkClass' />");

Step 2 : Add the following script to your page, what it does is look for all checkboxes in the page with the class 'chkClass', and determines if they have been checked. If they have been checked, they are pushed to the array called checkedRecords. Finally we do an Ajax post to the action in the controller named GetSelectedRecords. Note in order for this to work, make sure you specify the full URL as I have done.

$(document).ready(function() {
        $("#SaveButton").click(function (e) {
            var checkedRecords = new Array();
            $("input.chkClass:checkbox").each(function (index, element) {
                if (element.checked == true) {
                    var recordId = $(this).attr('name').replace('check_', '');

                type: 'post',
                url: "http://localhost/MyController/GetSelectedRecords",
                data: { "checkedRecords": Sys.Serialization.JavaScriptSerializer.serialize(checkedRecords) },
                datatype: 'html'

Step 3 : Add the GetSelectedRecords action in your controller, passing in the checkedRecords array..

        public ActionResult GetSelectedRecords(string checkedRecords)
            //Deserialize checkRecords into an array of ints
            var selectedRecords = new JavaScriptSerializer().Deserialize(checkedRecords, typeof(int[]));

            var data = MyRepository.GetAllRecords();
            if (this.HttpContext.Request.IsAjaxRequest())
                return PartialView("_MyGrid", data);
                return View("Index", data);

SS Satheeskumar S Syncfusion Team June 18, 2013 09:13 AM UTC

Hi Greg,



Thanks for using Syncfusion Products.



We glad to inform you that your requirement can be achieved using the below code snippet.




column.Add("Check").Format("<input type='checkbox' name='check_{ItemId}' class='chkClass' />");




$("#SelectedRecordsPKey").click(function (e) {


            var params = {};

            var gridobj = $find('Grid1');

            var checkboxes = $('.chkClass');


            //Getting selected check box records

            $.each(checkboxes, function (index, element) {

                     if (element.checked == true)


                              var recordId = $(this).attr('name').replace('check_', '')

                              params["keys[" + index + "]"] = recordId;




                       type: 'post',

                       url: "Home/SelectedRowsAction",

                       datatype: 'json',

                       data: params,

                       success: function (data) {

                               return data;








public JsonResult SelectedRowsAction(List<int> keys)


            return Json(keys); 



For your convenience we have attached a sample. Could you use that sample and get back to us if you have any queries.



Let us know if you have any concerns.





Satheeskumar S

SelectedRecordsKeyAtPost (2)_beb197d4.zip

Live Chat Icon For mobile
Up arrow icon