Find selected checkboxes

[Brad Jeffery]

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,

Brad

[Hariharan J V]

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.

[Template.aspx]

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

                       gridobj.selectRow($(element).parents("tr:first")[0].rowIndex);

                       gridobj.setJSONRecord();

                       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.

 

Regards,

Hariharan J.V.

[Greg Quinn]

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

[Greg Quinn]

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_', '');

                    checkedRecords.push(recordId); 

                }

            });

            $.ajax({

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

 [AcceptVerbs(HttpVerbs.Post)]

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

            else

                return View("Index", data);

        }

[Satheeskumar S]

Hi Greg,

 

 

Thanks for using Syncfusion Products.

 

 

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

 

[Cshtml]

 

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

 

[Script]

 

$("#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;

                      }

            });

            $.ajax({

                       type: 'post',

                       url: "Home/SelectedRowsAction",

                       datatype: 'json',

                       data: params,

                       success: function (data) {

                               return data;

                       }

            });

});

 

[Controller]

 

[AcceptVerbs(HttpVerbs.Post)]

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.

 

 

Regards,

 

Satheeskumar S

SelectedRecordsKeyAtPost (2)_beb197d4.zip