How to dynamically prepend a checkbox column in handsontable

Question

I am working with handsontable and a jsfiddle http://jsfiddle.net/kc11/cb920ear/1/ . I am trying to dynamically prepend a checkbox column before the data. In this there is the following js structure, which I assume is a multidimensional array:

columns: [
  {
    data: "car"
    //1nd column is simple text, no special options here
  },
  {
    data: "year",
    type: 'numeric'
  },
  {
    data: "available",
    type: "checkbox"
  }
]

If I understand correctly to get the checkboxes in the first column I'll need to make this array of objects look something like:

columns: [
  {
   "checkboxes"
   type: "checkbox" 
  },
  {
   data: "car"
    //1nd column is simple text, no special options here
  },
....

But obviously the columns array will have to be created dynamically , with the first column checkboxes and all the remainder text (which is the default) How can I modify the array to look like this?

score 2 · Accepted Answer · edited May 23 '17 at 12:09

may be try like this:

  $(document).ready(function () {
        
        function getCarData() {
            return [
                {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
                {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
                {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
                {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
                {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
            ];
        }
        
        var keys = $.map(getCarData()[0], function(element,key) { return key; }); 
        keys.unshift("check");
        
        console.log(keys);
     var column=[
              {
                  data: "car"
                  //1nd column is simple text, no special options here
                },
                {
                  data: "year",
                  type: 'numeric'
                },
                {
                  data: "available",
                  type: "checkbox"
                }
              ];
     column.unshift({
        data:"available",
        type: "checkbox" 
       });
        var example1 = document.getElementById('example1');
        var hot1 = new Handsontable(example1,{
            data: getCarData(),
            startRows: 7,
            startCols: 4,
            colHeaders: keys,
            
            columnSorting: true,
            columns: column
        });
        
        function bindDumpButton() {
            
            Handsontable.Dom.addEvent(document.body, 'click', function (e) {
                
                var element = e.target || e.srcElement;
                
                if (element.nodeName == "BUTTON" && element.name == 'dump') {
                    var name = element.getAttribute('data-dump');
                    var instance = element.getAttribute('data-instance');
                    var hot = window[instance];
                    console.log('data of ' + name, hot.getData());
                }
            });
        }
        bindDumpButton();
        
    });

body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<script src="http://handsontable.com/lib/numeral.de-de.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<h2>Checkbox cell type</h2>

<p>If you have cells that contains only 2 possible values, you can use <code>checkbox</code> type.
  Data in such cells will be rendered as checkbox
  and can be easily changed by checking/unchecking the checkbox. </p>

<p>Checking and unchecking can be performed using mouse or by pressing <kbd>SPACE</kbd>.
  You can change the state of multiple cells at once.
  Simply select cells you want to change and press <kbd>SPACE</kbd></p>

<div class="handsontable" id="example1"></div>

<p>
  <button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump
    data to console
  </button>
</p>

see this also:How to create dynamic columns for Handsontable?

Rahul Desai · Answer 2 · 2015-01-02T04:29:51.040

1

To get checkboxes in the first column, do:

columns: [
    {
        data: "available",  // mention appropriate data here
        type: "checkbox"    // checkboxes in the 1st column!
    },
    {
        data: "car"         // 2nd column
    },
    {
        data: "year",       // 3rd column
        type: 'numeric'
    },
    {
        data: "available",  // 4rd column
        type: "checkbox"
    }
]

jsFiddle Demo: http://jsfiddle.net/cb920ear/2/

And, FYI: Thats an array of objects and part of the configuration of Handsontable.

edited Jan 02 '15 at 04:29

answered Jan 02 '15 at 04:24

Rahul Desai

15,242
19
83
138

I realize that I didn't explain what I was thinking properly. I need to create this column dynamically, please see edit. – user1592380 Jan 02 '15 at 05:15

How to dynamically prepend a checkbox column in handsontable

2 Answers2