Rendering issue with grid-style multi select item

[asgillett]

SmartClient Version: v11.0p_2016-11-04/AllModules Development Only (built 2016-11-04)

Hi,

I've come across a situation where I had two screens with identical select lists that were rendered differently on each screen. After investigating I found that one of the select lists was being rendered before its valuemap was set and the other afterwards.

The example code below shows two select lists, the first with a valuemap and the second without. Pressing the button will set a valuemap on the second select list. I expected to two lists to have the same appearance.

The main difference is the size of the list. The one that is rendered with a valuemap displays 6 rows while the other only displays 4 rows. I couldn't find any way to control the height of the displayed select list. Is there one?

There are a couple of other differences that I've noticed, but which are not especially important to me:

• the select list example that I started with included some markup that made some values bold. This markup is ignored in one of my lists and rendered as text in the other.

• using google chrome on linux (Version 54.0.2840.90 (64-bit)), the background color of the second list is grey, whereas on all other browsers (including chrome on windows) it is white. This may well be a linux / google chrome problem rather than a smartclient problem.

list2Values = {
            "IT" : "Italy",
            "RS" : "Russia",
            "BR" : "<b>Brazil</b>",
            "CA" : "Canada",
            "MX" : "Mexico",
            "SP" : "Spain",
            "NZ" : "New Zealand"
        };

isc.VLayout.create({
    membersMargin:10,
    members:[
        isc.DynamicForm.create({
            width: 200,
            fields: [{
                title: "List 1", type: "select",
                multiple: true,
                multipleAppearance: "grid",
                valueMap: {
                    "US" : "<b>United States</b>",
                    "CH" : "China",
                    "JA" : "<b>Japan</b>",
                    "IN" : "India",
                    "GM" : "Germany",
                    "FR" : "France",
                    "AU" : "Australia"
                }
            },{
                title: "List 2", type: "select",
                ID: "field2",
                multiple: true,
                multipleAppearance: "grid"
            }]
        }),
        isc.IButton.create({
            title: "Set 'List 2' Values",
            click: "field2.setValueMap(list2Values)"
        })
    ]
});

[Isomorphic]

These are all behaviors of the native <select> control.

1. While you can use formItem.height to control the size of the native control, the auto-sizing behavior displayed by the native control only occurs if the values are provided when the control is first rendered.

2. We agree, the background color change is likely a Linux/Chrome issue; you can inspect the styles to see that we aren't doing anything.

3. The browser appears to ignore markup when the <select> item's values are updated, and probably the only workaround would be to completely rebuild the control's HTML, which could introduce other problems

What we'd recommend is to either use the SelectItem control with the default multipleAppearance of "picklist", or if you really need consistent control over size, styling and behavior of a grid-like multi-select, use a true embedded ListGrid via a CanvasItem, as shown in this sample.