In SmartClient 10 after auto-fit, ListGrid columns are still too wide. Column width is reduced, but not to a minimum width that utilizes the available column header height.
This worked correctly in SmartClient version 8.3 (same as Figure D below).
In our UI, each pixel of horizontal real-estate counts, so we need Auto-Fit to tighten up the grid as much as possible (like SC 8.3).
TEST CASE:
1) Go to: http://www.smartclient.com/#columnOrder
__________________________________
2) Replace contents of countryData tab with:
countryData = [{ continent:"North America", countryName:"US", countryCode:"US", capital:"Washington, DC"},
{ continent:"Asia", countryName:"India", countryCode:"IN", capital:"New Delhi"},
{ continent:"Europe", countryName:"France", countryCode:"FR", capital:"Paris"},
{ continent:"North America", countryName:"Canada", countryCode:"CA", capital:"Ottawa"},
{ continent:"North America", countryName:"Mexico", countryCode:"MX", capital:"Mexico (Distrito Federal)"},
{ continent:"Europe", countryName:"Spain", countryCode:"SP", capital:"Madrid"}]
__________________________________
3) Click the "Try it" button.
__________________________________
4) Replace contents of columnOrder.js tab with:
isc.ListGrid.create({
ID: "countryList",
height: 600,
width: 600,
alternateRecordStyles: true,
leaveScrollbarGap: false,
showHeaderMenuButton: false,
data: countryData,
headerHeight: 60,
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
autoFitFieldsFillViewport: false,
minFieldWidth: 10,
wrapHeaderTitles: true,
fields: [
{ name:"countryCode", title:"Flag", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png" },
{ name:"countryName", title:"Cash Contribution per Unit", wrap: true, width:10 },
{ name:"capital", title:"Capital", width:10 },
{ name:"continent", title:"Continent", width:10 }
]
})
__________________________________
5) Click the "Try it" button.
=====================================================
Issues: (For each Figure below, refer to the annotated screenshot autoFitIssues01.png)
1) On initial grid display, auto-fit fails.
On initial grid display, "Cash Contribution per Unit" column is not wrapped. (Figure A)
__________________________________
2) On manual auto-fit, auto-fit fails.
Right-click on the "Cash Contribution per Unit" column header, then choose either "Auto Fit All Columns" or "Auto Fit Column." After auto-fit, the "Cash Contribution per Unit" column is still not wrapped. (Figure A)
__________________________________
3) Auto-fit reduces width but not completely/sufficiently.
- Manually reduce the width of the "Cash Contribution per Unit" column until is just starts to wrap. (Figure B)
- Right-click on the "Cash Contribution per Unit" column header, then choose either "Auto Fit All Columns" or "Auto Fit Column." After auto-fit, the "Cash Contribution per Unit" column is wrapped, but still too wide. (Figure C)
- Now reduce the column width further manually, to a width that accommodates both column title and data values. This is the width that programmatic auto-fit should have achieved. (Figure D)
_________________________________
Tested on:
Browsers: Windows Chrome 45, Internet Explorer 11
SmartClient 10 versions:
- MAIN_2015-12-17_1450424649_alex_apex/WWW Deployment (your website)
- v10.0p_2014-12-17/PowerEdition Development Only (our development environment)
Thanks, Jake
This worked correctly in SmartClient version 8.3 (same as Figure D below).
In our UI, each pixel of horizontal real-estate counts, so we need Auto-Fit to tighten up the grid as much as possible (like SC 8.3).
TEST CASE:
1) Go to: http://www.smartclient.com/#columnOrder
__________________________________
2) Replace contents of countryData tab with:
countryData = [{ continent:"North America", countryName:"US", countryCode:"US", capital:"Washington, DC"},
{ continent:"Asia", countryName:"India", countryCode:"IN", capital:"New Delhi"},
{ continent:"Europe", countryName:"France", countryCode:"FR", capital:"Paris"},
{ continent:"North America", countryName:"Canada", countryCode:"CA", capital:"Ottawa"},
{ continent:"North America", countryName:"Mexico", countryCode:"MX", capital:"Mexico (Distrito Federal)"},
{ continent:"Europe", countryName:"Spain", countryCode:"SP", capital:"Madrid"}]
__________________________________
3) Click the "Try it" button.
__________________________________
4) Replace contents of columnOrder.js tab with:
isc.ListGrid.create({
ID: "countryList",
height: 600,
width: 600,
alternateRecordStyles: true,
leaveScrollbarGap: false,
showHeaderMenuButton: false,
data: countryData,
headerHeight: 60,
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
autoFitFieldsFillViewport: false,
minFieldWidth: 10,
wrapHeaderTitles: true,
fields: [
{ name:"countryCode", title:"Flag", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png" },
{ name:"countryName", title:"Cash Contribution per Unit", wrap: true, width:10 },
{ name:"capital", title:"Capital", width:10 },
{ name:"continent", title:"Continent", width:10 }
]
})
__________________________________
5) Click the "Try it" button.
=====================================================
Issues: (For each Figure below, refer to the annotated screenshot autoFitIssues01.png)
1) On initial grid display, auto-fit fails.
On initial grid display, "Cash Contribution per Unit" column is not wrapped. (Figure A)
__________________________________
2) On manual auto-fit, auto-fit fails.
Right-click on the "Cash Contribution per Unit" column header, then choose either "Auto Fit All Columns" or "Auto Fit Column." After auto-fit, the "Cash Contribution per Unit" column is still not wrapped. (Figure A)
__________________________________
3) Auto-fit reduces width but not completely/sufficiently.
- Manually reduce the width of the "Cash Contribution per Unit" column until is just starts to wrap. (Figure B)
- Right-click on the "Cash Contribution per Unit" column header, then choose either "Auto Fit All Columns" or "Auto Fit Column." After auto-fit, the "Cash Contribution per Unit" column is wrapped, but still too wide. (Figure C)
- Now reduce the column width further manually, to a width that accommodates both column title and data values. This is the width that programmatic auto-fit should have achieved. (Figure D)
_________________________________
Tested on:
Browsers: Windows Chrome 45, Internet Explorer 11
SmartClient 10 versions:
- MAIN_2015-12-17_1450424649_alex_apex/WWW Deployment (your website)
- v10.0p_2014-12-17/PowerEdition Development Only (our development environment)
Thanks, Jake
Comment