Jquery issues

Tags: #<Tag:0x00007f8b3c2e5788>
#1

Hi There!

Enjoying the HandsOnTable. A question about using in a jquery derived popup (jquery-confirm). It seems that the following 3 issues have been encountered. I’m including the code as a docx that you can cut and paste:

  1. manualColumnResize is set to true, but it doesn’t work in the modal dialogbox. No resize mouse icon appears.
  2. contextMenu doesn’t wortk properly, even when I change the z-index in the css sheet to a higher number. Tried up to 64,000. The context menu always appears behind the confirm dialog.
  3. I am forced to set the height of the spreadsheet grid. If I don’t, any edit causes extra lines to be added to the html outside of the spreadsheet, causing the container to grow in size after each edit.

I am using the latest community edition (we’re non-profit), and have the license key inside the code. I’ve attached the sourcecode. No fancy stuff inside this example. Only a single button.

Thanks again for your hard work!
Gerhard J Norkus

Code:
You can reproduce my problem by creating a simple html file. Insert the lines below into the head and body sections of the html file and then open it. Make sure that the handontable.full.min.js and css are present in the same folder as the html file.

I include the following sources and links in the head section:
script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js”
link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css”
script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js”
script src=“handsontable.full.min.js”
link href=“handsontable.full.min.css” rel=“stylesheet” media=“screen”

I have the following Button in the html body
JQuery-confirm Example

Finally, the script below I insert in the html body, below the button

//

function jqueryConfirmExample() {
    var splashtext;
    var dlgtitle;

    // Give normal message if we're online
    if (navigator.onLine)
        splashtext = '<div id="MainSection">Example for online JQuery-confirm</div>'
                    + '<div id="hotexample"></div>'
                    + '<div id="EndSection">End Section Beneath Table</div>';
    else
        // Give request to go online
        splashtext = '<div id="MainSection">Example for offline JQuery-confirm</div>'
                    + '<div id="hotexample">AnotherExample</div>'
                    + '<div id="EndSection">End Section Beneath Table</div>';

    dlgtitle = '<div class="splash-center">JQuery Handsontable Example</div>';
    showDialog(dlgtitle, splashtext);
}


function showDialog(dlgtitle, dlgtexthtml) {
    $.confirm({
        title: dlgtitle,
        content: dlgtexthtml,
        draggable: true,
        useBootstrap: false,
        boxWidth: '800px',
        boxHeight: '200px',
        //escapeKey: 'OK',
        backgroundDismiss: false,
        onContentReady() {
            var resultfinal = [
                                ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151],
                                ["2009", 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814, 0, 2941, 4303, 354, 5814],
                                ["2010", 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284, 5, 2905, 2867, 412, 5284],
                                ["2011", 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127, 4, 2517, 4822, 552, 6127],
                                ["2012", 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151, 2, 2422, 5399, 776, 4151]
            ];

            var $container = $("#hotexample");

            function confirmRenderBlue(hotInstance, TD, row, col, prop, value, cellProperties) {
                if (value == "0")
                {
                    TD.style.color = '#FF0000';
                    TD.style.backgroundColor = '#FFDDDD';
                    TD.innerHTML = value;
                }
                else
                    TD.innerHTML = value;
            }

            $container.handsontable({
                data: resultfinal,
                rowHeaders: true,
                colHeaders: true,
                width: 620,
                height: 90,
                manualColumnResize: true,
                contextMenu: true,
                cells: function (row, column, prop) {
                    const cellProperties = {};
                    cellProperties.renderer = confirmRenderBlue;
                    return cellProperties;
                }
            });

            // This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
            //var hotInstance = $("#hotexample").handsontable('getInstance');
        },

        buttons: {
            Continue: {
                keys: [
                    'enter',
                    'esc',
                    'escape',
                    'space'
                ],
                action: function () {
                }
            },
        }
    });
#2

Hi gnorkus,

Great to know you’re enjoying Handsontable!

  1. We’re already working on this issue: https://github.com/handsontable/handsontable/issues/5050 and soon we should have a PR with the fix.
  2. This depends on the modal library. For Bootstrap people had to set 10 000 and an !important flag. The modal you’re using has z-index: 99999999 so 64,000 is to low: https://jsfiddle.net/j82gnhy5/
  3. The issue is already planned: https://github.com/handsontable/handsontable/issues/3433 but it’s not that common bug. Depends highly on the DOM tree and overflow styles and can be avoided.

Best,
Wojciech

#3