Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Rows are misligned when using frozen field and grouping

$
0
0
SmartClient_SNAPSHOT_v91d_2014-02-05_PowerEdition

The following test case shows an issue where rows containing images in a group when using a frozen field become misaligned. I thought this was related to another post, but setting the image height and width did not resolve the issue either.

Test steps
- load test case
- observe project field is frozen and grouped and rows are aligned correctly
- expand the next group (Long Project Name)
- observe row misalignment with frozen field
- continue expand other groups
- observe misalignment gets worse

Looks like the frozen field height is not adjusted to the image field height.

Code:

<!DOCTYPE html>

<html>
<head>
    <title >SNT-13197</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:"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 height='30px' width='150px' 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:"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:"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 height='30px' width='150px' 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:"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 height='30px' width='150px' 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:"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 height='30px' width='150px' 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:"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:"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:"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 height='30px' width='150px' 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
                });
               
                grid.freezeField("project");
                grid.groupBy("project");
                       
        </script>
</body>

</html>


Attached Images
File Type: png star-4.png (1.9 KB)

Viewing all articles
Browse latest Browse all 4756

Trending Articles