Howto exchange the expand/collapse icon of a groupnode with a full row height version

[Blama]

Hi Isomorphic,

I have a ListGrid and want to change the design of a groupNode's expand and collapse buttons.
Files are called "ListGrid/group_opened.gif" and "ListGrid/group_closed.gif" (both 16px * 16px).

I did not find a reference to the file names in the skin's css or js. Could you give pointers on how to exchange these icons against full row-height versions (30px * 30px, no transparency) with no borders/margin/padding? -> The row's background is only visible after right of the icon.

Thank you & Best regards,
Blama

[Isomorphic]

These are the default settings for listGrid.expansionFieldTrueImage / FalseImage and you can affect their size with expansionFieldImageWidth/Height.

There is no way to make them actually fill the entire row, covering the padding, unless there is no padding. That would actually require a different DOM structure (images floating on top of the table row / cell elements). But they can fill the entire cell other than border/padding.

[Blama]

Hi Isomorphic,

I was looking for groupNodes. I found ListGrid.setGroupIcon / ListGrid.setGroupIconSize and added it to my ListGrid.setDefaultProperties():

ListGrid lg = new ListGrid() {
			{
				setAutoFitFieldsFillViewport(true);
				setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
				setCanGroupBy(true);
				setCanMultiGroup(false);
				setCanEdit(false);
				setShowFilterEditor(false);
				setCanFreezeFields(false);
				setCanReorderFields(false);
[B]				setCellHeight(30);
				setHeaderHeight(35);
				setGroupIcon("[SKINIMG]sub-icon_30x28px/menue.png");
				setGroupIconSize(30);
				setGroupLeadingIndent(0);[/B]
			}
		};
		ListGrid.setDefaultProperties(lg);

I get the following result for a ListGrid.
Please see screenshots of the deployed app in FF and Chrome (using v9.1p_2014-05-19):

1. FF-complete-normal.png:
   You see a ListGrid in an SectionStack with some custom skinning based on Simplicity. Issues here:
   1. Small black stripe left to the customized (see code above) groupnode-icon (30px*30px).
   2. groupTitle right to the groupnode-icon is not centred vertically.
2. Chrome-td_groupnode.png / Chrome-td_groupnode-div.png:
   Chrome Inspect Element of the ListGrid's table.tbody.td and table.tbody.td.div in order to show the problem with the 3px (?) wide black stripe.
3. menue_opened.png
   The icon used

I hope I made the case clear. If not I can try to be more precise.

Thank you & Best regards,
Blama

[Isomorphic]

The "black stripe" is probably the left padding on the cell, which you can remove by removing it from the CSS style being applied.

We'll check on the centering.

[Blama]

Hi Isomorphic,

you were right about the "black stripe".

.groupNode {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000000;
	[B]padding-left: 0px;[/B]
}

solved it. I'll wait for your suggestion on the centering.

Thanks,
Blama

[Isomorphic]

The icon is currently aligned to "text-top". We can make a change to vertically center the icon which will fix the centering for you. We've tried this out and it seems to have the desired effect while leaving the default appearance still looking good.

Which branch are you working in?

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

that's great, thanks a lot! I'm using 4.1p.

Best regards,
Blama

[Isomorphic]

This change has been made in both mainline (5.0) and 4.1p.
For 4.1p you'll need the next nightly build (May 23)

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

the change works for me in v9.1p_2014-05-25.

Thanks a lot,
Blama

[Blama]

Hi Isomorphic,

using spacious Tahoe in current 6.1d (SNAPSHOT_v11.1d_2017-03-25) I have a problem here again. Please see this picture:


It seems that marked <div>'s height (the one with the measurements 499x19) is dependent on groupIconSize.
For my skin, using groupIconSize:24 in load_skin.js, the text is visibly off-center and the DIV's height in the Chromium console is 24.. Actually also in the screenshot you can see that the icon is not in the row-center, as the image is bottom-aligned in the row-centered (but larger than the icon) DIV.
Also, it seems that the Icon SPAN is not centered despite its vertical-align:middle.

This one is an annoying one, as the design just seems wrong. The same is true for this one in the same area.

Best regards
Blama

[Isomorphic]

The screenshot you're showing is either centered or off by one pixel depending on how you feel about ascenders and descenders. If you're having alignment problems, please post a screenshot of what you're actually seeing that's misaligned.

Note that you need to potentially adjust the cell height and vertical padding on the group node to accommodate a larger icon, or you won't get centering. Note also that there is a thicket of CSS bugs here we're working around.

[Blama]

Hi Isomorphic,

here is a screenshot of the testcase I use (Tahoe SNAPSHOT_v11.1d_2017-03-27):


JS code is:

isc.Canvas.resizeFonts(3); // Spacious-settings
isc.Canvas.resizeControls(10); // Spacious-settings

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    cellHeight: 30,
    headerHeight:40,
    groupIconSize:24,
    fields:[
        {name:"countryCode", title:"Flag", width:50 },
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital" },
        {name:"continent", title:"Continent"}
    ],
    groupByField: "continent"
});

How would I change the vertical padding on the group node, if that's all that is needed?

Thank you & Best regards
Blama

[Isomorphic]

getCellCSSText() would be the override point to use. Note all states (rollover, etc) must have matching border and padding sizes due to browser limitations.