Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • pickList with wrong z-index appears behind Window

    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):

    Code:
    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.

  • #2
    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...

    Comment


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

      Comment


      • #4
        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.
        Last edited by Isomorphic; 7th Dec 2017, 22:11.

        Comment


        • #5
          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.
          Last edited by Isomorphic; 8th Dec 2017, 03:40.

          Comment

          Working...
          X