How to use class functions inside handsontable

Tags: #<Tag:0x00007f8b2b1ae0d8>
#1

I am unable to use function lockCarline or renderer inside handsontable which is declared inside a class.

getData(itemId, dataset, itemName) {
let el = document.getElementById(‘fragment’ + itemId);
let hot = new Handsontable(el, {
data: dataset,
viewportColumnRenderingOffset: 27,
viewportRowRenderingOffset: “auto”,
colWidths: 150,
height: 300,
width: ‘100%’,
manualRowResize: true,
manualColumnResize: true,
rowHeaders: true,
columns: this.tableSettings.columns,
columnHeaderHeight: 35,
colHeaders: this.tableSettings.colHeaders,
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
afterValidate: function (isValid, value, row, prop) {
if (value == false) {
console.log(value, row, prop)
}
},
afterRenderer: function (td, row, column, prop, value, cellProperties) {
console.log(‘called 1st’);
this.renderer.listen(el, ‘click’, (event) => {
this.lockCarline(key, true, itemName);
})
},

		licenseKey: 'non-commercial-and-evaluation'
	});
}

lockCarline(carline, openBool, name) {
	console.log(carline, openBool, name);
}
#2

Hi @katturi.swapna

I made a demo where I get some calculation from the renderer and use them in my custom function https://jsfiddle.net/AMBudnik/mspcueox/ and I works as expected (it prints the data).

01
Zrzut ekranu 2020-10-30 o 14.54.01.png1302×85 26.8 KB

Can you replicate the issue using JSFiddle?

#3

can you please help me by using a function using this keyword and send me an example if possible in angular.

#4

This issue is solved. I have used var __this = this. I can access all the variables and methods which are declared globally.

#5

I have one more issue. I am creating tables dynamically so data may be different for each table. Can you please help me how to set the height of table according to the data present inside the table.

#6

Hi @katturi.swapna

I’m glad to hear that the previous issue is gone.

When it comes to the second request. Can you specify what is the expected result?
Example: The table can take from 100 to 500px height. If it wants more I need to show a scrollbar.

#7

i kept a height of 300px and then the scrollbar is used if the data is more but in few scenarios there is only 2 rows data which doesn’t need that much of height, so can I do anything to adjust the height according to the data?

#8

Here https://jsfiddle.net/AMBudnik/g8nh4kpe/ is an example that tells you what is the height of the Handsontable table. Based on that value you can set height for the DIV or keep it as it is.

#9

Hi @aleksandra_budnik

I understood that we can get height of the table but how should i assign it to height parameter as it will be displayed after the table loads.

#10

You can use the updateSettings to attach a new height. There’s one limitation though. When you already defined the height there is no option to reset it (make table adjustable again). You can just change it to another value.

#11

I wanted to add scroll only if the height is above 300. Can you please help me with that.

let hot = new Handsontable(el, {
data: item.dataset,
viewportColumnRenderingOffset: 27,
viewportRowRenderingOffset: “auto”,
colWidths: 150,
height: ‘auto’,
width: ‘100%’,
manualRowResize: true,
manualColumnResize: true,
rowHeaders: true,
columns: this.tableSettings.columns,
columnHeaderHeight: 35,
colHeaders: this.tableSettings.colHeaders,
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
afterValidate: function (isValid, value, row, prop) {
if (value == false) {
console.log(value, row, prop)
}
},

				afterLoadData: function () {
					setTimeout(function () {
						console.log(el.clientHeight)
						console.log(el.scrollHeight);
						
					}, 10)
				},
				
				licenseKey: 'non-commercial-and-evaluation'
			});
			if(el.clientHeight > 300){
				
			 // i wanted to add scroll.
			}
#12

Hi @katturi.swapna

Here’s a demo that you can test https://jsfiddle.net/AMBudnik/qv2dynj4/

#13

Hi @aleksandra_budnik

Thank you for solving the height issue. I need one more help. I want to add scroll only if height is 300. As of now I am getting scroll even if the height is less than 300.

if (el.clientHeight > 300) {
hot.updateSettings({
height: 300
});
} else {
hot.updateSettings({
height: el.clientHeight
});
}

#14

Hi @katturi.swapna

I’ve changed the demo a bit to add more rows at once https://jsfiddle.net/dfxe0aoq/ but that demo and the one that I’ve send before do not have a scroll on the initialization. I confirmed that with our Support Engineer.

This is what we both got

demo
demo.gif750×422 583 KB

#15

Hi @aleksandra_budnik

I also added the same properties like you added. But I am getting scroll even if the height is only 40 at initial stage only.

