Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
William Morgenweck
435
checkbox in grid
posted

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?

Parents
No Data
Reply
  • 20255
    Verified Answer
    Offline posted

    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;
    5.  
    6.             for (var i = 0; i < rowsLength; i++) {
    7.                 var cell = $grid.igGrid("cellAt", 0, i)
    8.                 var $checkBox = $(cell.children[0]);
    9.  
    10.                 if ($checkBox.prop("checked")) {
    11.                     alert("ProductNumber" + $grid.igGrid("getCellValue", i, "ProductNumber"));
    12.                 }
    13.             }
    14.         }
    15.  
    16.         function changeState(element, rowId) {
    17.             var $checkBox = $(element);
    18.  
    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.         ];
    32.  
    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.zip
Children