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

groupNode style issue on ListGrid

$
0
0
Hello,

I'm having an issue when grouping ListGrid's records. As can be seen by the printScreens, the group Nodes (eg. Asia, Europe, etc) are being clipped. This issue happens for all skins, both on version v9.1p_2014-06-04 and smartClient's demo pages (development version from 2014-12-09). It has been observed on latest Firefox and Chrome, but not on IE11.

Below is the the code sample:

Code:


var countryData = [
    {
        countryChecked: true,
        continent:"North America",
        countryName:"United States",
        countryCode:"US",
        area:9631420,
        population:298444215,
        gdp:12360.0,
        independence:new Date(1776,6,4),
        government:"federal republic",
        government_desc:2,
        capital:"Washington, DC",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/United_states"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"China",
        countryCode:"CH",
        area:9596960,
        population:1313973713,
        gdp:8859.0,
        government:"Communist state",
        government_desc:0,
        capital:"Beijing",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/China"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"Japan",
        countryCode:"JA",
        area:377835,
        population:127463611,
        gdp:4018.0,
        government:"constitutional monarchy with parliamentary government",
        government_desc:1,
        capital:"Tokyo",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/Japan"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"India",
        countryCode:"IN",
        area:3287590,
        population:1095351995,
        gdp:3611.0,
        independence:new Date(1947,7,15),
        government:"federal republic",
        government_desc:2,
        capital:"New Delhi",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/India"
    }, {
        countryChecked: true,
        continent:"Europe",
        countryName:"Germany",
        countryCode:"GM",
        area:357021,
        population:82422299,
        gdp:2504.0,
        independence:new Date(1871,0,18),
        government:"federal republic",
        government_desc:2,
        capital:"Berlin",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/Germany"
    }, {
        countryChecked: true,
        continent:"Europe",
        countryName:"United Kingdom",
        countryCode:"UK",
        area:244820,
        population:60609153,
        gdp:1830.0,
        independence:new Date(1801,0,1),
        government:"constitutional monarchy",
        government_desc:1,
        capital:"London",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/United_kingdom"
    }, {
        countryChecked: true,
        continent:"Europe",
        countryName:"France",
        countryCode:"FR",
        area:547030,
        population:60876136,
        gdp:1816.0,
        government:"republic",
        government_desc:5,
        capital:"Paris",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/France"
    }, {
        countryChecked: true,
        continent:"Europe",
        countryName:"Italy",
        countryCode:"IT",
        area:301230,
        population:58133509,
        gdp:1698.0,
        independence:new Date(1861,2,17),
        government:"republic",
        government_desc:5,
        capital:"Rome",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/Italy"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"Russia",
        countryCode:"RS",
        area:17075200,
        population:142893540,
        gdp:1589.0,
        independence:new Date(1991,7,24),
        government:"federation",
        government_desc:3,
        capital:"Moscow",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/Russia"
    }, {
        countryChecked: true,
        continent:"South America",
        countryName:"Brazil",
        countryCode:"BR",
        area:8511965,
        population:188078227,
        gdp:1556.0,
        independence:new Date(1822,8,7),
        government:"federative republic",
        government_desc:3,
        capital:"Brasilia",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/Brazil"
    }, {
        countryChecked: true,
        continent:"North America",
        countryName:"Canada",
        countryCode:"CA",
        area:9984670,
        population:33098932,
        gdp:1114.0,
        independence:new Date(1867,6,1),
        government:"constitutional monarchy with parliamentary democracy and federation",
        government_desc:1,
        capital:"Ottawa",
        member_g8:true,
        article:"http://en.wikipedia.org/wiki/Canada"
    }, {
        countryChecked: true,
        continent:"North America",
        countryName:"Mexico",
        countryCode:"MX",
        area:1972550,
        population:107449525,
        gdp:1067.0,
        independence:new Date(1810,8,16),
        government:"federal republic",
        government_desc:2,
        capital:"Mexico (Distrito Federal)",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/Mexico"
    }, {
        countryChecked: true,
        continent:"Europe",
        countryName:"Spain",
        countryCode:"SP",
        area:504782,
        population:40397842,
        gdp:1029.0,
        independence:new Date(1492,0,1),
        government:"parliamentary monarchy",
        government_desc:4,
        capital:"Madrid",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/Spain"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"South Korea",
        countryCode:"KS",
        area:98480,
        population:48846823,
        gdp:965.3,
        independence:new Date(1945,7,15),
        government:"republic",
        government_desc:5,
        capital:"Seoul",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/South_korea"
    }, {
        countryChecked: true,
        continent:"Asia",
        countryName:"Indonesia",
        countryCode:"ID",
        area:1919440,
        population:245452739,
        gdp:865.6,
        independence:new Date(1945,7,17),
        government:"republic",
        government_desc:5,
        capital:"Jakarta",
        member_g8:false,
        article:"http://en.wikipedia.org/wiki/Indonesia"
    }
];

// Show only a subset of the fields
var countryFields = [
    {
        name: "countryChecked",
        width: "50",
        type: "boolean",
        showTitle: false,
        canEdit: true,
        canToggle: true,
        showIf: "true"
    }, {
        name:"countryName",
        width: "100",
    }, {
        name:"government",
        width: "*",
    }, {
        name:"continent",
        showIf:"false"
    }
];

isc.ListGrid.create({
    ID: "countryList",
    width:500,
    height:600,
    data: countryData,
    fields: countryFields,
    groupByField: "continent",
    canCollapseGroup: false,
    showHeaderContextMenu: false
});

isc.VLayout.create({
    height:"100%",
    width: "100%",
    members:[countryList]
});

Upon some investigation, I've noticed the ListGrid must have it's canCollapseGroup property set to false and also the checkbox field must be the first column (reordering the columns makes the issue disapear). Furthermore, I've notice that on the html code generated by smartClient, the td cells have the inline properties height="20" and style="line-height: 0px", and it's contents are wrapped on a div which does not take all the cells height (except for IE, which does not wrap them). A provisory fix would be to style the ListGrid's cells with a custom class and write css rules to address the issue, but I would like to mess as little as possible with skin customization.

Regards

Attached Images
File Type: png groupingIssue1.PNG (45.4 KB)
File Type: png groupingIssue2.PNG (42.1 KB)
File Type: png groupingIssue3.PNG (38.8 KB)
File Type: png groupingIssue4.PNG (45.4 KB)

Viewing all articles
Browse latest Browse all 4756

Trending Articles