How can i allow selected cell text to be bold when click contextMenu 'Bold' in Handsontable

Question

I am working on handsontable.js with jquery latest version. I want to add new features to add on handsontalbe contextMenu bold and normal text. I have add these both menu option in contextMenu. But how can i make all selected cell text bold and normal.

Here is my jquery code for handsontable :

$("#A_tabledata").handsontable({
        data: data,
        startRows: 1,
        startCols: 2,
        minRows: 1,
        minCols: 2,
        maxRows: 400,
        maxCols: 200,
        rowHeaders: false,
        colHeaders: false,
        minSpareRows: 1,
        minSpareCols: 1,
        mergeCells: true,
        cells: function (row, col, prop) {
            var cellProperties = {};
            cellProperties.renderer = "defaultRenderer"; //uses lookup map
            return cellProperties;
        },
        contextMenu: {
            callback: function(key, options) {
                if(key == 'bold'){
                    //Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
                    var sel = this.getSelected() ;
                    var boldValues = ''; //How can i get cell value?
                    // How can i set value back to in the cell?    
                }

                if(key == 'normalText'){
                    //Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
                    var sel = this.getSelected();
                    var normalValues = ''; //How can i get cell value?
                    // How can i set value back to in the cell?    

                }
            },
            items: {
                "row_above": {},
                "row_below": {},
                "col_left": {},
                "col_right": {},
                "hsep2": "---------",
                "remove_row": {name:'Remove row(s)'},
                "remove_col": {name:'Remove columns(s)'},
                "hsep3": "---------",
                "alignment" : {},
                "mergeCells" : {},
                "hsep4": "---------",
                "undo": {},
                "redo": {},
                "hsep5": "---------",
                "bold": {"name": "Bold"},
                "normalText": {"name": "Normal Text"}
            }
        },
        cell: <?php echo $metadata; ?>,
        mergeCells:  <?php echo $metadata; ?>

    });

Updates

For more information what i want, i am adding image here:

In this image, you can see blue area. I want all these cells to be bold when i click on "Bold" from the context menu. And back to normal when i click on "Normal text" from context menu.

How can i get cell value? How can i set value back to in the cell?

I Have searched in many forum and post but don't get the answer :

Thanks in advance.

Answer 1

If you see the documentation for the method getSelected() it says:

getSelected(){Array}
Returns indexes of the currently selected cells as an array [startRow, startCol, endRow, endCol].
Start row and start col are the coordinates of the active cell (where the selection was started).
Returns: {Array} Array of the selection's indexes.

This method isn't needed in your case, see the demo below or use the code sample i have added.

So as per this you just need this:

callback: function(key, options) {
    if (key === 'bold') {
      $('.area').html(function() {
        return $('<strong>', {
          text: this.textContent
        });
      });
    } else if (key === 'normal') {
      $('.area').html(function() {
        return this.textContent
      });
    }
  },

and i found out that the selected cells get a class name called area so you can target those, as you can see in the code above and try the snippet added below.

$(document).ready(function() {

  var container = document.getElementById('basic_example');

  var data = function() {
    return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: {
      callback: function(key, options) {
        if (key === 'bold') {
          $('.area').html(function() {
            return $('<strong>', {
              text: this.textContent
            });
          });
        } else if (key === 'normal') {
          $('.area').html(function() {
            return this.textContent
          });
        }
      },
      items: {
        "bold": {
          name: 'Make bold'
        },
        "normal": {
          name: 'Make normal'
        }
      }
    }
  });

});

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

<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet" />
<link href="http://handsontable.com//styles/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<div id="basic_example"></div>

Answer 2

I know this is not the best solution but if nothing else works you could do this:

var sel = this.getSelected(), row = sel[0] + 1, col = sel[1];
$('table tr:eq(' + row + ') td:eq(' + col + ')').css('font-weight', 'bold');

jsFiddle