SplitPane.listToolStrip doesn't show left or right button in desktop mode

[claudiobosticco]

SmartClient Version: SNAPSHOT_v10.1p_2015-12-10/Enterprise Development Only (built 2015-12-10)

Chrome on OSX

please modify the #responsiveDesignMobileSample, adding these attributes to the SplitPane:

    showListToolStrip:true,
    listToolStrip: {showRightButton:true, rightButtonTitle:"yup"}

I was expecting to be able to show right button in desktop mode. Same for the left button.
Is it a bug or am I missing something?

[Isomorphic]

If that's attempted AutoChild usage, it's incorrect. Properties to be applied to the automatically created listToolStrip instance would be specified via listToolStripProperties.

[claudiobosticco]

SmartClient Version: v10.1p_2015-12-16/Enterprise Development Only (built 2015-12-16)

yes, you're right, but even after correcting this with listToolStripProperties, the right button doesn't show.

[claudiobosticco]

Hello, please let me know if you see the problem or if you need another test case.

[claudiobosticco]

SmartClient Version: v10.1p_2016-01-27/Enterprise Development Only (built 2016-01-27)

Even with the last build, if I add

showListToolStrip:true,
listToolStripProperties: {showRightButton:true, rightButtonTitle:"yup"}

to the SplitPane of the #responsiveDesignMobileSample, I don't see the right button in desktop mode.

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-11/Enterprise Development Only (built 2016-02-11)

Hello, any updates on this issue? If you modify the #responsiveDesignMobileSample like this:

function createSplitPane(deviceMode) {


   var splitPane = isc.SplitPane.create({
        autoDraw:false,
        deviceMode: deviceMode,
        navigationTitle:"Categories",
        border:"1px solid blue",
        showLeftButton:true,
        leftButtonTitle:"L",
        showRightButton:true,
        rightButtonTitle:"R",
        showListToolStrip:true,
        navigationClick: function (direction) {
            isc.say('navigationClick ' + direction)
        },
        listToolStripProperties: {
            showLeftButton:true,
            leftButtonTitle:"l",
            showRightButton:true,
            rightButtonTitle:"r"
        }
    });

    var detailPane = isc.DetailViewer.create({
        dataSource: "supplyItem",
        autoDraw:false
    });

    var listPane = isc.ListGrid.create({
        dataSource:"supplyItem",
        autoDraw:false,
        recordClick : function (grid, record, rowNum) {
            detailPane.viewSelectedData(this);
            splitPane.showDetailPane((rowNum+1) + " of " + grid.getTotalRows(), null, "forward");
        }
    });
    if (deviceMode === "tablet") {
        listPane.addProperties({fields:[{name:"itemName"}, {name:"unitCost"}, {name:"inStock"}]});
    }

    var navigationPane = isc.TreeGrid.create({
        autoDraw:false,
        dataSource: "supplyCategory", autoFetchData: true,
        showHeader: deviceMode == "desktop",

        nodeClick : function (grid, record) {
            listPane.fetchRelatedData(record, this);
            //splitPane.showListPane(record.categoryName, null, "forward");
        }
    });


    splitPane.setDetailPane(detailPane);
    splitPane.setNavigationPane(navigationPane);
    splitPane.setListPane(listPane);

    // Create framing for each SplitPane instance
    // ---------------------------------------------------------------------------------------
    var flipButton = isc.IButton.create({
        autoFit:true,
        getTitle : function () {
            return "Flip (" + splitPane.getPageOrientation() + ")";
        },
        click : function () {
            var newOrientation = splitPane.getPageOrientation() == "landscape" ?
                         "portrait" : "landscape";
                
            splitPane.setPageOrientation(newOrientation);
            splitPane.updateUI();
            this.markForRedraw();
        }
    });
    var container = isc.VLayout.create({
        layoutMargin:10,
        membersMargin : 2,
        members: [flipButton, splitPane]
    })

    return container;
}

isc.TabSet.create({
    width: "100%",
    height: "100%",
    tabs: [
        {title: "desktop", pane: createSplitPane("desktop")},
        {title: "tablet", pane: createSplitPane("tablet")},
        {title: "handset", pane: createSplitPane("handset")}
    ]
});

You'll see the leftButton on the navigationPane (but doesn't call navigationClick), while the rightButton doesn't show up but react to clicks.

Moreover, the listToolStrip doesn't get created. Isn't it the way I am supposed to put controls above the listPane?

[Isomorphic]

You should find this to be fixed in builds dated February 18 and later.

Note that you should set showLeft/RightButton directly on the SplitPane, as the original sample code does - and the same with left/rightButtonTitle.

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-18/Enterprise Development Only (built 2016-02-18)

Chrome on OSX

