Announcement

**Isomorphic** · 16 Feb 2016, 09:28

It's invalid to assign properties to ListGridField the way you are doing it. You can instead provide listGrid.fields, and these merged with the same-named DataSource fields - see the Data Binding chapter of the QuickStart Guide for details.

**jwbst21** · 16 Feb 2016, 10:31

I have tried this by setting ListGrid fields directlly, but its still not working for me:

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 = "SNT-12963";
            
            // test data
            var data = [
            { project: "123 Avenue", path:"East->GA->Atlanta->Engineering", redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Long Project Name", path:"East->PA->Pittsburgh->Engineering",redflag: "", owner: "Staples", ins: 33, obs: 231, unsafe: 9, safe: 80, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "6789 Avenue B", path:"East->PA->Pittsburgh->Finance",redflag: "", owner: "University of MD", ins: 33, obs: 23, unsafe: 9, safe: 222, insDate: new Date(2016, 7, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->PA->Pittsburgh->Maintenance",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Feliz Navidad", path:"East->VA->Newport News",redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->VA->Newport News->Engineering",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 10, insDate: new Date(2016, 3, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "Whitehouse Lawn Maintenance", path:"East->PA->Philadelphia->Electrical",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 220, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
            { project: "123 Avenue", path:"East->PA->Philadelphia->Electrical", redflag: "", owner: "Staples", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: new Date(2011, 12, 10), score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" }
        ];
        
            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>"));

            });

            // for charts and grids that display trending periods, this method will convert the date
        // into a nice to read format
        getQuarter = function(date) {
        
            var year = date.getFullYear();

            var month = date.getMonth() + 1;

            if(month < 4)
                return year + " Quarter 1";
            else if(month < 7)
                return year + " Quarter 2";
            else if(month < 10)
                return year + " Quarter 3";
            else if(month < 13)
                return year + " Quarter 4";
        
        
        }
        
        var exportXLS = function() {
            var opts = {
                exportAs : "ooxml",
                exportDisplay : "download",
                exportFilename : JIRA_TICKET + ".xlsx"
            }

            grid.exportClientData(opts);
                    
        }
        
        </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:"project", title:"Project", type:"text" },
                {name:"insDate", title:"Quarter", type:"date", exportRawValues: false,             formatCellValue:
                            function(value, record, rowNum, colNum, grid) {
                            return getQuarter(value); } },
                {name:"owner", type:"text", title:"Owner"},
                {name:"ins", type:"integer", title:"#Inspections"},
                {name:"obs", type:"integer", title:"#Observations", formatCellValue:
                            function(value, record, rowNum, colNum, grid) {
                            return value.toFixed(3); } }
                
            ],
                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,
                useAdvancedFieldPicker: true,
                advancedFieldPickerThreshold: 5,
                autoDraw: false,
                badFormulaResultValue: "NA",
                canMultiGroup: true
            });    
            
            
            
            
            // 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
                ]
            });

        </script>

    </body>

</html>

**Isomorphic** · 16 Feb 2016, 10:53

Ah OK, the placement of the format code wasn't the issue - the issue is that for "date" fields in particular, we don't use custom formatters when exporting to Excel by default, because this creates usability issues in Excel for most scenarios of date formatting. See dsRequest.exportDatesAsFormattedString for more details, as well as the ability to force your formatting to be applied, which probably does make sense in this case.

**jwbst21** · 16 Feb 2016, 12:10

Thanks, that did the trick.

Announcement

Excel not respecting formatCellValue for date

Comment

Comment

Comment

Comment