SmartClient_v90p_2014-01-09_PowerEdition
When a field contains an image, the ListGrid is not autofitting the data vertically until the user does something to trigger this behavior. See the test case for an example.
Repro steps:
1. Load the test case
2. Observe that the grid displays 13 records and takes approximately 300 pixels in height
3. Un-comment the score field in the datasource configuration
4. Reload the test case
5. Observe that only 9 records are displayed and the grid still utilizes approximately 300 pixels. There is also a weird record selection problem when the mouse is moved over the grid starting at the top moving down. The highlighted row is not the row that the mouse is over and this gets worse the further down the grid the mouse is moved.
6. Re-size any column.
7. Observe that the grid shows all 13 records and uses approximately 475 pixels. (This is what I would expect the grid to do, autofit to the data).
Since I can get the expected result by resizing a field or calling grid.resizeBy(1,0), I think this is a bug/timing issue. The grid seems to autofit to the what it thinks it should be, but only by using the height of a text field OR the image has not loaded yet and it sees the height at approximately 300 pixels.
When a field contains an image, the ListGrid is not autofitting the data vertically until the user does something to trigger this behavior. See the test case for an example.
Repro steps:
1. Load the test case
2. Observe that the grid displays 13 records and takes approximately 300 pixels in height
3. Un-comment the score field in the datasource configuration
4. Reload the test case
5. Observe that only 9 records are displayed and the grid still utilizes approximately 300 pixels. There is also a weird record selection problem when the mouse is moved over the grid starting at the top moving down. The highlighted row is not the row that the mouse is over and this gets worse the further down the grid the mouse is moved.
6. Re-size any column.
7. Observe that the grid shows all 13 records and uses approximately 475 pixels. (This is what I would expect the grid to do, autofit to the data).
Since I can get the expected result by resizing a field or calling grid.resizeBy(1,0), I think this is a bug/timing issue. The grid seems to autofit to the what it thinks it should be, but only by using the height of a text field OR the image has not loaded yet and it sees the height at approximately 300 pixels.
Code:
<!DOCTYPE html>
<html>
<head>
<title >SNT-13388</title>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic/";
</script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Grids.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
</head>
<body>
<script type="text/javascript">
var data = [
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Long Project Name", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Feliz Navidad", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Whitehouse Lawn Maintenance", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Automated Teller MAchine Upgrades", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Saks Avenue", redflag: "", owner: "Univerity of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" }
];
</script>
</head>
<body>
<script type="text/javascript">
isc.DataSource.create({
ID: "ds",
fields: [
{name:"project", title:"Project", type:"text" },
{name:"redflag", type:"text", title:"Flag"},
{name:"owner", type:"text", title:"Owner"},
{name:"ins", type:"integer", title:"#Inspections"},
{name:"obs", type:"integer", title:"#Observations"},
{name:"unsafe", type:"integer", title:"# Non-Compliant"},
{name:"safe", type:"integer", title:"# Compliant"},
{name:"insDate", type:"date", title:"Last Inspection"},
{name:"score", type:"text", title:"Score"},
{name:"link", type:"text", title:""}
],
cacheData:data,
clientOnly: true
});
var grid = isc.ListGrid.create({
dataSource : ds,
dataFetchMode : "local",
autoFetchData: true,
width : 800,
align : "center",
autoFitData : "vertical",
autoFitMaxHeight : 600,
alternateRecordStyles : true
});
</script>
</body>
</html>