image
image.png789×361 9.1 KB

#16

As far as I understand the JSFiddle works well for you, @katturi.swapna ?
If so, that effect has to be related to your project’s CSS.

#17

Hi @aleksandra_budnik

I have not used any project CSS, but the scroll is getting added automatically.
I don’t understand the cause why it is getting added like that. Can you please help me with this issue. How can I remove the scroll. I have searched for the solutions in many ways but I didn’t find any solution.

#18

If it all works well in the JSFiddle but does not in your project it means that you have to have some additional settings that change it.

I think that the reason might be in those values loaded for columns C213 and C257. Does loading those columns empty change anything? If it does, please share the logic that you use to load those columns (are those generated by some custom renderers?)

ps. If you have an Extended/Premium or Ultimate support plan I would be able to send your zipped project to our Support Engineer for a code review. Without a demo, we can only guess what could be the reason.

#19

Hi @aleksandra_budnik

I am creating those cells using afterrenderer function. I didn’t add any additional css to the cells. I am just creating elements and appending to td of table.

let el = document.getElementById(‘fragment’ + item.id);
var __this = this;
let hot = new Handsontable(el, {
data: item.dataset,
height: ‘auto’,
rowHeaders: true,
columns: this.tableSettings.columns,
columnHeaderHeight: 35,
colHeaders: this.tableSettings.colHeaders,
contextMenu: true,
afterValidate: function (isValid, value, row, prop) {
if (value == false) {
console.log(value, row, prop)
}
},
afterRenderer: function (td, row, column, prop, value, cellProperties) {
if (column == 0) {
for (let i = 0; i < item.meaningList.length; i++) {
if (row == i) {
td.setAttribute(‘id’, item.meaningList[i].id)
}
}
} if (column != 0) {
let el = null;
el = document.createElement(‘i’);
el.className = “fas fa-pencil-alt lockCarlinePencil”;
let listIndex = row;
let itemName = ‘’;
let key = {};
let carlineValue = prop;
for (let i = 0; i < item.meaningList.length; i++) {
if (listIndex == i) {
itemName = item.meaningList[i].name;
for (let j = 0; j < item.meaningList[i].car_lines.length; j++) {
if (carlineValue == item.meaningList[i].car_lines[j].car_line) {
key = item.meaningList[i].car_lines[j];
td.setAttribute(‘id’, item.meaningList[i].car_lines[j].id);
td.setAttribute(‘title’, item.meaningList[i].car_lines[j].value_text);
td.appendChild(el);
}
}
}
}
__this.renderer.listen(el, ‘click’, (event) => {
__this.lockCarline(key, true, itemName);
})
}
},
afterLoadData: function () {
setTimeout(function () {
console.log(el.clientHeight)
console.log(el.scrollHeight);

	}, 10)
},
beforeChange: function (sourcedata) {
	__this.pasteArray = [];
	for (let i = 0; i < item.meaningList.length; i++) {
		for (let j = 0; j < sourcedata.length; j++) {
			let tabIndex = sourcedata[j][0];
			let carlineValue = sourcedata[j][1];
			if (i == tabIndex) {
				let pasteObj = {
					'destinationId': '',
				};
				for (let k = 0; k < item.meaningList[i].car_lines.length; k++) {
					if (carlineValue == item.meaningList[i].car_lines[k].car_line) {
						pasteObj.destinationId = item.meaningList[i].car_lines[k].id;
					}
				}
				__this.pasteArray.push(pasteObj);
			}
		}
	}
	__this.copyPasteFn();
},
afterCopy: function (value, index) {
	let copiedValue = value[0][0];
	let rowIndex = index[0].startRow;
	let columnIndex = index[0].startCol;
	__this.copiedCell = {
		'sourceId': '',
		'sourceValue': ''
	}
	for (let i = 0; i < item.meaningList.length; i++) {
		if (i == rowIndex) {
			for (let j = 0; j < item.meaningList[i].car_lines.length; j++) {
				if (j == columnIndex - 1) {
					__this.copiedCell.sourceId = item.meaningList[i].car_lines[j].id;
				}
			}
		}
	}
	__this.copiedCell.sourceValue = copiedValue;
},
licenseKey: 'non-commercial-and-evaluation'

});

#20

There seem to be too many missing variables, @katturi.swapna
I assume that the logic of afterRender hook might cause this misalignment but I would require a working code example. Could you share a JSFiddle demo with missing variables loaded?

ps. Please send me your license ID at support@handsontable.com
I need to confirm it to proceed with the code review.