Is there any option to auto-size the row-height in a datatable depending of the content? What I’m looking for is an adjustment of the row-height if a cell contains more than one line of information. For that the cells should wrap the content and display it as multi-line text (automatically or at least on user-action). Setting the $height property during table generation will not solve the problem.
Grab latest Webix package ( you need version 1.5 ), and try to do the same as in the next sample
http://docs.webix.com/samples/15_datatable/07_resize/10_row_auto_height.html
Hi maksim,
for me this only works if the data is included in the script as in the example. If you run the example with loading json data from external file, the multi-line sizing of the row cells fails. The correct sizing also fails if you adjust the column width manually (-> resizeColumn:true). “onColumnResize :webix.once(function(){this.adjustRowHeight(“title”, true);})” doesn’t do it.
Any hint to solve the problem?
Please check the attached sample
http://webix.com/snippet/cee56cba
the solution with onAfterLoad must trigger resizing after any data loading operation. Handler for onColumnResize will trigger row adjusting after column resizing.
Thank you,
that works fine if there is only one column with long text.
How do you handle multiple columns with long text?
Unfortunately there is no built in solution for such use-case
Hi Maksim,
this modified adjustRowHeight function works fine for me:
webix.extend(webix.ui.datatable, {
myAdjustRowHeight:function(id, silent, rId){
function processRow(that,obj){
var h = [that._settings.rowHeight], config;
for(var i=0;i<id.length;i++){
config = that.getColumnConfig(id[i]);
d.style.width = config.width+"px";
d.innerHTML = that._getValue(obj, config, 0);
h.push(d.scrollHeight);
}
obj.$height = Math.max.apply(null,h);
}
if(typeof id == 'string') id=[id];
var d = webix.html.create("DIV",{"class":
"webix_table_cell webix_measure_size webix_cell"},"");
d.style.cssText = "height:1px; visibility:hidden;
position:absolute;
top:0px; left:0px; overflow:hidden;";
this.$view.appendChild(d);
if(rId){
var obj = this.getItem(rId);
processRow(this,obj);
}
else{
this.data.each(function(obj){
processRow(this,obj);
}, this);
}
d = webix.html.remove(d);
if (!silent)
this.refresh();
}
});
and in the datatable definition (example from http://webix.com/snippet/cee56cba):
on:{
onAfterLoad:function(){
webix.delay(function(){
this.myAdjustRowHeight(["title","year"],true);
this.render();
}, this);
},
onColumnResize:function(){
this.myAdjustRowHeight(["title","year"],true);
this.render();
},
onDataUpdate:function(rId,data){ // called after cell update from editor
this.myAdjustRowHeight(["title","year"],true,rId);
this.render();
}
}
The first argument in myAdjustRowHeight could be a string (->a single column id) or an array of column ids. The third one is optional and should be a valid row-Id. If set, only for this row the row-height will be adjusted.
One important hint: This function doesn’t work together with the minified version of webix (webix.js) provided in the download!
But if you use webix_debug.js, it works fine, even if webix_debug.js is compressed with the tool from Dean Edwards (783kB → 284kB). Works also if webix_debug is minified with UglifyJS (->464kB).
But It may fail if the compression is done by a different tool!
Have a nice day!
Looks interesting, we can include something similar in the next build
Thanks for the shared code.
By the way, to make above compatible with compressed code you need to replace commands starting from “_”.
“_settings” can be replaced with “config”
“_getValue(obj, config,0)” can be replaced with “getText(obj.id, config.id)”
Hello, Maksim. May i ask you about next problem?
i used your code for multiline text in cell and it works great, but one little thing is hurting me. When tabledata is loading, i see text “loading…”. Its good. But after this, i see table without multilinetext, i cant press any controls, and after 3-5 second cells transform into multiline and all becomes good. How can i denied render of table before multiline script finish his work?
Thanks a lot for answer
Can anyone help me - how to get Multiline header text in datatable.
Hello devs,
I’m using the @gert solution with the @marksim update. It works like a charm and would be great to have this feature within the framework.
Thanks!
I am doing the same as @Nom4d3 now. @gert came up with a great solution. I was working on a something along the same lines, but hit I’m not a Javascript wizard like he is.
@maksim I agree with the guys here, this would be a great feature to have in the framework by default (maybe as adjustRowHeightByColumns(array(), bool)?). It’s not a cheap method, but not overly expensive, and borderline necessary for anyone using big dynamic datasets for datatables.
this works fine but If cell contains a button and button text is too long then it wont wrap. Any solution for this ?
Beware that adjustRowHeight is documented to “slow down a component a lot”. This is unfortunate since simple HTML tables don’t have this problem, and they wrap text by default. But the Webix DataTable isn’t a <table>; it’s a collection of <div>s.