Auto Column Sizing Example

Plugin Options:

GridAutosizeColsMode
viewportSwitchToScrollModeWidthPercent
viewportMinWidthPx
viewportMaxWidthPx
autosizeColPaddingPx
autosizeTextAvgToMWidthRatio

Column Options:

'Locked' and 'Guide' use column width. Others will use content. When retrieving content values for a column, the first defined of the following will be used:

 Column 1 (#)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 2 (Title)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 3 (Duration)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 4 (Random Word)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 5 (% Complete)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 6 (Start)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 7 (Effort Driven)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
 Column 8 (Random Text)
autosizeMode
rowSelectionMode   rowSelectionCount
valueFilterMode
widthEvalMode
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)

Test Grid

Time taken = -
Viewport width before = 900px
Viewport width after = -
(limits -)
Warning: this example has 500,000 rows, so badly optimised column width tests (ie. checking all rows) may take 100 seconds per column. If it looks like the page has crashed, just wait a while!

View Source:

#
Title
Duration
Random word
% Complete
Start
Effort Driven
Random Text
0
Task 0
5 days and some
good
01/01/2007
Crimea
1
Task 1
10 days
bad
01/01/2001
Crimea good alteration platypus
2
Task 2
10 days
dog
01/01/2007
platypus alteration Crimea dog vegetable bad dog dog vegetable bad
3
Task 3
10 days
something
01/01/2003
alteration rumplestiltskin rumplestiltskin dog good bad good alteration
4
Task 4
10 days
another word
01/01/2006
bad
5
Task 5
5 days and some
good
01/01/2001
vegetable vegetable alteration bad rumplestiltskin good Crimea dog alteration
6
Task 6
10 days
bad
01/01/2002
Crimea Crimea platypus bad platypus dog rumplestiltskin platypus platypus
7
Task 7
10 days
dog
01/01/2004
good rumplestiltskin vegetable dog
8
Task 8
10 days
something
01/01/2004
good alteration platypus vegetable alteration rumplestiltskin