checkbox in grid

What I would like to end up with is a simple grid that cannot be edited but with a simple checkbox in the first row.  This checkbox will be able to be checked and unchecked with the mouse.  All checkboxes will be check when loaded.  When the process is complete and the end user has uncheck the boxes that he or she wants then I want to loop through the grid and read the values of the second column based upon the value of the check mark.  The data that I’m using is being pulled from a web service writing JSON from a MS SQL database.  What the best way to do this?

Hello William,

Thank you for contacting us.

I hope that I understand correctly your requirements, if not please let me know what I am missing from your scenario. Below you can find a sample where I have a grid with template column which have checkboxes, and when I press a button I am getting the value from ProductNumber field and I am showing it in alert box. You should use a similar approach.

1. <script type=”text/javascript”>
2.         function getInfo() {
3.             var $grid = $(“#grid1”);
4.             var rowsLength = $grid.igGrid(“allRows”).length;
6.             for (var i = 0; i < rowsLength; i++) {
7.                 var cell = $grid.igGrid(“cellAt”, 0, i)
8.                 var $checkBox = $(cell.children[0]);
10.                 if ($checkBox.prop(“checked”)) {
11.                     alert(“ProductNumber” + $grid.igGrid(“getCellValue”, i, “ProductNumber”));
12.                 }
13.             }
14.         }
16.         function changeState(element, rowId) {
17.             var $checkBox = $(element);
19.             if ($checkBox.prop(“checked”)) {
20.                 $checkBox.attr(‘checked’, ‘checked’);
21.             } else {
22.                 $checkBox.removeAttr(‘checked’);
23.             }
24.         }
25.     </script>
26.     <script type=”text/javascript”>
27.         var products = [
28.             { “id”: 1, “Checked”: true, “ProductNumber”: “0” },
29.             { “id”: 2, “Checked”: true, “ProductNumber”: “1” },
30.             { “id”: 3, “Checked”: true, “ProductNumber”: “2” }
31.         ];
33.         var mytemplate = “<input type=’checkbox’ {{if ${Checked} }} checked {{/if}} onclick=’changeState(this, ${id})’ />”;
34.         $(function () {
35.             $(‘#grid1’).igGrid({
36.                 autoGenerateColumns: false,
37.                 //renderCheckboxes: true,
38.                 autoCommit: true,
39.                 width: ‘500px’,
40.                 columns: [
41.                    { headerText: “Checked”, key: “Checked”, dataType: “bool”, template: mytemplate },
42.                    { headerText: “Id”, key: “id”, dataType: “number” },
43.                    { headerText: “ProductNumber”, key: “ProductNumber”, dataType: “string” },
44.                 ],
45.                 dataSource: products
46.             });
47.         });
48.     </script>

Looking forward to hearing from you.

 

Checkboxes

This is perfect.

Thank you–

hey Zdravko, i have a simliar question. i have a grid with a checkbox column (checkbox header to select all). when i click the checkboxes or the header checkbox i want to display count of total items checked in a seperate label. 

i have it working for checking each individual checkbox but not the check all. 

p.s. not using template column

how would i go about that?

thanks

Hello Al,

Clicking on the header checkbox will check/uncheck all checkboxes, so my suggestion is to implement this functionality somewhere else.

In order to count the checkboxes you can iterate through all rows and use 'is' in order to check if the checkbox for the particular row is checked:

http://stackoverflow.com/questions/901712/check-checkbox-checked-property