Announcement

**jaredm** · 12 Oct 2015, 07:00

Not sure if it is relevant but when it works (as in, the expansion component is visible), it has reasonable looking 'Position' (e.g. 10,338

When it does not work, I can see the position has a very high number (e.g 10,10000719):

For info: In the example above, the expansion component that does not appear is just 10 rows below the one that does.

This looks to me like an issue when laying out expansion components - can Isomorphic provide some assistance (issue is for a paying customer)?

**Isomorphic** · 12 Oct 2015, 09:01

Screenshots don't really do it in this case - if you think there's a framework issue, we'll need to see a standalone, runnable sample that shows the issue, then we can take a look.

**jaredm** · 12 Oct 2015, 09:02

Originally posted by Isomorphic View Post

Screenshots don't really do it in this case - if you think there's a framework issue, we'll need to see a standalone, runnable sample that shows the issue, then we can take a look.

Thanks, alright I can stub something out I think - however, is there an email address I can send it to?

**Isomorphic** · 12 Oct 2015, 09:09

You shouldn't need to - a standalone sample should typically be reducable to a single onModuleLoad() method that we can just drop into a sample project and run - if you need dataSources, create them with setClientOnly(true), and provide data for them in code. Unless your situation is very unusual, that should be enough - and we can't spend time looking at larger projects because there could be any number of application-level issues in such code - if there's a real framework issue, you should be able to show it easily in a simple test-case (and may well find the problem in your code in the process).

**jaredm** · 13 Oct 2015, 03:17

Hi Isomorphic, please find below a standalone reproducible sample. We've stripped out much of our own code and replaced the DataSource with a dummy one.

Reproduction steps:

Copy code below into an html file (update JS script references to your local Isomorphic directory if necessary.
Expand the first few records and observe that a TabSet is visible as the embedded component
Scroll to the end, e.g. record I39100 and expand - observe that the TabSet no longer appears.

Notes:

Affects IE11 - from approx record 25.5k the TabSet appears but is positioned incorrectly (over the higher grid rows), beyond that it stops appearing.
Affects chrome - from approx record 16.5k TabSet stops appearing (Tested on Canary v48)
Does not affect Firefox (tested v39)
Tested using SmartClient v10.0p_2015-10-01

Customer's 'standard' supported browser is IE11 so that is the minimum we need to get this resolved on.

Code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">var isomorphicDir="isomorphic/";</script>
    <script src="isomorphic/system/modules-debug/ISC_Core.js"></script>
    <script src="isomorphic/system/modules-debug/ISC_Foundation.js"></script>
    <script src="isomorphic/system/modules-debug/ISC_Containers.js"></script>
    <script src="isomorphic/system/modules-debug/ISC_Grids.js"></script>
    <script src="isomorphic/system/modules-debug/ISC_Forms.js"></script>
    <script src="isomorphic/system/modules-debug/ISC_DataBinding.js"></script>
    <script src="isomorphic/skins/Simplicity/load_skin.js"></script>
</head>
<body>
<script type="text/javascript">
// BEGIN InstanceDS
isc.DataSource.create({
        ID: "InstanceDS",
        dataFormat: "json",
        dataProtocol: "clientCustom",
        fields: [ {name: "bpmInstanceId", type: "integer", title: "Instance Id", primaryKey: true, hidden: true,canSort: true}
                ,{name: "clientDisplay", type: "text", title: "Customer"}
                ,{name: "engagementName", type: "text", title: "Name"}
                ,{name: "creationDate",type: "date",title: "Created"}
                ,{name: "recNumber", type: "text", title: "Number"}
        ]
        ,getDummyRecord: function(instanceId) {
            var rtnObj = { "bpmInstanceId": ""+instanceId, "recNumber": "I"+instanceId
                          ,"engagementName": "REPRO", "creationDate": new Date(), "clientDisplay": "Isomorphic Repro"
                         };
            return rtnObj;
        }
        ,transformResponse: function(dsResponse, dsRequest, data) {
            dsResponse.totalRows = 40000;
            dsResponse.startRow = dsRequest.startRow;
            dsResponse.endRow = dsRequest.endRow;
            dsResponse.status = 0;
            dsResponse.data = [];
            for ( var x = 0; x < dsResponse.endRow-dsResponse.startRow; x++ ) {
                dsResponse.data[x] = this.getDummyRecord(dsResponse.startRow+x);
            }
            return dsResponse;
        }
        ,transformRequest: function(dsRequest) {
            this.processResponse(dsRequest.requestId, {clientContext: dsRequest.clientContext, operationType: dsRequest.operationType});
        }
});
// END InstanceDS

// BEGIN ExpansionView
isc.defineClass("ExpansionView", "VLayout");
isc.ExpansionView.addProperties({
    width: 1200
    ,height: 400
    ,membersMargin: 4
    ,layoutBottomMargin: 16
    ,canHover: true, showHover: false // Prevent bleed through hover
    ,tabSetDefaults: {
        _constructor: "TabSet"
        ,canReorderTabs: false
        ,tabs: [
             {title: "A"}
            ,{title: "B"}
            ,{title: "C"}
        ]
    }
    ,initWidget: function () {
        this.Super("initWidget", arguments);
        this.addAutoChild("tabSet");
    }
});
// END ExpansionView

// BEGIN ExpansionGrid
isc.defineClass("ExpansionGrid", "ListGrid");
isc.ExpansionGrid.addProperties({
    width: 1200
    ,dataSource: "InstanceDS"
    ,autoFetchData: true
    ,canExpandRecords: true
    ,canExpandMultipleRecords : false
    ,dataPageSize: 100
    ,fields: [
         {name: "recNumber", type: "text", hidden: false, canHover: true, showHover: true, canHilite : true}
        ,{name: "clientDisplay", type: "text", canHover: true, showHover: true, hoverDelay: 1000}
        ,{name: "engagementName", prompt: "Name", type: "text", canHover: false, showHover: false, hoverDelay: 1000}
        ,{name: "creationDate", title: "Created", type: "date", cellAlign: "left", align: "left",showHover : true
        }
    ]
    ,expansionViewDefaults: {
        _constructor: "ExpansionView"
    }
    ,getExpansionComponent: function (record) {
        var expansionComponent = this.createAutoChild("expansionView", {record: record});
        return expansionComponent;
    }
});
// END ExpansionGrid

isc.VLayout.create({
     layoutMargin : 10
    ,width: "100%"
    ,height: "100%"
    ,members : [
          isc.HLayout.create({
             minMemberSize: 1250
            ,width: "100%"
            ,height: "*"
            ,members : [
                isc.ExpansionGrid.create()
            ]
        })
    ]
});
</script>
</body>
</html>

**jaredm** · 16 Oct 2015, 06:28

Hi Isomorphic, just wondering if you've able to reproduce the issue on your end?

**Isomorphic** · 16 Oct 2015, 06:42

Yes, we see the issue and it's queued to be looked at - no specific ETA for a solution.

If you need quicker responses and fixes, consider purchasing Support.

**jaredm** · 16 Oct 2015, 06:56

Thanks! We will consider the support option but really just feel better knowing you can see the same problem we're seeing :) Hope you guys have a good weekend!

**jaredm** · 11 Feb 2016, 09:38

Originally posted by Isomorphic View Post

Yes, we see the issue and it's queued to be looked at - no specific ETA for a solution.

If you need quicker responses and fixes, consider purchasing Support.

Hi Isomorphic,

Just a ping to see what the status of this issue is within your queue? Its been 4 months since it was confirmed by you.

**Isomorphic** · 15 Feb 2016, 04:56

Apologies for the delay in addressing this - the issue here is centered on Chrome's apparent conversion of vertical co-ords that exceed 6 digits to scientific notation, such that a height of 1234560 becomes "1.23456e+06px;" in the DIVs styleHandle - the result of this is that, in Chrome only, DIVs with a top offset between 1,000,000 and 2,000,000, for example, are being rendered with top offsets of 1 or 2 pixels. - that is, off-screen at the very top of the grid-body.

You can see similar behavior natively, without SmartClient, by just creating a DIV with a height of 1000000px - open the developer tools -> Elements tab and hover over the DIV to see that Chrome misreports the height.

We're looking into the best way of dealing with this in the framework and will update here when we have more information.

**jaredm** · 15 Feb 2016, 05:04

Originally posted by Isomorphic View Post

Apologies for the delay in addressing this - the issue here is centered on Chrome's apparent conversion of vertical co-ords that exceed 6 digits to scientific notation, such that a height of 1234560 becomes "1.23456e+06px;" in the DIVs styleHandle - the result of this is that, in Chrome only, DIVs with a top offset between 1,000,000 and 2,000,000, for example, are being rendered with top offsets of 1 or 2 pixels. - that is, off-screen at the very top of the grid-body.

You can see similar behavior natively, without SmartClient, by just creating a DIV with a height of 1000000px - open the developer tools -> Elements tab and hover over the DIV to see that Chrome misreports the height.

We're looking into the best way of dealing with this in the framework and will update here when we have more information.

Thanks Isomorphic - I strongly suspected it was a browser issue. Is it the same problem that causes it to fail in IE11?

**Isomorphic** · 17 Feb 2016, 02:16

Which version of SmartClient are you using? We see a build date, but not a version.

When we test your sample in IE11 against latest framework code - run it, scroll to the bottom and expand the last row - we don't see any behavior problems. The row expands and the tabset is drawn at the correct offset.

If you see something different, let us know the browser build, emulation mode and anything you see in the SmartClient developer console.

**jaredm** · 17 Feb 2016, 02:36

Originally posted by Isomorphic View Post

Which version of SmartClient are you using? We see a build date, but not a version.

When we test your sample in IE11 against latest framework code - run it, scroll to the bottom and expand the last row - we don't see any behavior problems. The row expands and the tabset is drawn at the correct offset.

If you see something different, let us know the browser build, emulation mode and anything you see in the SmartClient developer console.

Hi,

I've just tried the repro sample provided above in IE11 with "SNAPSHOT_v10.1p_2015-12-10/Pro Deployment" (it is the current one I have on the server I'm using but the problem was present in earlier versions too). Using Developer Tools (F12) I can confirm that Document mode is set to "Edge (Default)" and Browser profile is 'Desktop". I have also tested my sample code against your current Hands-On demo version ("ISC_101_BRANCH_2016-02-17_1455674925_alex_wrath/WWW Deployment") - the same problem occurs

The problem is that at some threshold point between 25k-30k records, the expansion component ceases to render - the ListGrid expands correctly but no tabset component is shown within. If I scroll to earlier records the tabset renders just fine. Here is a screenshot taken of the last row: https://www.evernote.com/l/AA3OhmQmz...TnEB/image.png

**Isomorphic** · 17 Feb 2016, 03:15

We can't really look into an issue that existed in builds 2 months ago, especially when we don't see it against more recent builds. You'll need to re-test the IE11 case against the latest build from smartclient.com/builds.

However, if you wait until tomorrow's build, you can also test the fix we just applied to deal with the Chrome bug, which we *were* able to reproduce.

Announcement

ListGrid - expansion component issue

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment