pickList with wrong z-index appears behind Window

[claudiobosticco]

SmartClient Version: v11.1p_2017-12-02/AllModules Development Only (built 2017-12-02)

Chrome, Safari, Firefox on High Sierra

Hello, I'm trying to use a TreeGrid as a pickList for a MultiComboBoxItem
Please try this test case (I run it in the #nodeTitles sample):

isc.DynamicForm.create({
    ID: "formTab1",
    width: '100%',
    height: "100%",
    autoDraw: false,
    fields: [
        {
            name: "EMAIL",
            type: "text",
            title: "Email"
        },
        {
            name: "VAT_NUMBER",
            type: "text",
            title: "Vat Number"
        },
        {
            name: "NAME",
            type: "text",
            title: "Name"
        },
        {
            name: "EMPLOYEES",
            ID: "employeesMultiComboBoxInWindow",
            editorType: "MultiComboBoxItem",
            optionDataSource: "employees",
            displayField: "Name",
            valueField: "EmployeeId",
            layoutStyle: "flowReverse",
            comboBoxProperties: {
                pickListConstructor: "TreeGrid",
                pickListProperties: {
                    dataSource: "employees",
                    autoFetchData: true,
                    nodeIcon: "icons/16/person.png",
                    folderIcon: "icons/16/person.png",
                    showOpenIcons: false,
                    showDropIcons: false,
                    closedIconSuffix: "",
                    dataProperties: {
                        loadDataOnDemand: false
                    },
                    fields: [
                        {name: "Name", formatCellValue: "record.Job+': '+value"}
                    ],
                    recordClick: function (viewer, node, recordNum, field, fieldNum, value, rawValue) {
                        if (node.children && node.children.length > 0) {
                            this.data.openFolder(node)
                        } else {
                            var value = employeesMultiComboBoxInWindow.getValue();
                            if (value) {
                                if (value.contains(node.EmployeeId)) {
                                    value.push(node.EmployeeId);
                                    employeesMultiComboBoxInWindow.setValue(value);
                                    employeesMultiComboBoxInWindow.comboBox.pickList.hide();
                                } else {
                                    value.push(node.EmployeeId);
                                    employeesMultiComboBoxInWindow.setValue(value);
                                    employeesMultiComboBoxInWindow.comboBox.pickList.hide();
                                }
                            } else {
                                employeesMultiComboBoxInWindow.setValue([node.EmployeeId]);
                                employeesMultiComboBoxInWindow.comboBox.pickList.hide();
                            }
                        }
                    }
                }
            }
        }
    ]
})

isc.VLayout.create({
    ID: "vLayoutTab1",
    width: "100%",
    height: "100%",
    autoDraw: false,
    members: [
        formTab1
    ]
});

isc.DynamicForm.create({
    ID: "formTab2",
    width: '100%',
    height: "100%",
    autoDraw: false,
    items: [
        {
            type: "text",
            name: "SUBJECT",
            width: "100%",
            title: "Subject"
        },
        {
            name: "TO",
            title: "TO",
            width: 200,
            titleOrientation: "left",
            editorType: "MultiComboBoxItem",
            layoutStyle: "flowReverse",
            addUnknownValues: true,
            titleVAlign: "top"
        },
        {
            name: "TEXT",
            type: "text",
            height: "100%",
            width: "100%",
            editorType: "RichTextItem"
        }
    ]
});

isc.VLayout.create({
    ID: "vLayoutTab2",
    width: "100%",
    height: "100%",
    autoDraw: false,
    members: [
        formTab2
    ]
});

isc.TabSet.create({
    ID: "tabSet",
    width: "100%",
    height: "100%",
    autoDraw: false,
    tabSelected: function (tabNum, tabPane, ID, tab, name) {
        fooWindow.handleTabSelection();
    },
    tabs: [
        {
            name: "tab1",
            title: "Create",
            handleNext: function () {
                tabSet.selectTab("tab2");
            },
            handleBack: function () {

            },
            pane: vLayoutTab1
        },
        {
            name: "tab2",
            title: "Invite",
            handleNext: function () {

            },
            handleBack: function () {
                tabSet.selectTab("tab1");
            },
            pane: formTab2
        }
    ]
});

isc.IButton.create({
    ID: "backButton",
    autoFit: true,
    title: "Back",
    autoDraw: false,
    click: function () {
        tabSet.getSelectedTab().handleBack();
    }
});

isc.IButton.create({
    ID: "nextButton",
    autoFit: true,
    title: "Next",
    autoDraw: false,
    click: function () {
        tabSet.getSelectedTab().handleNext();
    }
});

isc.IButton.create({
    ID: "cancelButton",
    autoFit: true,
    title: "Cancel",
    autoDraw: false,
    click: function () {
        fooWindow.close();
    }
});

isc.IButton.create({
    ID: "sendButton",
    autoFit: true,
    title: "Send",
    autoDraw: false,
    click: function () {
        if (formTab2.validate()) {
            var values = formTab2.getValues();
            var destinatari = values.DESTINATARI.join(",");
            values.DESTINATARI = destinatari;

            fooWindow.close();
            // STORICO_MAIL.addData(values);
        }
    }
});

isc.IButton.create({
    ID: "createButton",
    autoFit: true,
    title: "Crea",
    autoDraw: false,
    click: function () {
        if (formTab1.validate()) {
            fooWindow.close();
        }
    }
});

isc.Window.create({
    ID: "fooWindow",
    width: 400,
    height: 300,
    autoCenter: true,
    showFooter: true,
    isModal: true,
    showMinimizeButton: false,
    items: [
        tabSet
    ],
    footerProperties: {
        height: 35,
        membersMargin: 10,
        layoutRightMargin: 10,
        layoutLeftMargin: 10,
        defaultLayoutAlign: "center"
    },
    footerControls: [
        backButton,
        isc.LayoutSpacer.create({width: "*"}),
        cancelButton,
        createButton,
        nextButton,
        sendButton
    ],
    handleTabSelection: function () {
        var selectedTabNumber = tabSet.getSelectedTabNumber();

        if (selectedTabNumber !== undefined && selectedTabNumber !== null) {
            if (selectedTabNumber === 0) {
                sendButton.hide();
                backButton.hide();
                nextButton.show();
                createButton.hide();

            } else if (selectedTabNumber === tabSet.tabs.length - 1) {
                sendButton.show();
                createButton.hide();
                nextButton.hide();
                backButton.show();
            } else {
                sendButton.hide();
                createButton.hide();
                nextButton.hide();
                backButton.show();
            }
        }
    }
});

isc.Button.create({
    title: "Show Window",
    autoFit: true,
    click: function () {
        formTab1.editNewRecord();

        formTab2.editNewRecord();

        tabSet.selectTab(0);

        fooWindow.show();
    }
})

Then open the pickList: if you don't see it, it's because the pickList appears behind the Window.

[Isomorphic]

We see the issue - the picker is behind both the Window and it's modalMask - we'll take a look and get back to you when we have more information.

Note, though, that you probably want to consider using ScrollingTreeMenu as the picker, rather than using TreeGrid directly...

[claudiobosticco]

thanks...but I don't see ScrollingTreeMenu in the docs.

[Isomorphic]

Yes, you're right, that class never made it public - the reason for the problem is that pickLists are supposed to be extensions of PickListMenu, which includes details about the clickMask/zindex - your TreeGrid picker doesn't have those overrides, hence it's appearing below the clickMask (and the window).

However, you obviously can't make use of PickListMenu because it's a ListGrid.

We've reworked this a little, adding a new setting, PickList.listType - "list" or "tree" - setting this will have the item choose either it's pickListConstructor or pickTreeConstructor (new) for it's pickList - by default these are PickListMenu and PickTreeMenu (new) - custom implementations will need to directly extend those classes.

You should see these changes in builds dated December 9 and later.

[Isomorphic]

Quick follow-up - this new feature of easily allowing tree-based pickers is available in 12.0 as of tomorrow's builds - we'll port it to 11.1 following some deeper testing.

If you want to test it yourself, you can do so by just setting listType: "tree" in your comboBoxProperties - you don't need a recordClick() override - there's a new attribute, PickTreeMenu.fireItemClickOnFolders - if unset (the default) or false, folders toggle when you click them - if true, clicking a folder selects it, changes the value and closes the picker, as it does for leaves (including the cancelable itemClick()). Clicking the open/close icon will always toggle folders.

If you see any issues, please try trimming your comboBoxProperties settings down - this was a fairly fiddly enhancement, so it's possible there could be subtle list vs tree misbehaviors for some settings, and that's why it hasn't hit 11.1 right away.

[claudiobosticco]

I've tried it in the 12.0 online showcase and it works.

I'll wait for the 11.1 porting, thank you very much.