afterCreateRow set row as readonly

Tags: #<Tag:0x00007efc6ae245b0>
#1

Using the following, I am adding SUM outputs on the last row, updating this if a row is added.

How can I set this last row to be readonly? In the documentation it shows setting entire columns or indiviual cells, but not rows. If I use the cells approach, the cells keep changing as rows are added… is there a way to apply the readonly in the ‘afterCreateRow’ function?

hot.alter('insert_row', hot.countRows());

hot.setDataAtCell(hot.countRows() - 1, 0, '=SUM(A1:A' + (hot.countRows() - 1) + ')')
hot.setDataAtCell(hot.countRows() - 1, 1, '=SUM(B1:B' + (hot.countRows() - 1) + ')')

var myLastSum = 0;
hot.updateSettings({
	beforeCreateRow: function(i, amount) {
		myLastSum = i - 1;
},
afterCreateRow: function(i, amount) {

	hot.setDataAtCell(hot.countRows() - 1, 0, '=SUM(A1:A' + (hot.countRows() - 1) + ')');
	hot.setDataAtCell(i - 1, 0, '');

	hot.setDataAtCell(hot.countRows() - 1, 1, '=SUM(B1:B' + (hot.countRows() - 1) + ')');
	hot.setDataAtCell(i - 1, 1, '');

}
});
#2

Hi @chrisdavieswebdesign

You can use the cells method, like here https://jsfiddle.net/AMBudnik/tz7nqg4x/ where countRows()-1 is the last index in the table.

#3

Thanks @aleksandra_budnik, but this method only adds the readonly on load. I need a workaround which moves the readonly when a new row is added - as in my example code. Any ideas?

#4

Hi Chris,

when we add contextMenu to my code sample https://jsfiddle.net/AMBudnik/vbhesrjf/ we can see that when I add or remove some rows the readOnly is still on the last row.

readonly

Am I missing any scenario?

#5

Thanks for the example, @aleksandra_budnik.

Is it possible to disable the context menu on the last row? This is where the issue is, as a user can ‘add row below’ on the last row.

#6

Yes, you can use the hidden option in the contextMenu http://jsfiddle.net/AMBudnik/sg7o3029/. In the attached demo I hide ‘Custom option’ for the last row.

#7

Thank you @aleksandra_budnik.

Can you confirm if there is a shorthand version of this:

				   	contextMenu: {
				   		items: {
				   			"row_above": {
				   				hidden: function() {
				   					return hot.getSelectedRangeLast().to.row === hot.countRows()-1;
          						}
        					},
				   			"row_below": {
				   				hidden: function() {
				   					return hot.getSelectedRangeLast().to.row === hot.countRows()-1;
          						}
        					},
				   			"remove_row": {
				   				hidden: function() {
				   					return hot.getSelectedRangeLast().to.row === hot.countRows()-1;
          						}
        					},
				   			"undo": {
				   				hidden: function() {
				   					return hot.getSelectedRangeLast().to.row === hot.countRows()-1;
          						}
        					},
 				   			"redo": {
				   				hidden: function() {
				   					return hot.getSelectedRangeLast().to.row === hot.countRows()-1;
          						}
        					}       					        					        
      					}
    				},
#8

Yes, the hot.countRows()-1 is always the last row in the table. It looks like a lot of copy/paste the same hidden function but someone may want to show only some of the options.

ps. here’s a list of all available keys for the context menu https://handsontable.com/docs/8.2.0/demo-context-menu.html

#9