Hello, I've just tested this code, and I've got the same behavior: I see the leftButton on the navigationPane (but doesn't call navigationClick), while the rightButton doesn't show up but react to clicks.

function createSplitPane(deviceMode) {

    var splitPane = isc.SplitPane.create({
        autoDraw:false,
        deviceMode: deviceMode,
        navigationTitle:"Categories",
        showLeftButton:true,
        showRightButton:true,
        leftButtonTitle:"L",
        rightButtonTitle:"R",
        border:"1px solid blue",
        navigationClick: function (direction) {
            isc.say('navigationClick ' + direction)
        }
    });

    var detailPane = isc.DetailViewer.create({
        dataSource: "supplyItem",
        autoDraw:false
    });

    var listPane = isc.ListGrid.create({
        dataSource:"supplyItem",
        autoDraw:false,
        recordClick : function (grid, record, rowNum) {
            detailPane.viewSelectedData(this);
            splitPane.showDetailPane((rowNum+1) + " of " + grid.getTotalRows(), null, "forward");
        }
    });
    if (deviceMode === "tablet") {
        listPane.addProperties({fields:[{name:"itemName"}, {name:"unitCost"}, {name:"inStock"}]});
    }

    var navigationPane = isc.TreeGrid.create({
        autoDraw:false,
        dataSource: "supplyCategory", autoFetchData: true,
        showHeader: deviceMode == "desktop",

        nodeClick : function (grid, record) {
            listPane.fetchRelatedData(record, this);
            splitPane.showListPane(record.categoryName, null, "forward");
        }
    });


    splitPane.setDetailPane(detailPane);
    splitPane.setNavigationPane(navigationPane);
    splitPane.setListPane(listPane);

    // Create framing for each SplitPane instance
    // ---------------------------------------------------------------------------------------
    var flipButton = isc.IButton.create({
        autoFit:true,
        getTitle : function () {
            return "Flip (" + splitPane.getPageOrientation() + ")";
        },
        click : function () {
            var newOrientation = splitPane.getPageOrientation() == "landscape" ?
                         "portrait" : "landscape";
                
            splitPane.setPageOrientation(newOrientation);
            splitPane.updateUI();
            this.markForRedraw();
        }
    });
    var container = isc.VLayout.create({
        layoutMargin:10,
        membersMargin : 2,
        members: [flipButton, splitPane]
    })

    return container;
}

isc.TabSet.create({
    width: "100%",
    height: "100%",
    tabs: [
        {title: "desktop", pane: createSplitPane("desktop")},
        {title: "tablet", pane: createSplitPane("tablet")},
        {title: "handset", pane: createSplitPane("handset")}
    ]
});

[claudiobosticco]

and what about the listToolStrip ? This code added to the SplitPane seems to have no effect:

        showListToolStrip:true,
        listToolStripProperties: {
            showLeftButton:true,
            leftButtonTitle:"l",
            showRightButton:true,
            rightButtonTitle:"r"
        }

actually in the component tree it seems that the left button is created, but its position is outside of the visible area (please see attachment)

[claudiobosticco]

actually in the component tree it seems that the left button is created, but its position is outside of the visible area (please see attachment)

the right button also exists as an undrawn object.

[Isomorphic]

This is fixed for tomorrow's builds.

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-24/Enterprise Development Only (built 2016-02-24)

Chrome on OSX

Thanks, now the left/right buttons are shown on the navigation bar and on the list toolstrip.
The only problem left is that clicking on the left button of the navigation bar doesn't call the navigationClick method.
(Instead the click on the left button of the list toolstrip is working).

[Isomorphic]

For clarity, what are you actually trying to achieve?

Do you just want left and right buttons *in the navigationBar* that fire navigationClick() in "desktop" mode?

[claudiobosticco]

Well, now I was just testing all the other options to put buttons on the splitPane 'bars', but actually for my use case I need buttons only in the list toolstrip in desktop mode.
Maybe are you suggesting that there are better options?

[Isomorphic]

No - what you're seeing is that, in "desktop" mode, there is no purpose for the builtin "backButton" (which would fire navigationClick()), so it isn't shown.

Since you set showLeftButton:true, the button you see is the "leftButton", but that's intended as a custom button - by default, it has neither a "direction" nor a click() handler, so it doesn't fire navigationClick().

We'll make a few improvements to the docs in this area - but, for now, take a look at the doc for showLeftButton to understand what the "backButton" does.

If you want to catch navigationClick() calls for the "leftButton", you just need to use the autoChild system to add a click() handler that fires it - so, something like:

isc.SplitPane.create({
    ...
    showLeftButton: true,
    leftButtonProperties: {
        click : function () {
            this.creator.navigationClick(...);
        }
    }
});