Our blazing fast Grid component built with pure JavaScript


Post by kerstin »

After loading content on demand, how can I adjust the column width to match the content?
Thanks,
/k

Post by johan.isaksson »

Hi,

There is an internal function which could be used for this purpose, `Column#resizeToMatchWidestString()`. Try calling it for each column after load and see if it works for you. I will discuss internally if this should be a public function.
Best regards,
Johan Isaksson

Post by johan.isaksson »

It will be public in the next patch release.
Best regards,
Johan Isaksson

Post by kerstin »

Thanks!
How do I get all columns? We are using grouped headers.

Post by johan.isaksson »

grid.columns is a store with the columns in it. grid.columns.leaves should get you the bottom "row" of headers = columns
Best regards,
Johan Isaksson

Post by kerstin »

Thanks!
Now it resizes, but not to the size we need, I think the widest string found is the column heading. The values in our cells are html, divs and tables, is there anyway we can set the width to use when resizing?

Post by johan.isaksson »

Not sure I follow, could you please share a screenshot?
Best regards,
Johan Isaksson

Post by kerstin »

Before loading data, default width of columns:
Before load on demand.PNG
Before load on demand.PNG (3.1 KiB) Viewed 4169 times
After loading data and resizeToMatch:
After load on demand.PNG
After load on demand.PNG (2.95 KiB) Viewed 4169 times
Cell content (wrapped in a div) is "A very long string to show"

Post by johan.isaksson »

If I try putting that text in a column in our groupedheaders demo it resizes as expected. I guess some styling on your div messes our measuring up. Could you please share style used for it?
Best regards,
Johan Isaksson

Post by kerstin »

This is what cell content looks like:
<div class="activity item-length-1 vertical-activity left" style="background: #add8e6;color: #00008b;" event_id="nnnnnn">A very long string to show</div>

Also tried <div>A very long string to show</div> with the same result

Post Reply