12.1p Using Resize Bars with Grids and Layouts

[dswarey]

Hello,

I have run into an issue with resizing a ListGrid in our application that I believe has something to do with how layouts function. I don’t think this is an issue with the framework, I’m just hoping there is something simple I’ve missed.

Essentially, we have a main grid with a TabSet below it. One of its tabs contains a VLayout which has a single ListGrid member with a resize bar. However, this resize bar doesn’t allow the grid to grow in size, only to shrink until it reaches the minHeight of the grid. I have found that disabling the resize bar on the grid, setting canDragResize: true, and setting dragTarget to be the VLayout containing the grid in question provides the functionality I’m looking for. I think the resize bars look much better however and would like to do this using those. I am aware of the resizeBarTarget property but setting that to “next” does not seem to help things.

Is there a way to achieve this using resize bars? Any thoughts on how to do this are greatly appreciated. Please let me know if further information is needed.

SmartClient Version: v12.1p_2021-06-05/Pro Deployment (built 2021-06-05)

isc.ClassFactory.defineClass(“ScreenName”, isc.VLayout).addProperties({
    panelCanvasDefaults: {
        _constructor: isc.VLayout,
        height: “100%”,
        width: “100%”,
        overflow: “auto”,
    },

    mainGridDefaults: {
        _constructor: isc.ListGrid,
        width: “100%”,
        height: 300,
        minHeight: 125,
        margin: 5,
        autoParent: “panelCanvas”,
        showResizeBar: true,
        autoFitFieldWidths: true,
        autoFitWidthApproach: “both”,
        showFilterEditor: true,
        selectionType: “single”,
        allowFilterOperators: false,
        canMultiSort: false,
        dataSource: “mainDataSource”,
        autoFetchData: true
    },

    tabContainerDefaults: {
        _constructor: isc.VLayout,
        height: 1,
        width: “100%”,
        padding: 5,
        autoParent: “panelCanvas”
    },

    mainTabSetDefaults: {
        _constructor: isc.TabSet,
        autoParent: “tabContainer”,
        width: “100%”,
        overflow: “visible”,
        paneContainerOverflow: “visible”
    },

    secondaryPaneDefaults: {
        _constructor: isc.VLayout,
        width: “100%”,
        autoParent: “panelCanvas”
    },

    secondaryGridDefaults: {
        _constructor: isc.ListGrid,
        width: “100%”,
        height: 250,
        minHeight: 125,
        margin: 5,
        showResizeBar: true,
        autoFitFieldWidths: true,
        autoFitWidthApproach: “both”,
        showFilterEditor: true,
        selectionType: “single”,
        allowFilterOperators: false,
        canMultiSort: false,
        autoParent: “secondaryPane”,
        dataSource: “secondaryDataSource”
    },

    initWidget : function() {
        this.Super(“initWidget”, arguments);
        this.addAutoChild(“panelCanvas”);
        this.addAutoChild(“mainGrid”);
        this.addMember(isc.LayoutSpacer.create({height: “*”});
        this.addAutoChild(“tabContainer”);
        this.addAutoChild(“mainTabSet”);
        this.mainTabSet.paneContainer.addProperties({height: 1});
        this.mainTabSet.addTab({title: “Main Tab”, pane: this.addAutoChild(“secondaryPane”)});
        this.addAutoChild(“secondaryGrid”);
    }
});

[Isomorphic]

Hi - first thing we'd like to say is nice job using the AutoChild system maximally. It's a very powerful pattern and many developers do not leverage it properly, as you are.

As far as the layout behavior you want, it sounds like you want the end user to be able to control the relative size of the mainGrid and the secondary grid inside the TabSet, below the main grid. But the resize bar you've added to mainGrid should already achieve that - why add a second one inside the TabSet? Are there maybe additional elements we're not seeing, like something else in the tab with the secondary grid, or contents of another tab that should have different layout behavior?

[dswarey]

Hi Isomorphic,

Thanks for the response!

Referencing the code example from before, the resize bar on mainGrid does resize mainGrid as expected, however that resize bar does not affect the size of secondaryGrid. What we would like to see is that the user is able to resize only secondaryGrid using the resize bar on secondaryGrid, without affecting the size of mainGrid. Currently with this set up, when on "Main Tab" the user can use the resize bar on secondaryGrid only to shrink secondaryGrid but not expand it. It shrinks until the minHeight of 125 is reached and cannot even be expanded back to the starting height of 250. A simple fix for this that we may end up going with is setting the minHeight to be equal to the starting height so that secondaryGrid can neither be shrunk nor expanded even with a resize bar present. I would like to avoid this if possible though.

As for additional elements, there is nothing else in the tab with secondaryGrid however there are three other tabs in mainTabSet. One has the exact same format and contents as "Main Tab" in this example, another has some buttons and a DynamicForm at the bottom, and the last has another ListGrid followed by buttons and a DynamicForm. Would it be helpful to have example code for the full screen here? I was hesitant to include it all at first because of the length of the code.

Thanks again for the help and please let me know if further information/code is needed. I don't know that I'm explaining the issue well.

[Isomorphic]

Referencing the code example from before, the resize bar on mainGrid does resize mainGrid as expected, however that resize bar does not affect the size of secondaryGrid. What we would like to see is that the user is able to resize only secondaryGrid using the resize bar on secondaryGrid, without affecting the size of mainGrid.

If you resize secondaryGrid and mainGrid's size should not change, then presumably the overall space taken up by mainGrid+secondaryGrid is changing (the only other possibility would be that there is a gap between them, or that they overlap).

To achieve that is very simple: put two grids in a VLayout, set one to a fixed size, and put a resizeBar on the VLayout. Any size increases or decreases will be given to the grid that does not have a fixed size.

It would also work to put the resizeBar after the secondaryGrid. That has the same visual appearance as putting the resizeBar on the VLayout as a whole, which is the correct one in terms of UE: the resize bar appears after the element that is being resized.