Grid column width set to 0 issue


#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");
})