Geek Answers Handbook

How to disable adding new rows / columns to hands?

First of all, there is a known error with handsontable (which in any case is a big part of the code), mentioned, for example, by the user tezhm , on the official github problems list for handsontable :

When you select a cell in the last row of the table and drag it below the line below the line to the area outside the table, the scroll view window opens, causing a glitch. This can be recreated using the demo tables.

Because of this, I decided to completely disable the scroll bar or disable adding new rows / columns.

But how to disable adding new rows / columns to handsontable ?

Alternatively how to disable scrolling in handsontable ?

+8
jquery handsontable
source share
4 answers

To disable the addition of new rows / columns, set the following parameters:

 minSpareRows: 0, minSpareCols: 0

If you use the context menu, you can disable the functionality with

 contextMenu: ["undo", "redo"]

Another option would be to set maxRows number of rows in your data and maxCols on the number of columns in your data. Note: if you use the columns parameter, maxCols will be ignored.

 maxRows: data.numberOfRows, maxCols: data.numberOfColumns
+14
source share

I tried

 minSpareRows: 0, minSpareCols: 0

But no luck: (.

Finally, I tried something like the following:

 afterCreateRow: function (index, numberOfRows) { data.splice(index, numberOfRows); }

Did the job :)

+3
source share

Use below options, this works for me ..

 fillHandle: { direction: 'vertical', autoInsertRow: false, }
+3
source share

In jEXCEL, you can disable row insertion and column insertion using the following.

 <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/excel-formula.min.js"></script> <div id="my"></div> <script> data1 = [ ['US', 'Cheese', 'Yes', '2019-02-12'], ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'], ['CA;BR', 'Carrots', 'No', '2018-11-10'], ['BR', 'Oranges', 'Yes', '2019-01-12'], ]; $('#my1').jexcel({ data:data1, colHeaders: [ 'Product Origin','Description', 'Stock', 'Best before' ], colWidths: [ 300, 200, 100, 100 ], columns: [ { type: 'dropdown', url:'/jexcel/countries', autocomplete:true, multiple:true }, // Remote source for your dropdown { type: 'text' }, { type: 'dropdown', source:['No','Yes'] }, { type: 'calendar' }, ], style:[ { A1: 'background-color: orange; ' }, { B1: 'background-color: orange; ' }, { C1: 'background-color: orange; ' }, { D1: 'background-color: orange; ' }, ], allowInsertRow:false, allowManualInsertRow:false, allowInsertColumn:false, allowManualInsertColumn:false, }); </script> </html>

Additional examples: https://bossanova.uk/jexcel/examples

0
source share

More articles:


All Articles