HandsOnTable: Change cell borders dynamically

Question

I'm trying to make an Excel-like editor with HandsOnTable but I haven't yet figured out how to change a cell's style dynamically, borders in this case.

I have tried to use

setCellMeta(row,col,"borders", My_borders_Object); 

and then

MyHotInstance.render();

but this had no effect.

What could I do to solve this problem?

Any help will be very appreciated.

Answer 1

Not sure what my_borders_object is or why you're passing "borders" as a cell meta data argument, but here's a good way of doing it:

There is an initialization option called customBorders ; see below for excerpt from documentation:

customBorders : Boolean (default false )

customBorders : Array [{ row: 2, col: 2, left: {width:2, color: 'red'}, right: {width:1, color: 'green'}, top: /*...*/, bottom: /*...*/ }]

customBorders : Array [{ range:{ from:{ row: 1, col: 1 }, to:{ row: 3, col: 4 } }, left: { /*...*/ }, right: { /*...*/ }, top: { /*...*/ }, bottom: { /*...*/ } }] If true , enables Custom Borders plugin, which enables applying custom borders through the context menu (configurable with context menu key borders). To initialize Handsontable with predefined custom borders, provide cell coordinates and border styles in form of an array. See Custom Borders demo for examples. Version added: 0.11.0

What this means is that at any given point, if you wanted to do a dynamic update of borders, you can use

hotInstance.updateSettings({
    customBorders: new_borders_array
})

Answer 2

I'm trying to accomplish the same right now actually. I have tried the following:

ht is the handsontable instance

ht.updateSettings({ 
    customBorders: [ 
        { range: 
            { 
                from: { row: 1, col: 15 }, 
                to: { row: 1, col: 16 }
            }, 
        top:    { width: 3, color: 'red' },
        left:   { width: 2, color: 'red' },
        bottom: { width: 2, color: 'red' }, 
        right:  { width: 2, color: 'red' }
        }, 
    ] 
});

Without ht.init() it does not work:

ht.init();

In version 0.17 this worked fine, however after the update in version 0.18 ht.init(); it creates another instance of the table below the current one - very frustrating.

So now I'm again stuck, or I will downgrade to 0.17 until this is fixed in 0.18.

After going thought the handsontable.full.js I managed to do it by extracting some function from the code and building the borders objects:

  var container = document.getElementById('ht_container'); var data = function () { return Handsontable.helper.createSpreadsheetData(20, 12); }; var hot = new Handsontable(container, { data: data(), height: 396, colHeaders: true, rowHeaders: true, stretchH: 'all', customBorders: true, }); //get handsontable instance var instance = hot; //copy required functions from the JS.... not pretty, but easy enough //instead of building the required objects manually var getSettingIndex = function(className) { for (var i = 0; i < instance.view.wt.selections.length; i++) { if (instance.view.wt.selections[i].settings.className == className) { return i; } } return -1; }; var insertBorderIntoSettings = function(border) { var coordinates = { row: border.row, col: border.col }; var selection = new WalkontableSelection(border, new WalkontableCellRange(coordinates, coordinates, coordinates)); var index = getSettingIndex(border.className); if (index >= 0) { instance.view.wt.selections[index] = selection; } else { instance.view.wt.selections.push(selection); } }; var createClassName = function(row, col) { return "border_row" + row + "col" + col; }; var createDefaultCustomBorder = function() { return { width: 1, color: '#000' }; }; var createSingleEmptyBorder = function() { return {hide: true}; }; var createDefaultHtBorder = function() { return { width: 1, color: '#000', cornerVisible: false }; }; var createEmptyBorders = function(row, col) { return { className: createClassName(row, col), border: createDefaultHtBorder(), row: row, col: col, top: createSingleEmptyBorder(), right: createSingleEmptyBorder(), bottom: createSingleEmptyBorder(), left: createSingleEmptyBorder() }; }; var prepareBorderFromCustomAddedRange = function(rowObj) { var range = rowObj.range; for (var row = range.from.row; row <= range.to.row; row++) { for (var col = range.from.col; col <= range.to.col; col++) { var border = createEmptyBorders(row, col); var add = 0; if (row == range.from.row) { add++; if (rowObj.hasOwnProperty('top')) { border.top = rowObj.top; } } if (row == range.to.row) { add++; if (rowObj.hasOwnProperty('bottom')) { border.bottom = rowObj.bottom; } } if (col == range.from.col) { add++; if (rowObj.hasOwnProperty('left')) { border.left = rowObj.left; } } if (col == range.to.col) { add++; if (rowObj.hasOwnProperty('right')) { border.right = rowObj.right; } } if (add > 0) { this.setCellMeta(row, col, 'borders', border); insertBorderIntoSettings(border); } } } }; $(document).ready(function () { //create my borders object var customBorders = [ { range: { from: { row: 1, col: 2 }, to: { row: 4, col: 4 } }, top: { width: 3, color: 'red' }, left: { width: 2, color: 'red' }, bottom: { width: 2, color: 'red' }, right: { width: 2, color: 'red' } }, ]; //used the 'stolen' functions to add them to the HT in prepareBorderFromCustomAddedRange.call(instance, customBorders[0]); instance.render(); instance.view.wt.draw(true); instance.customBorders = customBorders; }); 

 </style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="http://handsontable.com//styles/main.css" rel="stylesheet"> <link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"> <script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script> <style type="text/css"> body {background: white; margin: 20px;} h2 {margin: 20px 0;} 

 <div id="ht_container"></div> 

But if you are not lazy, you can build pretty much build your 'border' object and use, insertBorderIntoSettings to add them to your table or write custom code that does the same.