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
    317
    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 06:58 AM.

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