www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to add a checkbox column in Handsontable

  1. #1
    Join Date
    May 2013
    Posts
    2

    Question How to add a checkbox column in Handsontable

    Have you ever make a checkbox column in Handsontable?

    I try to use every way to do it, but it's not working.

    When user click checkbox on header, all row in column was be checked.

    Thanks for any help.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    never used, check this out, maybe it helps http://handsontable.com/demo/renderers_html.html

  3. #3
    Join Date
    May 2013
    Posts
    1
    Hi, I created an example that may be helpful to you: http://jsfiddle.net/warpech/wpWMJ/

  4. #4
    Join Date
    May 2013
    Posts
    2
    I have been running on IE9 but it's not working... please tell me reason and resolve.
    Thanks.

  5. #5
    Join Date
    Sep 2007
    Posts
    315
    The code I wrote:

    Code:
      
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <style type="text/css">
    /* http://www.w3schools.com/css/css_table.asp    */
    table, th, td
    {
    border: 1px solid #ada;
    }
    
    </style>
    <script type="text/javascript">
    // http://handsontable.com/demo/renderers_html.html
    
    // http://www.webdeveloper.com/forum/showthread.php?277523-How-to-add-a-checkbox-column-in-Handsontable
    
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order
    // http://www.w3schools.com/jsref/prop_checkbox_checked.asp
    
    // http://www.w3schools.com/jsref/prop_checkbox_checked.asp
    
    function tercih(bu, el) {
    var i;
     for(i=0;i< el.length;i++) {   el[i].checked = bu.checked;  }
    }
    
    
    function onay(bu,el) { // alert(bu.name); 
    //alert(el.length);
    var inp = document.getElementById('c' + bu.name); 
    var i;
    var say =  0; 
    for(i=0; i< el.length;i++) {
       if(el[i].checked == true) { say++;}  
    }
    // alert(say);
    if(say == el.length) { inp.checked = true;}
    if(say != el.length) { inp.checked = false;}
    }
    
    </script>
    </head>
    <body>
    <form>
    <table id="tablo">
    <thead>
    <tr>
    <th><input type="checkbox" id="ca" onclick="tercih(this, document.forms[0].a)"> select all</th>
    <th><input type="checkbox" id="cb" onclick="tercih(this, document.forms[0].b)"> select all</th>
    <th><input type="checkbox" id="cc" onclick="tercih(this, document.forms[0].c)"> select all</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="checkbox" name="a" onclick="onay(this, document.forms[0].a)"></td>
    <td><input type="checkbox" name="b" onclick="onay(this, document.forms[0].b)"></td>
    <td><input type="checkbox" name="c" onclick="onay(this, document.forms[0].c)"></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="a" onclick="onay(this, document.forms[0].a)"></td>
    <td><input type="checkbox" name="b" onclick="onay(this, document.forms[0].b)"></td>
    <td><input type="checkbox" name="c" onclick="onay(this, document.forms[0].c)"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>
    Code:
      
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    /* http://www.w3schools.com/css/css_table.asp    */
    table, th, td
    {
    border: 2px solid #edb;
    }
    
    </style>
    <script type="text/javascript">
    // http://www.w3schools.com/css/css_display_visibility.asp
    
    
    function yeni(t,d) {
    var el = document.getElementById(d);
    var y = el.innerHTML;
    el.style.display ="none";
    var el2 = document.getElementById(t);
    el2.value = y;
    el2.style.display ="block";
    }
    
    function metin(t,d) {
    var pano = document.getElementById(d);
    var ta = document.getElementById(t); // alert(ta.value);
    
    var y = ta.value;
    ta.style.display ="none";
    pano.style.display ="block";
    pano.innerHTML = y;
    
    }
    
    </script>
    </head>
    <body>
    <table id="tablo">
    <tr>
    <td><textarea id="t" style="display:none;" onblur="metin('t','mydiv')">Edeb bir taç imiş,Nur-i Hüda'dan. Giy ol tacı, emin ol her beladan</textarea><div onclick="yeni('t','mydiv')" id="mydiv" style="display: block;">Edeb bir taç imiş,Nur-i Hüda'dan. Giy ol tacı, emin ol her beladan</div></td>
    </tr>
    </table>
    <br>
    
    Click the cell of table. Write a text. Click the out of table.
    </body>
    </html>
    Last edited by Ayşe; 06-06-2013 at 05:58 AM.
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles