TabSet height

[claudiobosticco]

Hello, I've got a use case where I want tu use a tabSet as an expansion component. This TabSet contains a grid with autoFitData: "vertical".
The problem with it, I think, is that when the TabSet is created, the grid has not yet received its data, so the autoFit functionality has not yet taken effect, and .
Do you have any suggestions or best practices for managing this use case?

isc.ListGrid.create({
    ID: "countryList",
    width: "100%",
    height: "100%",
    alternateRecordStyles: true,
    canExpandRecords: true,
    selectOnExpandRecord: false,
    getExpansionComponent: function (record) {
        var aGrid = isc.ListGrid.create({
            data: countryData,
            fields: [
                {
                    name: "countryCode",
                    title: "Flag",
                    width: 60,
                    type: "image",
                    imageURLPrefix: "flags/24/",
                    imageURLSuffix: ".png"
                },
                {name: "countryName", title: "Country"},
                {name: "capital", title: "Capital"},
                {name: "continent", title: "Continent"}
            ],
            autoFitData: "vertical",
            autoFitMaxHeight: 300
        })
        var layout = isc.HLayout.create({
            membersMargin: 10,
            members: [
                aGrid
            ]
        })
        var tabSet = isc.TabSet.create({
            tabs: [
                {title: "a grid", pane: layout}
            ]
        })

        return tabSet;
    },
    data: countryData,
    fields: [
        {
            name: "countryCode",
            title: "Flag",
            width: 60,
            type: "image",
            imageURLPrefix: "flags/24/",
            imageURLSuffix: ".png"
        },
        {name: "countryName", title: "Country"},
        {name: "capital", title: "Capital"},
        {name: "continent", title: "Continent"}
    ],
    leaveScrollbarGap: false
})

[Isomorphic]

Hmm, that's a little tricky. A few options:

1) the ideal UI is that the expansion just pops into place instantaneously. You can only do this if you have the related records already loaded. This could be worth doing if users very commonly use expansion.

2) the runner up would be a UI where the expansion row pops open to the right size, and then the data is loaded asynchronously. You could do this if you just knew the count of the expansion records, which might be easy enough to do (and not that expensive on your DB) if you did a correlated subquery to return the count() of related records

3) third place would be a UI where a placeholder is shown and then the data pops into place, resizing the row according to the amount of data shown. We do not currently have an API where you can dynamically resize an expansion component after expansion has occurred, but that could be added as a pretty small Feature Sponsorship, which you could roll into the other sponsorships your organization is considering.

You may be able to pull off nearly the same effect of #3 with a bit of a hack: on expansion, show a placeholder, then fetch the data. When the data comes back, programmatically collapse and re-expand the record. This gives you a chance to provide a replacement expansion component.

That might flicker though. If it were our app, we'd do #2.