Grid column width set to 0 issue

Suite and Optimus Suite 7
#1

V7.1.2, if a grid column width is 0, a possible default value is working.

I want such a function, a ‘category’ tree and a ‘product’ grid. When I click a tree item, the grid will display rows belong to the selected category. So, two method I tried:
1.

category_tree.events.on("ItemClick", function(id, e){
	product_grid.data.filter({
		by: "CategoryCode",
		match: id,
		compare: function (value, match, item) {
			return value.indexOf(match) == 0;
		}
	});
});

Problem is filter function can not work together with the other grid head filter such as ‘ProductModel’.
2.

const inputEvent = document.createEvent("HTMLEvents");
inputEvent.initEvent("input", true, true);
function changeFilterValue(value) {
	let headerFilter = product_grid.getHeaderFilter("CategoryCode");
	headerFilter.focus();
	let element = headerFilter.querySelector("input");
	element.value = value;
	element.dispatchEvent(inputEvent);
}

category_tree.events.on("ItemClick", function(id, e){
	changeFilterValue(id);
});

const product_grid = new dhx.Grid(null, {
	columns: [
		{ id: "CategoryCode",	width: 0,  header: [{ text: "Category" },  { content: "inputFilter" }] },
		...
	]}
)

A ‘categorycode’ column must be defined with this method. And I don’t want this column be displayed. But if I set ‘hidden:true’, the changeFilterValue function does not work. So I wanna set width to 0, but it showed with maybe a default width value.

So if this width issue is resolved, my code will work out.

Z-order of tooltip
#2

My aplogies for such a long delay wit hthe reply.
You’re currently there is a problem wirth such a scenario.
In-header filters are not comunicating with the API filters.
Also it is not avialable to set the width to a column to 0 (which i null actually in this case), it sets the default 100px width to a column.
As a workaround you may try to show your “CategoryCode” column before the filtering with the:

grid.config.columns[column_index].hidden=false
grid.paint()

than apply the filter to your header filter, and theh hide your column:

grid.config.columns[column_index].hidden=true
grid.paint()
#3

Thank you sematik, I 'll try

#4

Hi sematik, it does not work.

	this.productGrid.showColumn("CategoryCode");
	let headerFilter = this.productGrid.getHeaderFilter("CategoryCode");

getHeaderFilter gets error “Uncaught TypeError: Cannot read property ‘el’ of undefined” and I traced it can not find the “inputfilter”. Put the getHeaderFilter in the event " afterColumnShow" results the same error. And same if “grid.config.columns[column_index].hidden=false”, it even not trigger the “afterColumnShow” event.
Any ideas? Thx

#5

Please, try to use:

grid.config.columns[index].hidden=false
grid.paint()
dhx.awaitRedraw().then(function() {
      let headerFilter = grid.getHeaderFilter("CategoryCode");
})
#6

Hello sematik, thank you for your advice. Good man.
Finally code works well after tried again and again. The very very strange thing is if the column is set hidden true when it is initialized, an error will be thrown. Same to some other but not all columns. I can’t find any regularities.

capture
capture449×588 9.53 KB

#7

My suggested workaround is not using a “legal” column hiding, so please, try to use it also ionstead of the initial native column hiding.