WTreeViw: making an individual column non resizeable
Added by Hafiz Ahamd 5 months ago
Hi,
I am trying to find a way to make an individual column non resizeable in WTreeView. I know about setColumnResizeEnabled (https://webtoolkit.eu/wt/doc/reference/html/classWt_1_1WAbstractItemView.html#a4fe24c3ed80cc59f6bed2ed7795bc127) but that will make every column non resizeable.
Does anyone a way to do it?
Regards
Replies (3)
RE: WTreeViw: making an individual column non resizeable - Added by Matthias Van Ceulebroeck 5 months ago
Hello Hafiz,
there is currently no way to control this on a per-column basis. Currently I think my advise would be to look at your tree header structure in HTML, and create a custom CSS selector (something like .Wt-treeview > .Wt-header > .Wt-headerdiv .Wt-tv-c{index} { width: {value} !important;}
). Where the {index}
is the column index + 1. You may also want to visually indicate it cannot be selected by making it disabled, or changing its appearance somehow.
I have created a ticket to track this problem: #12813.
Best,
Matthias
RE: WTreeViw: making an individual column non resizeable - Added by Hafiz Ahamd 5 months ago
Hi Matthias,
Thank you for a quick respose. Unfortunately I couldn't make it work at the moment. The following are the steps I am following at the moment,
set the column width for the first column
tree.setColumnWidth(0, Wt::WLength("20px"));Use the following CSS style for the each cell of that column,
.non_resizeable_column
{
max-width: 20px;
min-width: 20px;
}
But the column is still resizeable, can you please give more detailed suggestion?
Regards,
Hafiz
RE: WTreeViw: making an individual column non resizeable - Added by Matthias Van Ceulebroeck 4 months ago
Hello Hafiz,
I'm afraid it is not possible currently to force this behaviour consistently. The JS that is attached to the WTreeView
will keep all the content (of other columns) updated depending on changes that are performed to each column.
You have for now (until the feature is implemented) three options, as far as I can see:
Simple : You simply disable the dragging of the first column resize-sensor in CSS:
Slightly more involved : You disable the mousedown JS, and change the CSS to match this (in a
doJavaScript
call):
document.querySelector(".Wt-tv-c1 .Wt-tv-rh").onmousedown = {};
document.querySelector(".Wt-tv-c1 .Wt-tv-rh").style.cursor = "not-allowed";
More involved : you add custom JS that catches the resizing of the column, and "undo" it.
This means that if the width changes you also update the.Wt-headerdiv.headerrh
's width and.cwidth > div > div
. That essentially undoes Wt's framework changes.
Since this is not really behavior that we would often see, nor is it really supported by the framework, there can be additional side-effects here visually.
Best,
Matthias