Announcement

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

    Difference in sort order between IE and Chrome

    Browser: Mozilla Netscape 5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

    Browser: Mozilla Netscape 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

    The sort order between Chrome and IE is different when dealing with special characters such as single quote. I have compared the Array.sort() in both browsers and they are the same, which leads me to think that perhaps there are differences in the SmartClient sort algorithm between IE and Chrome.

    Repro Steps:
    ============
    1. Load the test case in Chrome
    2. Sort the Region/Country field
    3. Observe that the values with a leading single quote are displayed first
    4. Observe in the console that the sort order is the same
    5. Load the test case in IE 11
    6. Sort the Region/Country field
    7. Observe that the values with a leading single quote are sorted with values without (different that step #3)
    8. Observe in the console that the sort order is the same as step #4

    So the browser natural sort (Array.sort) is sorting the same in IE11 and Chrome, but the grid is different (IE11 being different).

    Code:
    <!DOCTYPE html>
    
    <html>
        <head>
    
            <title></title>
            
            <style>
                .diagInfo {
                    font-size: 14px;
                    font-weight: bold;
                    padding: 5px;
                }
            </style>
            
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Core.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Foundation.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Containers.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Grids.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Forms.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_DataBinding.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Drawing.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_PluginBridges.js"></script> 
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Charts.js"></script>    
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
         
            <script type="text/javascript" >
                var isomorphicDir="http://localhost:8080/isomorphic/";
                
                // set this to the correct JIRA ticket
                var JIRA_TICKET = "SNQA-1199";
                
                // test data
                var data = [
                    {inspectorID:12345, region:"B", inspections:206, observations:913},
                    {inspectorID:67890, region:"A", inspections:66, observations:2 },
                    {inspectorID:54321, region:"C", inspections:4, observations:67 },
                    {inspectorID:54321, region:"D", inspections:4, observations:67 },
                    {inspectorID:54321, region:"'C", inspections:4, observations:67 },
                    {inspectorID:09876, region:"'A", inspections:24, observations:0 },
                    {inspectorID:12345, region:"B", inspections:206, observations:913}
                    
                ];
                
                var list = ["B", "A", "C", "D", "'C", "'A", "B"];
                
                // datasource for the grid        
                isc.DataSource.create({
                    ID: "ds",
                    cacheData:data,
                    clientOnly: true
                });
                
                // once page loads set some diagnostic information, DO NOT CHANGE
                isc.Page.setEvent("load", function() {
                    document.title = JIRA_TICKET + "   (SmartClient version " + isc.versionNumber + ")";
                    var html = [];
                    html.push("Jira: " + JIRA_TICKET);
                    html.push("SmartClient: " + isc.versionNumber);
                    html.push("Browser: " + navigator.appCodeName + " " + navigator.appName + " " + navigator.appVersion);
                    diagLabel.setContents( html.join("<br>"));
                });
    
    
            </script>
    
        </head>
        
        <body>
            <script>
            
                // ===== DO NOT REMOVE =====
                var diagLabel = isc.Label.create({
                            ID: "diagInfo",
                            width: "100%",
                            styleName: "diagInfo",
                            autoFit: true
                        });
                // ===== DO NOT REMOVE =====
                            
                // basic grid        
                var grid = isc.ListGrid.create({
                    dataSource: ds,
                    dataFetchMode : "local",
                    fields: [
        
                        {name:"region", type:"text", title:"Region/Country"}
    
                    ],
                    autoFetchData: true,
                    clientOnly: true,
                    position: "relative",
                    width : "100%",
                    align : "center",
                    autoFitData : "vertical",
                    autoFitMaxHeight : 400,
                    alternateRecordStyles : true,
                    canAddFormulaFields : true,
                    canAddSummaryFields : true,
                    canGroupBy : true,
                    canReorderFields : true,
                    showGroupSummary : true,
                    groupByMaxRecords : 5,
                    useAdvancedFieldPicker: true,
                    advancedFieldPickerThreshold: 5,
                    autoDraw: false,
                    badFormulaResultValue: "NA",
                    fieldNamingStrategy : "uuid",
                    includeHilitesInSummaryFields: false,
                    groupByComplete: function() {
                        grid.recalculateSummaries();
                    }
                    
                    
                });    
            
    
                // the main page layout - place all other components afetr diagLabel
                var layout = isc.VLayout.create({
                    width:"100%",
                    membersMargin: 20,
                    members: [
                        // ===== DO NOT REMOVE diagLabel
                        diagLabel,
                        // ===== place anty components here
                        grid
                    ]
                });
                
                console.dir(list.sort());
        
            </script>
    
        </body>
    
    </html>

    #2
    We use locale-sensitive sort (the native JavaScript localeCompare()), and that does indeed have well-known differences across different browsers, sometimes things that would be considered bugs in the browser, sometimes grey areas in terms of specifications and local custom.

    It's obviously intractable for SmartClient to try to provide our own locale-sensitive sort to replace the browser's, or similarly, to try to compensate for differences in different browsers.

    It's possible to use a sortNormalizer() to paper over differences that actually affect your application in a material way.

    Comment

    Working...
    X