When I call the "flex" method, the bottom line overflows

[eloan]

Hi.

I want the optimum width for each column.
When I scroll, the "flex" method is called on the visible column.
But when I move to the bottom line, the display breaks.

The reason is that the header is displayed in 2 lines, but when I call the "flex" method, the header becomes 1 line and the height of the body changes after adjustment.
If the amount of data increases, the screen will flicker and it will not look good.
It seems that it can be solved if the height of the header part can be fixed. Is it possible to fix the height of the header?

Also, if there is another method to automatically adjust the width of the display area, please let me know.

I used v.3.3.4 before and want all widths to be adjusted in the initial display. Since the html structure has changed, can't it be adjusted according to all data?

I using pqGrid version is 7.0.0.

Best regards.

Code: [Select]

<div id="testGrid" style="margin:auto;"></div>
<script>
function refresh() {
var $grid = $("#testGrid");
var obj = $grid.pqGrid("getViewPortIndx");
for(var idx = obj.finalH; idx > obj.initH; idx--) {
$grid.pqGrid("flex", idx);
}
}
$(function() {
var colModel = [ {"title":"4/1<br>(Mon)","dataType":"string","dataIndx":"data1","halign":"center"}
,{"title":"4/2<br>(Tue)","dataType":"string","dataIndx":"data2","halign":"center"}
,{"title":"4/3<br>(Wed)","dataType":"string","dataIndx":"data3","halign":"center"}
];
var dataModel = {"location":"local","curPage":1,"dataType":"JSON","data":[
{ data1: 'a', data3:'aaaaaaaaaaaaaaaa' }, { data1: 'b' }, { data1: 'c' },{ data1: 'd' },{ data1: 'e' },{ data1: 'f'}
, { data2: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' }
]};

var obj = {"width":"auto","height":"200","showTitle":true,"numberCell":{"show":false},"draggable":false,"wrap":true,"stripeRows":true}
obj.colModel = colModel;obj.dataModel = dataModel;

var grid = $("#testGrid").pqGrid(obj);
grid.pqGrid({ scroll: function(event) { setTimeout(function() { refresh(); }, 500)}});
refresh();
});
</script>


[paramvir]

you can take the help of scrollStop event instead of using setTimeout.

Code: [Select]

    flex:{
    one: true
    },
    scrollStop: function(){
    this.flex();
        this.flex();     
    }   

and header height can be fixed with autoRowHead: false

Code: [Select]

    rowHtHead: 50,
    autoRowHead: false,


https://jsfiddle.net/1sq9Lckm/1/

[eloan]

Thank you for your nice advice.
My worries have been resolved.