Is it possible to have columns adjust their size based on the data in the grid?

[Adam C]

I'm using SlickGrid for a project now where I'm displaying data from
many different tables in a database. Many tables in the database
consist of an "id" column, and one or more "data" columns. SlickGrid
distributes the width of the viewport to all columns equally, but what
I'd like would be to have the "id" columns be much smaller and the
"data" columns much larger. HTML "table" tags automatically perform
this column resizing (per this algorithm: http://www.w3.org/TR/CSS2/tables.html#auto-table-layout),
but since SlickGrid is implemented with "div" tags they don't have
that property.

I understand that the columns are rendered before any grid data is
retrieved (I'm using JSON-P to populate the grid), but I'd be willing
to sacrifice hitting the database twice and loading just the first row
of the table to get data about the appropriate widths and then
throwing it away. It's also not possible for me to hard-code the
column widths, since the same grid will display many different tables.

Has anybody else run into this problem? What do you do to solve it?

Thanks,
Adam

[Michael Leibman]

Just like in HTML tables, without having all of the data and doing all of the layout calculations, it is not possible to do this.

Since SlickGrid only displays what is currently visible and all the widths are fixed, this is not supported.

What I would recommend in your case, is to set up some defaults based on the column data type.  For example, 30px for ID, 50px for numeric, 60px for date/datetime & 200px for text.

--
To unsubscribe, reply using "remove me" as the subject.

[Naresh Nagabhushanam]

crated a plugin for slickgrid auto column size. checkout

https://github.com/naresh-n/slickgrid-column-data-autosize

[Steve Zlamany]

You can specify the column size for each  column.

Once you get the SOURCE ARRAY - prior to putting it into a SlickGrid - simply measure each text for length.

Then set the column size to that value.

I do exactly that.

What is JSON-P and how does that affect you getting the SOURCE ARRAY and making the SlickGrid??

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[NewUser]

@szlamany, do you have the source code of how you get each column size to its content length?

[Steve Zlamany]

This function measures the text width

function textWidth(strText, blnBold) {

if ((strText || "").length == 0) {

return 0;

}

var strId = "acs-text-width" + (blnBold ? "-bold" : "");

var wesWidth = $("#" + strId);

if (wesWidth.length == 0) {

wesWidth = $("<span id='" + strId + "'></span>").appendTo("body");

}

return wesWidth.html(strText).outerWidth(); // * 1.15;

}

and it needs this CSS

#acs-text-width

{

position: absolute;

left: -1000px;

top: -1000px;

font-family: Verdana;

font-size: 11px;

}

#acs-text-width-bold

{

position: absolute;

left: -1000px;

top: -1000px;

font-weight: bold;

font-family: Verdana;

font-size: 11px;

}

To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+unsubscribe@googlegroups.com.

[NewUser]

Does this acs-text-width works with slick grid?

[Steve Zlamany]

You have to loop through each row of your data source - measure the text in each cell of the column you want to "resize" to the max.  This is done outside of slickgrid - in the code that creates the grid and sets the source array.

for (var j = 0; j < arrTotals.length; j++) {

if ((arrTotals[j]["~font"] || "") == "BOLD") {

intCTemp = textWidth(arrTotals[j][pnList[i]], true) + 22;// + 10;

} else {

intCTemp = textWidth(arrTotals[j][pnList[i]], false) + 22;// + 10;

}

if (intCTemp > intCInfo) {

intCInfo = intCTemp;

}

}

Then you set the column width to the max value that you gathered in that loop.

It is amazingly fast - I've put up huge grids and did measure each cell in each row of the columns I want max-sized.

I just realized I could even fine tune that code further.  Create the two "SPAN's" up front and "retain" the jQuery element sets in global variables.  Like I said though - I've never noticed the speed of grid display even slightly affected by this.

--

You received this message because you are subscribed to the Google Groups "SlickGrid" group.