Unable to Retrieve Data with Alignment and Merge

Tags: #<Tag:0x00007f8b1cc3fda8>
#1

Alignment and Merged Cell is not getting retrieved after storing and rendering the data…

Here are the steps I did:
SAVING:

As per the documentation, I’m saving the data by the following code:

   var data = hot.getData()

I’m saving the above data into the database.

On saving, My table view is as below:

image.png1181×239 12.1 KB

With Merged cells aligned Horizontal Center and Vertical-Middle.

NOTE: I did this, via ContextMenu

RETRIEVING:

    hot.loadData(data)

After retrieving, I’m getting the table like below:

image.png1187×282 12.4 KB

As per the above image ALIGNMENT AND MERGED CELLS ARE MISSING !!!

_Kindly help me how to store the table formatting options like MergeCells and ALIGNMENT OPTIONS and anyother Formatting Options

Thanks in advance.

#2

Good day @vicky9306

the alignment and merging are processes that are working on the visual part of the table. When you merge some cells the value is kept only for the top-left cell, all other cells get erased (the value is not copied).

If you wish to have all this data and merged areas after retrieving the table you’d need to call the mergeCells plugin again and load the settings that were used before rebuilding the table.

Here https://jsfiddle.net/handsoncode/L84zknps/ is an example that shows how to access the merged cells array via mergeCells plugin.

#3

It doesn’t answer my question. Anyway, Thanks for your response.

Here is my code to handle alignment options on retrieval of the HandsonTable from any Database or anyother datasource:

Step-1: Create a method to handle the alignment options

/*
    Method Description - Handles the alignment options for a single cell in the table.
*/
function handleAlignment(TD, row, column, prop, value, cellProperties) {
    var _td = $(TD);
    var css = {};

    /* Extend the css object to set both Horizontal and Vertical alignment options */
    if (cellProperties) {
        /* Horizontal Alignment options. Set the style into the css object by extending it. */
        var className = cellProperties['className'];
        if (className != undefined && className != "" && className.indexOf('htCenter') != -1)
            css = $.extend({}, css, { 'text-align': 'center' });
        else if (className != undefined && className != "" && className.indexOf('htRight') != -1)
            css = $.extend({}, css, { 'text-align': 'right' });
        else if (className != undefined && className != "" && className.indexOf('htLeft') != -1)
            css = $.extend({}, css, { 'text-align': 'left' });
        else if (className != undefined && className != "" && className.indexOf('htJustify') != -1)
            css = $.extend({}, css, { 'text-align': 'justify' });

        /* Vertical Alignment options. Set the style into the css object by extending it. */
        if (className != undefined && className != "" && className.indexOf('htMiddle') != -1)
            css = $.extend({}, css, { 'vertical-align': 'middle' });
        else if (className != undefined && className != "" && className.indexOf('htTop') != -1)
            css = $.extend({}, css, { 'vertical-align': 'top' });
        else if (className != undefined && className != "" && className.indexOf('htBottom') != -1)
            css = $.extend({}, css, { 'vertical-align': 'bottom' });

        /* Apply the css style with horizontal and vertical options to the respective cell in the table. */
        _td.css(css);
    }
}

Step-2: Add Handsontable event beforeRenderer in the Handsontable initialization:

hot = new Handsontable(container, {
    data: [[""]],
    rowHeaders: false,
    colHeaders: false,
    filters: true,
    renderAllRows: true,
    dropdownMenu: true,
    stretchH: 'all',
    contextMenu: true,
    mergeCells: true,
    contextMenu: true,

    /* 
        Before Column has been rendered, apply the properties of each cell as 
        Alignment or anyother cellproperties
    */
    beforeRenderer: function (TD, row, column, prop, value, cellProperties) {
        handleAlignment(TD, row, column, prop, value, cellProperties)
    }
});

Here, beforeRenderer is the main thing to work on.

#4

Hi @vicky9306

Please check hot.getData() in the debugger to see what it returns. It’s only data. Merged cell are not part of it. With loadData(data) you get exactly that, raw data loaded.

Other settings, merge cells and your alignment classes, have to be restored separately. You can use hot.getCellsMeta() to get cellProperties. rowSpan and colSpan are there, where do you store alignment is up to you.

Kind Regards
Wojciech

#5