il y a 8 ans · 918ebd38a5
--- a/src/SpreadJsDemo.html
+++ b/src/SpreadJsDemo.html
@@ -0,0 +1,642 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head lang="en">
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title></title>
			
 
				+</head>
			
 
				+<script src="/src/lib/jquery-1.9.1.min.js"></script>
			
 
				+<link rel="stylesheet" href="src/spreadjs/css/gc.spread.sheets.10.0.1.css" type='text/css'/>
			
 
				+<script src='src/spreadjs/scripts/gc.spread.sheets.all.10.0.1.min.js' type='text/javascript'></script>
			
 
				+<script type="text/javascript" src="/src/scripts/treeDataHelper.js"></script>
			
 
				+<body>
			
 
				+    <div style="display:none">
			
 
				+        <img id="image1" src="src/resources/folder.png" alt="" width="15" height="15">
			
 
				+        <img id="image2" src="src/resources/002.png" alt="" width="15" height="15">
			
 
				+    </div>
			
 
				+    <div>
			
 
				+        <input type="button" value="新增" onclick="billOperation('insert')"/>
			
 
				+        <input type="button" value="删除" onclick="billOperation('remove')"/>
			
 
				+        <input type="button" value="升级" disabled="disabled" onclick="billOperation('upgrade')"/>
			
 
				+        <input type="button" value="降级" disabled="disabled" onclick="billOperation('downgrade')"/>
			
 
				+        <input type="button" value="上移" disabled="disabled" onclick="billOperation('moveup')"/>
			
 
				+        <input type="button" value="下移" disabled="disabled" onclick="billOperation('movedown')"/>
			
 
				+    </div>
			
 
				+    <div id='ss' style='width:100%; height:600px;'></div>
			
 
				+</body>
			
 
				+<script id="scriptInit" type="text/javascript">
			
 
				+    var currentSheetObj = null;
			
 
				+    $(document).ready(function () {
			
 
				+        $.ajax({
			
 
				+            type:"POST",
			
 
				+            url: 'http://localhost:3010/api/getBills',
			
 
				+            dataType: 'json',
			
 
				+            data: {"user_id": ""},
			
 
				+            cache: false,
			
 
				+            timeout: 10000,
			
 
				+            success: function(result){
			
 
				+                //var data = result.data;
			
 
				+                var data = result.data.slice(0);
			
 
				+                decorateData(data);
			
 
				+                tree_Data_Helper.sortDataBySerial(data);
			
 
				+                //*
			
 
				+                buildBills(tree_Data_Helper.buildTreeData(data), result.data.length);
			
 
				+                /*/
			
 
				+                createTreeNode();
			
 
				+                //*/
			
 
				+            },
			
 
				+            error: function(jqXHR, textStatus, errorThrown){
			
 
				+                alert('没有清单！');
			
 
				+                //or create local default cache...
			
 
				+            }
			
 
				+        });
			
 
				+    });
			
 
				+
			
 
				+    function decorateData(orgData) {
			
 
				+        var tmpNum = 0;
			
 
				+        for (var i = 0; i < orgData.length; i++) {
			
 
				+            orgData[i]["chk"] = (i%2 == 0);
			
 
				+            tmpNum = orgData[i]["Quantity"];
			
 
				+            if (0 == tmpNum) orgData[i]["Quantity"] = null;
			
 
				+            tmpNum = orgData[i]["DesignQuantity"];
			
 
				+            if (0 == tmpNum) orgData[i]["DesignQuantity"] = null;
			
 
				+            tmpNum = orgData[i]["DesignQuantity2"];
			
 
				+            if (0 == tmpNum) orgData[i]["DesignQuantity2"] = null;
			
 
				+            tmpNum = orgData[i]["UnitPrice"];
			
 
				+            if (0 == tmpNum) orgData[i]["UnitPrice"] = null;
			
 
				+            tmpNum = orgData[i]["DesignPrice"];
			
 
				+            if (0 == tmpNum) orgData[i]["DesignPrice"] = null;
			
 
				+            tmpNum = orgData[i]["TotalPrice"];
			
 
				+            if (0 == tmpNum) orgData[i]["TotalPrice"] = null;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function buildBills(data, amount) {
			
 
				+        var spread = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
			
 
				+        spread.options.tabStripVisible = false;
			
 
				+        spread.options.showHorizontalScrollbar = false;
			
 
				+        //spread.options.showVerticalScrollbar = false;
			
 
				+        var spreadNS = GC.Spread.Sheets;
			
 
				+        var sheet = spread.getSheet(0);
			
 
				+        currentSheetObj = sheet;
			
 
				+        sheet.suspendPaint();
			
 
				+        sheet.suspendEvent();
			
 
				+        //Set rowHeader count and columnHeader count.
			
 
				+        sheet.setRowCount(2, spreadNS.SheetArea.colHeader);
			
 
				+        sheet.setColumnCount(12, spreadNS.SheetArea.viewport);
			
 
				+        sheet.options.colHeaderAutoTextIndex = 1;
			
 
				+        sheet.options.colHeaderAutoText = spreadNS.HeaderAutoText.numbers;
			
 
				+        sheet.showRowOutline(false);
			
 
				+        //setup column header
			
 
				+        setupColHeader(sheet);
			
 
				+        //setup cells
			
 
				+        setupAllCells(sheet, data, amount);
			
 
				+        //decorate
			
 
				+        decorateCells(sheet);
			
 
				+
			
 
				+        sheet.resumeEvent();
			
 
				+        sheet.resumePaint();
			
 
				+    }
			
 
				+
			
 
				+    function decorateCells(sheet) {
			
 
				+        sheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).backColor("lightblue");
			
 
				+        sheet.getRange(12, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).backColor("lightgreen");
			
 
				+        sheet.getRange(22, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).backColor("#0085c7");
			
 
				+    }
			
 
				+
			
 
				+    function setupAllCells(sheet, data, amount) {
			
 
				+        function TreeNodeCellType() {}
			
 
				+        TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
			
 
				+        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
			
 
				+            var offX = 2, offY = -2, width = 10, height = 10, minusOffLeft = 2 - width, minusOffRight = -2, minusOffTop = 2, minusOffBottom = height - 2,
			
 
				+                 dashMargin = 3, dashWidth = 10, dashTop = 5, dashBottom = 5;
			
 
				+            function private_drawDecorateLine(imgX, imgY, hasPre, hasNext) {
			
 
				+                ctx.save();
			
 
				+                ctx.strokeStyle = 'gray';
			
 
				+                ctx.setLineDash([1, 1]); /* dashes are 5px and spaces are 3px */
			
 
				+                ctx.beginPath();
			
 
				+                ctx.moveTo(x + dashMargin + offX, y + height/2 + offY);
			
 
				+                ctx.lineTo(x + dashMargin + offX + dashWidth, y + height/2 + offY);
			
 
				+                if (hasPre) {
			
 
				+                    ctx.setLineDash([1, 1]); /* dashes are 5px and spaces are 3px */
			
 
				+                    ctx.moveTo(x - width / 2 + offX, y + offY);
			
 
				+                    ctx.lineTo(x - width / 2 + offX, y - dashTop + offY);
			
 
				+                }
			
 
				+                if (hasNext) {
			
 
				+                    ctx.moveTo(x - width / 2 + offX, y + height + dashMargin + offY);
			
 
				+                    ctx.lineTo(x - width / 2 + offX, y + height + dashMargin + dashBottom + offY);
			
 
				+                }
			
 
				+                ctx.stroke();
			
 
				+                ctx.restore();
			
 
				+            }
			
 
				+            function private_drawGrpImg(imgX, imgY, isParent, isCollapsed, hasPre, hasNext) {
			
 
				+                ctx.save();
			
 
				+                if (isParent) {
			
 
				+                    ctx.strokeStyle = 'gray';
			
 
				+                    ctx.beginPath();
			
 
				+                    ctx.moveTo(x - width + offX, y + offY);
			
 
				+                    ctx.lineTo(x + offX, y + offY);
			
 
				+                    ctx.lineTo(x + offX, y + height + offY);
			
 
				+                    ctx.lineTo(x - width + offX, y + height + offY);
			
 
				+                    ctx.lineTo(x - width + offX, y + offY);
			
 
				+                    ctx.stroke();
			
 
				+
			
 
				+                    ctx.save();
			
 
				+                    ctx.beginPath();
			
 
				+                    ctx.strokeStyle = 'black';
			
 
				+                    ctx.moveTo(x + minusOffLeft + offX, y + height/2 + offY);
			
 
				+                    ctx.lineTo(x + minusOffRight + offX, y + height/2 + offY);
			
 
				+                    if (isCollapsed) {
			
 
				+                        ctx.strokeStyle = 'black';
			
 
				+                        ctx.moveTo(x - width/2 + offX, y + minusOffTop + offY);
			
 
				+                        ctx.lineTo(x - width/2 + offX, y + minusOffBottom + offY);
			
 
				+                    }
			
 
				+                    ctx.stroke();
			
 
				+                    ctx.restore();
			
 
				+                } else {
			
 
				+                    //
			
 
				+                }
			
 
				+                private_drawDecorateLine(imgX, imgY, isParent||hasPre, hasNext);
			
 
				+                ctx.restore();
			
 
				+            }
			
 
				+            var level = options.sheet.rowOutlines.getLevel(options.row);
			
 
				+            var nlevel = -1;
			
 
				+            if (options.row < options.sheet.getRowCount() - 1) {
			
 
				+                nlevel = options.sheet.rowOutlines.getLevel(options.row + 1);
			
 
				+            }
			
 
				+            //var hoffset = (level + 2) * 12;
			
 
				+            var hoffset = (level + 2) * 12;
			
 
				+            x += hoffset;
			
 
				+            w -= hoffset;
			
 
				+
			
 
				+            var image;
			
 
				+            if (nlevel > level) {
			
 
				+                image = document.getElementById('image1');
			
 
				+            }
			
 
				+            else {
			
 
				+                image = document.getElementById('image2');
			
 
				+            }
			
 
				+
			
 
				+            var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
			
 
				+            //var imageWidth = 8, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
			
 
				+            x += imageLayoutWidth;
			
 
				+            w -= imageLayoutWidth;
			
 
				+            //ns.CustomCellType.prototype.paint.apply(this, arguments);
			
 
				+            ns.CellTypes.Text.prototype.paint.apply(this, arguments);
			
 
				+
			
 
				+            if (options.row == options.sheet.getRowCount() - 1) return; //last row
			
 
				+
			
 
				+            if (nlevel > level) {
			
 
				+                var collapsed = options.sheet.rowOutlines.isCollapsed(options.row + 1);
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+//                ctx.save();
			
 
				+//                ctx.fillStyle = "black";
			
 
				+//                ctx.beginPath();
			
 
				+//                if (collapsed) {
			
 
				+//                    ctx.moveTo(x - 5, y);
			
 
				+//                    ctx.lineTo(x, y + 3);
			
 
				+//                    ctx.lineTo(x - 5, y + 6);
			
 
				+//                } else {
			
 
				+//                    ctx.moveTo(x, y);
			
 
				+//                    ctx.lineTo(x, y + 5);
			
 
				+//                    ctx.lineTo(x - 5, y + 5);
			
 
				+//                }
			
 
				+//                ctx.fill();
			
 
				+//                ctx.restore();
			
 
				+                private_drawGrpImg(imageX, imageY, true, collapsed, null, null);
			
 
				+//                ctx.drawImage(image, imageX, imageY);
			
 
				+            }
			
 
				+            else {
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+                ctx.save();
			
 
				+                ctx.drawImage(image, imageX, imageY);
			
 
				+                ctx.restore();
			
 
				+            }
			
 
				+        };
			
 
				+        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
			
 
				+            return {
			
 
				+                x: x,
			
 
				+                y: y,
			
 
				+                row: context.row,
			
 
				+                col: context.col,
			
 
				+                cellStyle: cellStyle,
			
 
				+                cellRect: cellRect,
			
 
				+                sheetArea: context.sheetArea
			
 
				+            };
			
 
				+        }
			
 
				+        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
			
 
				+            var level = hitinfo.sheet.rowOutlines.getLevel(hitinfo.row);
			
 
				+            var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
			
 
				+            if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
			
 
				+                var collapsed = hitinfo.sheet.rowOutlines.isCollapsed(hitinfo.row + 1);
			
 
				+                hitinfo.sheet.rowOutlines.setCollapsed(hitinfo.row, !collapsed);
			
 
				+                hitinfo.sheet.invalidateLayout();
			
 
				+                hitinfo.sheet.repaint();
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        var ns = GC.Spread.Sheets;
			
 
				+        sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
			
 
				+        sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).cellType(new TreeNodeCellType());
			
 
				+        sheet.getRange(-1, 4, -1 ,1, ns.SheetArea.viewport).formatter("####.000");
			
 
				+        sheet.getRange(-1, 5, -1 ,1, ns.SheetArea.viewport).formatter("####.000");
			
 
				+        sheet.getRange(-1, 6, -1 ,1, ns.SheetArea.viewport).formatter("####.000");
			
 
				+        sheet.getRange(-1, 7, -1 ,1, ns.SheetArea.viewport).formatter("####.00");
			
 
				+        sheet.getRange(-1, 8, -1 ,1, ns.SheetArea.viewport).formatter("####.00");
			
 
				+        sheet.getRange(-1, 9, -1 ,1, ns.SheetArea.viewport).formatter("####");
			
 
				+
			
 
				+        //.formatter
			
 
				+        sheet.setRowCount(amount + 1);
			
 
				+        var cnt = 0, idxBefore = 0, idxAfter = 0, collapseGrp=[];
			
 
				+        for (var i = 0; i < data.length; i++) {
			
 
				+            idxBefore = cnt;
			
 
				+            cnt = setupRowCells(sheet, data[i], cnt);
			
 
				+            idxAfter = cnt;
			
 
				+            if (idxAfter - idxBefore > 1) {
			
 
				+                sheet.rowOutlines.group(idxBefore + 1, idxAfter - idxBefore - 1);
			
 
				+                collapseGrp.push(idxBefore);
			
 
				+            }
			
 
				+        }
			
 
				+//        for (var i = collapseGrp.length - 1; i >= 0; i--) {
			
 
				+//            sheet.rowOutlines.setCollapsed(collapseGrp[i],true);
			
 
				+//        }
			
 
				+        //sheet.rowOutlines.expand(3,false);
			
 
				+        //sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
			
 
				+        sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
			
 
				+        sheet.getRange(-1, 1, -1 ,1, ns.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
			
 
				+
			
 
				+        sheet.getRange(-1, 3, -1 ,1, ns.SheetArea.viewport).font("11pt smartSimSun");
			
 
				+
			
 
				+        //
			
 
				+    }
			
 
				+
			
 
				+    //function countData() {};
			
 
				+
			
 
				+    function setupRowCells(sheet, dataItem, cnt) {
			
 
				+        //sheet.setText(0, 0, "Permanent Differences");
			
 
				+        var rIdx = cnt, idxBefore = cnt, idxAfter = cnt;
			
 
				+        sheet.setText(rIdx, 0, dataItem["Code"]);
			
 
				+        sheet.setText(rIdx, 1, dataItem["B_Code"]);
			
 
				+        sheet.setText(rIdx, 2, dataItem["Name"]);
			
 
				+        sheet.setText(rIdx, 3, dataItem["Units"]);
			
 
				+        sheet.setValue(rIdx, 4, dataItem["Quantity"]);
			
 
				+        sheet.setValue(rIdx, 5, dataItem["DesignQuantity"]);
			
 
				+        sheet.setValue(rIdx, 6, dataItem["DesignQuantity2"]);
			
 
				+        sheet.setValue(rIdx, 7, dataItem["UnitPrice"]);
			
 
				+        sheet.setValue(rIdx, 8, dataItem["DesignPrice"]);
			
 
				+        sheet.setValue(rIdx, 9, dataItem["TotalPrice"]);
			
 
				+        sheet.setText(rIdx, 10, dataItem["Memostr"]);
			
 
				+        //sheet.setText(rIdx, 11, dataItem["chk"]);
			
 
				+        //cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
			
 
				+        rIdx++;
			
 
				+        if (dataItem.items) {
			
 
				+            for (var i = 0; i < dataItem.items.length; i++) {
			
 
				+                idxBefore = rIdx;
			
 
				+                rIdx = setupRowCells(sheet, dataItem.items[i], rIdx);
			
 
				+                idxAfter = rIdx;
			
 
				+                if (idxAfter - idxBefore > 1) {
			
 
				+                    sheet.rowOutlines.group(idxBefore + 1, idxAfter - idxBefore - 1);
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        return rIdx;
			
 
				+    }
			
 
				+
			
 
				+    function setupColHeader(sheet) {
			
 
				+        var ch = GC.Spread.Sheets.SheetArea.colHeader;
			
 
				+        //sheet.addSpan(rowIdx, colIdx, spanV, spanH, cellType)
			
 
				+        sheet.addSpan(0, 0, 2, 1, ch);
			
 
				+        sheet.setValue(0, 0, "项目节", ch);
			
 
				+        sheet.setColumnWidth(0, 160);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 1, 2, 1, ch);
			
 
				+        sheet.setValue(0, 1, "清单子目号", ch);
			
 
				+        sheet.setColumnWidth(1, 160);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 2, 2, 1, ch);
			
 
				+        sheet.setValue(0, 2, "名称", ch);
			
 
				+        sheet.setColumnWidth(2, 380);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 3, 2, 1, ch);
			
 
				+        sheet.setValue(0, 3, "单位", ch);
			
 
				+        sheet.setColumnWidth(3, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 4, 2, 1, ch);
			
 
				+        sheet.setValue(0, 4, "清单数量", ch);
			
 
				+        sheet.setColumnWidth(4, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 5, 1, 2, ch);
			
 
				+        sheet.setValue(0, 5, "设计数量", ch);
			
 
				+        sheet.setValue(1, 5, "数量1", ch);
			
 
				+        sheet.setValue(1, 6, "数量2", ch);
			
 
				+        sheet.setColumnWidth(5, 100);
			
 
				+        sheet.setColumnWidth(6, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 7, 2, 1, ch);
			
 
				+        sheet.setValue(0, 7, "清单单价", ch);
			
 
				+        sheet.setColumnWidth(7, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 8, 2, 1, ch);
			
 
				+        sheet.setValue(0, 8, "经济指标", ch);
			
 
				+        sheet.setColumnWidth(8, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 9, 2, 1, ch);
			
 
				+        sheet.setValue(0, 9, "金额", ch);
			
 
				+        sheet.setColumnWidth(9, 100);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 10, 2, 1, ch);
			
 
				+        sheet.setValue(0, 10, "备注", ch);
			
 
				+        sheet.setColumnWidth(10, 200);
			
 
				+        //
			
 
				+        sheet.addSpan(0, 11, 2, 1, ch);
			
 
				+        sheet.setValue(0, 11, "单价" + "分析", ch);
			
 
				+        sheet.setColumnWidth(11, 100);
			
 
				+    }
			
 
				+
			
 
				+    function createTreeNode() {
			
 
				+        var ns = GC.Spread.Sheets;
			
 
				+        //var spreadNS = GC.Spread.Sheets;
			
 
				+        var dtStart = new Date();
			
 
				+
			
 
				+        function TreeNodeCellType() {}
			
 
				+        TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
			
 
				+        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
			
 
				+            var level = options.sheet.rowOutlines.getLevel(options.row);
			
 
				+            var nlevel = -1;
			
 
				+            if (options.row < options.sheet.getRowCount() - 1) {
			
 
				+                nlevel = options.sheet.rowOutlines.getLevel(options.row + 1);
			
 
				+            }
			
 
				+            var hoffset = (level + 2) * 12;
			
 
				+            x += hoffset;
			
 
				+            w -= hoffset;
			
 
				+
			
 
				+            var image;
			
 
				+            if (nlevel > level) {
			
 
				+                image = document.getElementById('image1');
			
 
				+            }
			
 
				+            else {
			
 
				+                image = document.getElementById('image2');
			
 
				+            }
			
 
				+
			
 
				+            var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
			
 
				+            x += imageLayoutWidth;
			
 
				+            w -= imageLayoutWidth;
			
 
				+            //ns.CustomCellType.prototype.paint.apply(this, arguments);
			
 
				+            ns.CellTypes.Text.prototype.paint.apply(this, arguments);
			
 
				+
			
 
				+            if (options.row == options.sheet.getRowCount() - 1) return; //last row
			
 
				+
			
 
				+            if (nlevel > level) {
			
 
				+                var collapsed = options.sheet.rowOutlines.isCollapsed(options.row + 1);
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+                ctx.save();
			
 
				+                ctx.fillStyle = "black";
			
 
				+                ctx.beginPath();
			
 
				+                if (collapsed) {
			
 
				+                    ctx.moveTo(x - 5, y);
			
 
				+                    ctx.lineTo(x, y + 3);
			
 
				+                    ctx.lineTo(x - 5, y + 6);
			
 
				+                } else {
			
 
				+                    ctx.moveTo(x, y);
			
 
				+                    ctx.lineTo(x, y + 5);
			
 
				+                    ctx.lineTo(x - 5, y + 5);
			
 
				+                }
			
 
				+                ctx.fill();
			
 
				+                ctx.restore();
			
 
				+                ctx.drawImage(image, imageX, imageY);
			
 
				+            }
			
 
				+            else {
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+                ctx.save();
			
 
				+                ctx.drawImage(image, imageX, imageY);
			
 
				+                ctx.restore();
			
 
				+            }
			
 
				+        };
			
 
				+        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
			
 
				+            return {
			
 
				+                x: x,
			
 
				+                y: y,
			
 
				+                row: context.row,
			
 
				+                col: context.col,
			
 
				+                cellStyle: cellStyle,
			
 
				+                cellRect: cellRect,
			
 
				+                sheetArea: context.sheetArea
			
 
				+            };
			
 
				+        }
			
 
				+        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
			
 
				+            var level = hitinfo.sheet.rowOutlines.getLevel(hitinfo.row);
			
 
				+            var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
			
 
				+            if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
			
 
				+                var collapsed = hitinfo.sheet.rowOutlines.isCollapsed(hitinfo.row + 1);
			
 
				+                hitinfo.sheet.rowOutlines.setCollapsed(hitinfo.row, !collapsed);
			
 
				+                hitinfo.sheet.invalidateLayout();
			
 
				+                hitinfo.sheet.repaint();
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        var dt1 = new Date();
			
 
				+
			
 
				+        var spread = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
			
 
				+        spread.options.tabStripVisible = false;
			
 
				+        spread.options.showHorizontalScrollbar = false;
			
 
				+        spread.options.showVerticalScrollbar = false;
			
 
				+
			
 
				+        var sheet = spread.getSheet(0);
			
 
				+
			
 
				+        //sheet.isPaintSuspended(true);
			
 
				+        sheet.suspendPaint();
			
 
				+        sheet.suspendEvent();
			
 
				+        var dt2 = new Date();
			
 
				+
			
 
				+        //sheet.rowOutlines.direction = ns.Outlines.OutlineDirection.Backward;
			
 
				+        sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
			
 
				+        //sheet.getColumn(0).cellType(new TreeNodeCellType());
			
 
				+        //getRange(row, col, rowCount ,colCount, sheetArea)
			
 
				+        sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).cellType(new TreeNodeCellType());
			
 
				+        var dt3 = new Date();
			
 
				+
			
 
				+        sheet.setText(0, 0, "Permanent Differences");
			
 
				+        sheet.setText(1, 0, "Permanent Differences");
			
 
				+        sheet.setText(2, 0, "4P01 - Club Dues");
			
 
				+        sheet.setText(3, 0, "4P02 - Business Gifts");
			
 
				+        sheet.setText(4, 0, "4P03 - Int Inc-Muni Borads");
			
 
				+        sheet.setText(5, 0, "4P04 - Lobbying Expense");
			
 
				+        sheet.setText(6, 0, "4P05 - Skybox");
			
 
				+        sheet.setText(7, 0, "4P06 - Stock Options-Perm");
			
 
				+        sheet.setText(8, 0, "4P07 - M&E");
			
 
				+        sheet.setText(9, 0, "Total Permanent Differences");
			
 
				+        sheet.setText(10, 0, "Capital Loss Limitation");
			
 
				+        sheet.setText(11, 0, "Capital Gain/Loss, Sum included in Book income");
			
 
				+        sheet.setText(12, 0, "Capital Loss Disallowed");
			
 
				+        sheet.setText(13, 0, "Charitable Contribution Limitation");
			
 
				+        sheet.setText(14, 0, "Charitable Contributions included in Book income");
			
 
				+        sheet.setText(15, 0, "Demestic production activities deduction included in Book income");
			
 
				+        sheet.setText(16, 0, "Fedeeral Taxable Income Limitation");
			
 
				+        sheet.setText(17, 0, "Limitation percentage");
			
 
				+        sheet.setText(18, 0, "Charitable Contribution limitation");
			
 
				+        sheet.setText(19, 0, "Charitable Contributions disallowed");
			
 
				+        sheet.setText(20, 0, "Federal Taxable Income before Net Operating Loss Deduction");
			
 
				+        var dt3_1 = new Date();
			
 
				+        sheet.rowOutlines.group(1, 10);
			
 
				+        sheet.rowOutlines.group(3, 8);
			
 
				+        sheet.rowOutlines.group(4, 3);
			
 
				+        sheet.rowOutlines.group(12, 2);
			
 
				+        //sheet.rowOutlines.group(15, 6);
			
 
				+        sheet.rowOutlines.group(15, 2);
			
 
				+        sheet.rowOutlines.group(18, 3);
			
 
				+        //sheet.getColumn(0).width(300);
			
 
				+        var dt3_2 = new Date();
			
 
				+        sheet.getRange(-1, 0, -1 ,1).width(400);
			
 
				+        sheet.showRowOutline(false);
			
 
				+        var dt4 = new Date();
			
 
				+
			
 
				+        //sheet.getColumn(1).cellType(new ColorCellType());
			
 
				+        var A = 30;
			
 
				+        var B = 30000;
			
 
				+        var lev = 1;
			
 
				+        var secondlev = 1;
			
 
				+        for (var i = 0; i < 21; i++) {
			
 
				+            var level = sheet.rowOutlines.getLevel(i);
			
 
				+            if (level == -1) {
			
 
				+                lev = 1;
			
 
				+                secondlev = 1;
			
 
				+                sheet.setText(i, 1, "---");
			
 
				+            }
			
 
				+            else if (level == 0) {
			
 
				+                sheet.setText(i, 1, "00" + lev);
			
 
				+                lev++;
			
 
				+                secondlev = 1;
			
 
				+            }
			
 
				+            else {
			
 
				+                sheet.setText(i, 1, "00" + lev + "00" + secondlev);
			
 
				+                secondlev++;
			
 
				+            }
			
 
				+
			
 
				+            //*
			
 
				+            sheet.setText(i, 2, "m3");
			
 
				+            sheet.setValue(i, 3, (500 - 1) * Math.random() + 1);
			
 
				+            //sheet.getCell(i, 3).formatter(new GC.Spread.Formatter.GeneralFormatter("f", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 3).formatter("###,###.00");
			
 
				+            sheet.setValue(i, 4, (B - A) * Math.random() + A);
			
 
				+            //sheet.getCell(i, 4).formatter(new GC.Spread.Formatter.GeneralFormatter("f", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 4).formatter("###,###.00");
			
 
				+            sheet.setFormula(i, 5, '=D' + (i + 1).toString() + '*E' + (i + 1).toString());
			
 
				+            //sheet.getCell(i, 5).formatter(new GC.Spread.Formatter.GeneralFormatter("c3", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 5).formatter("$###,###.00");
			
 
				+            //*/
			
 
				+        }
			
 
				+        var dt5 = new Date();
			
 
				+
			
 
				+        var h = ns.SheetArea.colHeader;
			
 
				+
			
 
				+        sheet.setColumnCount(6, h);
			
 
				+        sheet.setColumnCount(6, ns.SheetArea.viewport);
			
 
				+
			
 
				+        sheet.setRowCount(2, h);
			
 
				+
			
 
				+        sheet.addSpan(0, 0, 2, 1, h);
			
 
				+        sheet.setText(0, 0, "任务名称", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 1, 2, 1, h);
			
 
				+        sheet.setText(0, 1, "任务编码", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 2, 2, 1, h);
			
 
				+        sheet.setText(0, 2, "单位", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 3, 1, 3, h);
			
 
				+        sheet.setText(0, 3, "施工图清单", h);
			
 
				+
			
 
				+        sheet.setText(1, 3, "数量", h);
			
 
				+        sheet.setText(1, 4, "单价", h);
			
 
				+        sheet.setText(1, 5, "合价", h);
			
 
				+
			
 
				+        //sheet.getColumns(1, 4).width(100);
			
 
				+        //sheet.getRange(1, 4, 1 ,1).width(100);
			
 
				+        sheet.getRange(-1, 4, -1 ,1, ns.SheetArea.viewport).width(100);
			
 
				+        //sheet.getColumns(5, 5).width(150);
			
 
				+        //sheet.getRange(1, 5, 1 ,1).width(100);
			
 
				+        sheet.getRange(-1, 5, -1 ,1, ns.SheetArea.viewport).width(100);
			
 
				+        sheet.setRowCount(22);
			
 
				+        //sheet.getColumn(1).hAlign(ns.HorizontalAlign.left);
			
 
				+
			
 
				+        sheet.resumeEvent();
			
 
				+        //sheet.isPaintSuspended(false);
			
 
				+        sheet.resumePaint();
			
 
				+        var dt6 = new Date();
			
 
				+
			
 
				+//        var Str = "duration 1: " + (dt1 - dtStart) + "\n";
			
 
				+//        Str += "duration 2: " + (dt2 - dt1) + "\n";
			
 
				+//        Str += "duration 3: " + (dt3 - dt2) + "\n";
			
 
				+//        Str += "duration 3_1: " + (dt3_1 - dt3) + "\n";
			
 
				+//        Str += "duration 3_2: " + (dt3_2 - dt3_1) + "\n";
			
 
				+//        Str += "duration 4: " + (dt4 - dt3) + "\n";
			
 
				+//        Str += "duration 5: " + (dt5 - dt4) + "\n";
			
 
				+//        Str += "duration 6: " + (dt6 - dt5) + "\n";
			
 
				+//        Str += "total: " + (dt6 - dtStart);
			
 
				+//        alert(Str);
			
 
				+
			
 
				+        $("#btn").click(function () {
			
 
				+            var spread = $("#ss").wijspread("spread");
			
 
				+            var data = spread.toJSON();
			
 
				+
			
 
				+            var spread1 = $("#ss1").wijspread("spread");
			
 
				+            spread1.fromJSON(data);
			
 
				+            var sheet = spread1.getActiveSheet();
			
 
				+            //sheet.getColumn(0).cellType(new TreeNodeCellType());
			
 
				+            //sheet.getRange(0, 0, 22 ,1).cellType(new TreeNodeCellType());
			
 
				+            sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).cellType(new TreeNodeCellType());
			
 
				+        });
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    function billOperation(opr) {
			
 
				+        if (currentSheetObj) {
			
 
				+            var selectedRanges = currentSheetObj.getSelections();
			
 
				+            if (selectedRanges) {
			
 
				+                //alert(selectedRanges.length);
			
 
				+                for (var i = 0; i < selectedRanges.length; i++) {
			
 
				+                    //row, rowCount, col, colCount
			
 
				+                    switch (opr) {
			
 
				+                        case  'insert':
			
 
				+                            currentSheetObj.addRows(selectedRanges[i].row, 1);
			
 
				+                            //value = instance.addRows(row, count);
			
 
				+                            break;
			
 
				+                        case  'remove':
			
 
				+                            if (selectedRanges[i].col == -1) {
			
 
				+                                currentSheetObj.deleteRows(selectedRanges[i].row, selectedRanges[i].rowCount);
			
 
				+                                //value = instance.deleteRows(row, count);
			
 
				+                            }
			
 
				+                            break;
			
 
				+                        case  'upgrade':
			
 
				+                            break;
			
 
				+                        case  'downgrade':
			
 
				+                            break;
			
 
				+                        case  'moveup':
			
 
				+                            break;
			
 
				+                        case  'movedown':
			
 
				+                            break;
			
 
				+                    }
			
 
				+                }
			
 
				+            } else {
			
 
				+                //alert("no cell was selected!");
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/js/bootstrap/bootstrap.min.js
+++ b/src/js/bootstrap/bootstrap.min.js
--- a/src/js/global.js
+++ b/src/js/global.js
@@ -0,0 +1,42 @@
 
				+/*全局自适应高度*/
			
 
				+function autoFlashHeight(){
			
 
				+    var headerHeight = $(".header").height();
			
 
				+    var toolsbarHeight = $(".toolsbar").height();
			
 
				+    var bottomContentHeight = $(".bottom-content").height();
			
 
				+    $(".content").height($(window).height()-headerHeight);
			
 
				+    $(".main-side").height($(window).height()-headerHeight-toolsbarHeight-2);
			
 
				+    $(".top-content").height($(window).height()-headerHeight-toolsbarHeight-bottomContentHeight-1);
			
 
				+    $(".fluid-content").height($(window).height()-headerHeight-toolsbarHeight-1);
			
 
				+    $(".side-content").height($(window).height()-headerHeight );
			
 
				+    $(".poj-list").height($(window).height()-headerHeight-toolsbarHeight);
			
 
				+};
			
 
				+$(window).resize(autoFlashHeight);
			
 
				+/*全局自适应高度结束*/
			
 
				+$(function(){
			
 
				+/*侧滑*/
			
 
				+$(".open-sidebar").click(function(){
			
 
				+    $(".slide-sidebar").animate({width:"800"}).addClass("open");
			
 
				+});
			
 
				+$("body").click(function(event){
			
 
				+        var e = event || window.event; //浏览器兼容性
			
 
				+        if(!$(event.target).is('a')) {
			
 
				+            var elem = event.target || e.srcElement;
			
 
				+            while (elem) { //循环判断至跟节点，防止点击的是div子元素
			
 
				+                if (elem.className == "open-sidebar" || elem.className == 'slide-sidebar open') {
			
 
				+                    return false;
			
 
				+                }
			
 
				+                elem = elem.parentNode;
			
 
				+            }
			
 
				+            $(".slide-sidebar").animate({width:"0"}).removeClass("open")// 关闭处理
			
 
				+        }
			
 
				+
			
 
				+    });
			
 
				+/*侧滑*/
			
 
				+/*工具提示*/
			
 
				+$('*[data-toggle=tooltip]').mouseover(function() {
			
 
				+ $(this).tooltip('show');
			
 
				+  });
			
 
				+/*工具提示*/
			
 
				+});
			
 
				+
			
 
				+
			
--- a/src/js/jquery/jquery.min.js
+++ b/src/js/jquery/jquery.min.js
--- a/src/js/tether/tether.min.js
+++ b/src/js/tether/tether.min.js
--- a/src/localTest.html
+++ b/src/localTest.html
--- a/src/localTest2.html
+++ b/src/localTest2.html
@@ -0,0 +1,269 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head lang="en">
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title></title>
			
 
				+</head>
			
 
				+<link rel="stylesheet" href="./spreadjs/css/gc.spread.sheets.10.0.1.css" type='text/css'/>
			
 
				+<script src='./spreadjs/scripts/gc.spread.sheets.all.10.0.1.min.js' type='text/javascript'></script>
			
 
				+<!--
			
 
				+<link rel="stylesheet" href="src/spreadjs/css/gc.spread.sheets.10.0.1.css" type='text/css'/>
			
 
				+<script src='src/spreadjs/scripts/gc.spread.sheets.all.10.0.1.min.js' type='text/javascript'></script>
			
 
				+<script type="text/javascript" src="/src/scripts/treeDataHelper.js"></script>
			
 
				+-->
			
 
				+<body>
			
 
				+<div style="display:none">
			
 
				+    <img id="image1" src="./resources/folder.png" alt="" width="15" height="15">
			
 
				+    <img id="image2" src="./resources/002.png" alt="" width="15" height="15">
			
 
				+</div>
			
 
				+<div id='ss' style='width:100%; height:400px;'></div>
			
 
				+</body>
			
 
				+<script id="scriptInit" type="text/javascript">
			
 
				+    window.onload = function (){
			
 
				+        createTreeNode();
			
 
				+    }
			
 
				+
			
 
				+    function createTreeNode() {
			
 
				+        var ns = GC.Spread.Sheets;
			
 
				+        //var spreadNS = GC.Spread.Sheets;
			
 
				+        var dtStart = new Date();
			
 
				+
			
 
				+        function TreeNodeCellType() {}
			
 
				+        TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
			
 
				+        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
			
 
				+            var level = options.sheet.rowOutlines.getLevel(options.row);
			
 
				+            var nlevel = -1;
			
 
				+            if (options.row < options.sheet.getRowCount() - 1) {
			
 
				+                nlevel = options.sheet.rowOutlines.getLevel(options.row + 1);
			
 
				+            }
			
 
				+            var hoffset = (level + 2) * 12;
			
 
				+            x += hoffset;
			
 
				+            w -= hoffset;
			
 
				+
			
 
				+            var image;
			
 
				+            if (nlevel > level) {
			
 
				+                image = document.getElementById('image1');
			
 
				+            }
			
 
				+            else {
			
 
				+                image = document.getElementById('image2');
			
 
				+            }
			
 
				+
			
 
				+            var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
			
 
				+            x += imageLayoutWidth;
			
 
				+            w -= imageLayoutWidth;
			
 
				+            //ns.CustomCellType.prototype.paint.apply(this, arguments);
			
 
				+            ns.CellTypes.Text.prototype.paint.apply(this, arguments);
			
 
				+
			
 
				+            if (options.row == options.sheet.getRowCount() - 1) return; //last row
			
 
				+
			
 
				+            if (nlevel > level) {
			
 
				+                var collapsed = options.sheet.rowOutlines.isCollapsed(options.row + 1);
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+                ctx.save();
			
 
				+                ctx.fillStyle = "black";
			
 
				+                ctx.beginPath();
			
 
				+                if (collapsed) {
			
 
				+                    ctx.moveTo(x - 5, y);
			
 
				+                    ctx.lineTo(x, y + 3);
			
 
				+                    ctx.lineTo(x - 5, y + 6);
			
 
				+                } else {
			
 
				+                    ctx.moveTo(x, y);
			
 
				+                    ctx.lineTo(x, y + 5);
			
 
				+                    ctx.lineTo(x - 5, y + 5);
			
 
				+                }
			
 
				+                ctx.fill();
			
 
				+                ctx.restore();
			
 
				+                ctx.drawImage(image, imageX, imageY);
			
 
				+            }
			
 
				+            else {
			
 
				+                x -= imageLayoutWidth;
			
 
				+                w += imageLayoutWidth;
			
 
				+                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
			
 
				+                x--;
			
 
				+                y += h / 2 - 3;
			
 
				+                ctx.save();
			
 
				+                ctx.drawImage(image, imageX, imageY);
			
 
				+                ctx.restore();
			
 
				+            }
			
 
				+        };
			
 
				+        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
			
 
				+            return {
			
 
				+                x: x,
			
 
				+                y: y,
			
 
				+                row: context.row,
			
 
				+                col: context.col,
			
 
				+                cellStyle: cellStyle,
			
 
				+                cellRect: cellRect,
			
 
				+                sheetArea: context.sheetArea
			
 
				+            };
			
 
				+        }
			
 
				+        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
			
 
				+            var level = hitinfo.sheet.rowOutlines.getLevel(hitinfo.row);
			
 
				+            var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
			
 
				+            if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
			
 
				+                var collapsed = hitinfo.sheet.rowOutlines.isCollapsed(hitinfo.row + 1);
			
 
				+                hitinfo.sheet.rowOutlines.setCollapsed(hitinfo.row, !collapsed);
			
 
				+                hitinfo.sheet.invalidateLayout();
			
 
				+                hitinfo.sheet.repaint();
			
 
				+            }
			
 
				+        };
			
 
				+
			
 
				+        var dt1 = new Date();
			
 
				+
			
 
				+        //var spread = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
			
 
				+        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
			
 
				+        spread.options.tabStripVisible = false;
			
 
				+        spread.options.showHorizontalScrollbar = false;
			
 
				+        spread.options.showVerticalScrollbar = false;
			
 
				+
			
 
				+        var sheet = spread.getSheet(0);
			
 
				+
			
 
				+        //sheet.isPaintSuspended(true);
			
 
				+        sheet.suspendPaint();
			
 
				+        sheet.suspendEvent();
			
 
				+        var dt2 = new Date();
			
 
				+
			
 
				+        //sheet.rowOutlines.direction = ns.Outlines.OutlineDirection.Backward;
			
 
				+        sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
			
 
				+        //sheet.getColumn(0).cellType(new TreeNodeCellType());
			
 
				+        //getRange(row, col, rowCount ,colCount, sheetArea)
			
 
				+        sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).cellType(new TreeNodeCellType());
			
 
				+        var dt3 = new Date();
			
 
				+
			
 
				+        sheet.setText(0, 0, "Permanent Differences");
			
 
				+        sheet.setText(1, 0, "Permanent Differences");
			
 
				+        sheet.setText(2, 0, "4P01 - Club Dues");
			
 
				+        sheet.setText(3, 0, "4P02 - Business Gifts");
			
 
				+        sheet.setText(4, 0, "4P03 - Int Inc-Muni Borads");
			
 
				+        sheet.setText(5, 0, "4P04 - Lobbying Expense");
			
 
				+        sheet.setText(6, 0, "4P05 - Skybox");
			
 
				+        sheet.setText(7, 0, "4P06 - Stock Options-Perm");
			
 
				+        sheet.setText(8, 0, "4P07 - M&E");
			
 
				+        sheet.setText(9, 0, "Total Permanent Differences");
			
 
				+        sheet.setText(10, 0, "Capital Loss Limitation");
			
 
				+        sheet.setText(11, 0, "Capital Gain/Loss, Sum included in Book income");
			
 
				+        sheet.setText(12, 0, "Capital Loss Disallowed");
			
 
				+        sheet.setText(13, 0, "Charitable Contribution Limitation");
			
 
				+        sheet.setText(14, 0, "Charitable Contributions included in Book income");
			
 
				+        sheet.setText(15, 0, "Demestic production activities deduction included in Book income");
			
 
				+        sheet.setText(16, 0, "Fedeeral Taxable Income Limitation");
			
 
				+        sheet.setText(17, 0, "Limitation percentage");
			
 
				+        sheet.setText(18, 0, "Charitable Contribution limitation");
			
 
				+        sheet.setText(19, 0, "Charitable Contributions disallowed");
			
 
				+        sheet.setText(20, 0, "Federal Taxable Income before Net Operating Loss Deduction");
			
 
				+        var dt3_1 = new Date();
			
 
				+        sheet.rowOutlines.group(3, 8);
			
 
				+        sheet.rowOutlines.group(1, 9);
			
 
				+        sheet.rowOutlines.group(12, 2);
			
 
				+        sheet.rowOutlines.group(15, 2);
			
 
				+        sheet.rowOutlines.group(18, 3);
			
 
				+        //sheet.getColumn(0).width(300);
			
 
				+        var dt3_2 = new Date();
			
 
				+        sheet.getRange(-1, 0, -1 ,1).width(400);
			
 
				+        sheet.showRowOutline(false);
			
 
				+        var dt4 = new Date();
			
 
				+
			
 
				+        //sheet.getColumn(1).cellType(new ColorCellType());
			
 
				+        var A = 30;
			
 
				+        var B = 30000;
			
 
				+        var lev = 1;
			
 
				+        var secondlev = 1;
			
 
				+        for (var i = 0; i < 21; i++) {
			
 
				+            var level = sheet.rowOutlines.getLevel(i);
			
 
				+            if (level == -1) {
			
 
				+                lev = 1;
			
 
				+                secondlev = 1;
			
 
				+                sheet.setText(i, 1, "---");
			
 
				+            }
			
 
				+            else if (level == 0) {
			
 
				+                sheet.setText(i, 1, "00" + lev);
			
 
				+                lev++;
			
 
				+                secondlev = 1;
			
 
				+            }
			
 
				+            else {
			
 
				+                sheet.setText(i, 1, "00" + lev + "00" + secondlev);
			
 
				+                secondlev++;
			
 
				+            }
			
 
				+
			
 
				+            //*
			
 
				+            sheet.setText(i, 2, "m3");
			
 
				+            sheet.setValue(i, 3, (500 - 1) * Math.random() + 1);
			
 
				+            //sheet.getCell(i, 3).formatter(new GC.Spread.Formatter.GeneralFormatter("f", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 3).formatter("###,###.00");
			
 
				+            sheet.setValue(i, 4, (B - A) * Math.random() + A);
			
 
				+            //sheet.getCell(i, 4).formatter(new GC.Spread.Formatter.GeneralFormatter("f", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 4).formatter("###,###.00");
			
 
				+            sheet.setFormula(i, 5, '=D' + (i + 1).toString() + '*E' + (i + 1).toString());
			
 
				+            //sheet.getCell(i, 5).formatter(new GC.Spread.Formatter.GeneralFormatter("c3", ns.FormatMode.StandardNumericMode));
			
 
				+            sheet.getCell(i, 5).formatter("$###,###.00");
			
 
				+            //*/
			
 
				+        }
			
 
				+        var dt5 = new Date();
			
 
				+
			
 
				+        var h = ns.SheetArea.colHeader;
			
 
				+
			
 
				+        sheet.setColumnCount(6, h);
			
 
				+        sheet.setColumnCount(6, ns.SheetArea.viewport);
			
 
				+
			
 
				+        sheet.setRowCount(2, h);
			
 
				+
			
 
				+        sheet.addSpan(0, 0, 2, 1, h);
			
 
				+        sheet.setText(0, 0, "任务名称", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 1, 2, 1, h);
			
 
				+        sheet.setText(0, 1, "任务编码", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 2, 2, 1, h);
			
 
				+        sheet.setText(0, 2, "单位", h);
			
 
				+
			
 
				+        sheet.addSpan(0, 3, 1, 3, h);
			
 
				+        sheet.setText(0, 3, "施工图清单", h);
			
 
				+
			
 
				+        sheet.setText(1, 3, "数量", h);
			
 
				+        sheet.setText(1, 4, "单价", h);
			
 
				+        sheet.setText(1, 5, "合价", h);
			
 
				+
			
 
				+        //sheet.getColumns(1, 4).width(100);
			
 
				+        //sheet.getRange(1, 4, 1 ,1).width(100);
			
 
				+        sheet.getRange(-1, 4, -1 ,1, ns.SheetArea.viewport).width(100);
			
 
				+        //sheet.getColumns(5, 5).width(150);
			
 
				+        //sheet.getRange(1, 5, 1 ,1).width(100);
			
 
				+        sheet.getRange(-1, 5, -1 ,1, ns.SheetArea.viewport).width(100);
			
 
				+        sheet.setRowCount(22);
			
 
				+        //sheet.getColumn(1).hAlign(ns.HorizontalAlign.left);
			
 
				+
			
 
				+        sheet.resumeEvent();
			
 
				+        //sheet.isPaintSuspended(false);
			
 
				+        sheet.resumePaint();
			
 
				+        var dt6 = new Date();
			
 
				+
			
 
				+//        var Str = "duration 1: " + (dt1 - dtStart) + "\n";
			
 
				+//        Str += "duration 2: " + (dt2 - dt1) + "\n";
			
 
				+//        Str += "duration 3: " + (dt3 - dt2) + "\n";
			
 
				+//        Str += "duration 3_1: " + (dt3_1 - dt3) + "\n";
			
 
				+//        Str += "duration 3_2: " + (dt3_2 - dt3_1) + "\n";
			
 
				+//        Str += "duration 4: " + (dt4 - dt3) + "\n";
			
 
				+//        Str += "duration 5: " + (dt5 - dt4) + "\n";
			
 
				+//        Str += "duration 6: " + (dt6 - dt5) + "\n";
			
 
				+//        Str += "total: " + (dt6 - dtStart);
			
 
				+//        alert(Str);
			
 
				+
			
 
				+        $("#btn").click(function () {
			
 
				+            var spread = $("#ss").wijspread("spread");
			
 
				+            var data = spread.toJSON();
			
 
				+
			
 
				+            var spread1 = $("#ss1").wijspread("spread");
			
 
				+            spread1.fromJSON(data);
			
 
				+            var sheet = spread1.getActiveSheet();
			
 
				+            //sheet.getColumn(0).cellType(new TreeNodeCellType());
			
 
				+            //sheet.getRange(0, 0, 22 ,1).cellType(new TreeNodeCellType());
			
 
				+            sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).cellType(new TreeNodeCellType());
			
 
				+        });
			
 
				+
			
 
				+    }
			
 
				+</script>
			
 
				+</html>
			
--- a/src/resources/002.png
+++ b/src/resources/002.png
--- a/src/resources/folder.png
+++ b/src/resources/folder.png
--- a/src/resources/wijmo5.png
+++ b/src/resources/wijmo5.png
--- a/src/scripts/ExcelConverter/ExcelConverter.js
+++ b/src/scripts/ExcelConverter/ExcelConverter.js
@@ -0,0 +1,963 @@
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (_grid) {
			
 
				+        'use strict';
			
 
				+
			
 
				+        /**
			
 
				+        * ExcelConverter class provides function exporting FlexGrid to xlsx file
			
 
				+        * and importing xlsx file to FlexGrid.
			
 
				+        */
			
 
				+        var ExcelConverter = (function () {
			
 
				+            function ExcelConverter() {
			
 
				+            }
			
 
				+            /**
			
 
				+            * export the FlexGrid to xlsx file
			
 
				+            *
			
 
				+            * @param flex the FlexGrid need be exported to xlsx file
			
 
				+            * @param convertOption the options for exporting.
			
 
				+            */
			
 
				+            ExcelConverter.export = function (flex, convertOption) {
			
 
				+                if (typeof convertOption === "undefined") { convertOption = { includeColumnHeader: true }; }
			
 
				+                var file, result;
			
 
				+
			
 
				+                file = this.parseFlexGridToCommonFormat(flex, convertOption);
			
 
				+                result = xlsx(file);
			
 
				+
			
 
				+                result.base64Array = this._base64DecToArr(result.base64);
			
 
				+
			
 
				+                return result;
			
 
				+            };
			
 
				+
			
 
				+            /**
			
 
				+            * import the xlsx file
			
 
				+            *
			
 
				+            * @param file the base64 string converted from xlsx file
			
 
				+            * @param flex the Flex Grid need bind the data import from xlsx file
			
 
				+            * @param convertOption the options for importing.
			
 
				+            * @param moreSheets flexgrid array for importing multiple sheets of the excel file.
			
 
				+            */
			
 
				+            ExcelConverter.import = function (file, flex, convertOption, moreSheets) {
			
 
				+                if (typeof convertOption === "undefined") { convertOption = { includeColumnHeader: true }; }
			
 
				+                var fileData = this._base64EncArr(new Uint8Array(file)), fileObj = xlsx(fileData);
			
 
				+
			
 
				+                this.parseCommonFormatToFlexGrid(fileObj, flex, convertOption, moreSheets);
			
 
				+            };
			
 
				+
			
 
				+            /**
			
 
				+            * Parse the flexgrid to common format of xlsx file.
			
 
				+            *
			
 
				+            * @param flex the FlexGrid need be parsed to  common format of xlsx file
			
 
				+            * @param convertOption the options for exporting.
			
 
				+            */
			
 
				+            ExcelConverter.parseFlexGridToCommonFormat = function (flex, convertOption) {
			
 
				+                if (typeof convertOption === "undefined") { convertOption = { includeColumnHeader: true }; }
			
 
				+                var file = {
			
 
				+                    sheets: [],
			
 
				+                    creator: 'Mike Lu',
			
 
				+                    created: new Date(),
			
 
				+                    lastModifiedBy: 'Mike Lu',
			
 
				+                    modified: new Date(),
			
 
				+                    activeWorksheet: 0
			
 
				+                }, index, grid;
			
 
				+
			
 
				+                if (wijmo.isArray(flex)) {
			
 
				+                    for (index = 0; index < flex.length; index++) {
			
 
				+                        grid = flex[index];
			
 
				+
			
 
				+                        // export the FlexGrid to xlsx.
			
 
				+                        this._exportFlexGrid(grid, file, convertOption);
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    this._exportFlexGrid(flex, file, convertOption);
			
 
				+                }
			
 
				+
			
 
				+                return file;
			
 
				+            };
			
 
				+
			
 
				+            /**
			
 
				+            * Parse the common format of the xlsx file to flexgrid.
			
 
				+            *
			
 
				+            * @param fileObj the common format of the xlsx file.
			
 
				+            * @param flex the Flex Grid need bind the data import from xlsx file.
			
 
				+            * @param convertOption the options for importing.
			
 
				+            * @param moreSheets flexgrid array for importing multiple sheets of the excel file.
			
 
				+            */
			
 
				+            ExcelConverter.parseCommonFormatToFlexGrid = function (fileObj, flex, convertOption, moreSheets) {
			
 
				+                if (typeof convertOption === "undefined") { convertOption = { includeColumnHeader: true }; }
			
 
				+                var currentIncludeRowHeader = convertOption.includeColumnHeader, sheetCount = 1, sheetIndex = 0, c = 0, r = 0, columns, columnSetting, column, columnHeader, sheetHeaders, sheetHeader, headerForamt, row, currentSheet, columnCount, isGroupHeader, item, nextRowIdx, nextRow, summaryBelow, groupRow, frozenColumns, frozenRows, formula, flexHostElement, cellIndex, cellStyle, styledCells, excelThemes, mergedRange, fonts, valType, textAlign, groupCollapsed = false;
			
 
				+
			
 
				+                flex.columns.clear();
			
 
				+                flex.rows.clear();
			
 
				+                flex.frozenColumns = 0;
			
 
				+                flex.frozenRows = 0;
			
 
				+
			
 
				+                if (fileObj.sheets.length === 0) {
			
 
				+                    return;
			
 
				+                }
			
 
				+
			
 
				+                excelThemes = fileObj.themes;
			
 
				+
			
 
				+                if (moreSheets) {
			
 
				+                    sheetCount = fileObj.sheets.length;
			
 
				+                }
			
 
				+
			
 
				+                for (; sheetIndex < sheetCount; sheetIndex++) {
			
 
				+                    styledCells = {};
			
 
				+                    mergedRange = {};
			
 
				+                    r = 0;
			
 
				+                    columns = [];
			
 
				+                    fonts = [];
			
 
				+                    currentSheet = fileObj.sheets[sheetIndex];
			
 
				+
			
 
				+                    if (convertOption.includeColumnHeader) {
			
 
				+                        r = 1;
			
 
				+                        if (currentSheet.rows.length <= 1) {
			
 
				+                            currentIncludeRowHeader = false;
			
 
				+                            r = 0;
			
 
				+                        }
			
 
				+                        sheetHeaders = currentSheet.rows[0];
			
 
				+                    }
			
 
				+                    columnCount = this._getColumnCount(currentSheet.rows);
			
 
				+                    summaryBelow = currentSheet.summaryBelow;
			
 
				+
			
 
				+                    if (sheetIndex > 0) {
			
 
				+                        flexHostElement = document.createElement('div');
			
 
				+                        flex = new _grid.FlexGrid(flexHostElement);
			
 
				+                    }
			
 
				+
			
 
				+                    for (c = 0; c < columnCount; c++) {
			
 
				+                        flex.columns.push(new wijmo.grid.Column());
			
 
				+                        if (!!currentSheet.cols[c]) {
			
 
				+                            if (!isNaN(currentSheet.cols[c].width)) {
			
 
				+                                flex.columns[c].width = currentSheet.cols[c].width * 6;
			
 
				+                            }
			
 
				+
			
 
				+                            if (!currentSheet.cols[c].visible && currentSheet.cols[c].visible != undefined) {
			
 
				+                                flex.columns[c].visible = !!currentSheet.cols[c].visible;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    for (; r < currentSheet.rows.length; r++) {
			
 
				+                        isGroupHeader = false;
			
 
				+                        row = currentSheet.rows[r];
			
 
				+
			
 
				+                        if (row) {
			
 
				+                            nextRowIdx = r + 1;
			
 
				+                            while (nextRowIdx < currentSheet.rows.length) {
			
 
				+                                nextRow = currentSheet.rows[nextRowIdx];
			
 
				+                                if (nextRow) {
			
 
				+                                    if ((isNaN(row.groupLevel) && !isNaN(nextRow.groupLevel)) || (!isNaN(row.groupLevel) && row.groupLevel < nextRow.groupLevel)) {
			
 
				+                                        isGroupHeader = true;
			
 
				+                                    }
			
 
				+                                    break;
			
 
				+                                } else {
			
 
				+                                    nextRowIdx++;
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        if (isGroupHeader && !summaryBelow) {
			
 
				+                            groupRow = new _grid.GroupRow();
			
 
				+                            groupCollapsed = row.collapsed;
			
 
				+                            groupRow.level = isNaN(row.groupLevel) ? 0 : row.groupLevel;
			
 
				+                            flex.rows.push(groupRow);
			
 
				+                        } else {
			
 
				+                            flex.rows.push(new _grid.Row());
			
 
				+                        }
			
 
				+
			
 
				+                        if (row && !!row.height && !isNaN(row.height)) {
			
 
				+                            flex.rows[currentIncludeRowHeader ? r - 1 : r].height = row.height * 96 / 72;
			
 
				+                        }
			
 
				+
			
 
				+                        for (c = 0; c < columnCount; c++) {
			
 
				+                            if (!row) {
			
 
				+                                flex.setCellData(currentIncludeRowHeader ? r - 1 : r, c, '');
			
 
				+                                this._setColumn(columns, c, undefined);
			
 
				+                            } else {
			
 
				+                                item = row.cells[c];
			
 
				+                                formula = item ? item.formula : undefined;
			
 
				+                                if (formula && formula[0] !== '=') {
			
 
				+                                    formula = '=' + formula;
			
 
				+                                }
			
 
				+                                formula = formula ? this._parseFlexSheetFormula(formula) : undefined;
			
 
				+                                flex.setCellData(currentIncludeRowHeader ? r - 1 : r, c, formula && moreSheets ? formula : this._getItemValue(item));
			
 
				+                                if (!isGroupHeader && item && item.value != null && item.value !== '') {
			
 
				+                                    this._setColumn(columns, c, item);
			
 
				+                                }
			
 
				+
			
 
				+                                // Set styles for the cell in current processing sheet.
			
 
				+                                cellIndex = r * columnCount + c;
			
 
				+                                cellStyle = item ? item.style : undefined;
			
 
				+                                if (cellStyle) {
			
 
				+                                    valType = this._getItemType(item);
			
 
				+                                    if (cellStyle.hAlign) {
			
 
				+                                        textAlign = cellStyle.hAlign;
			
 
				+                                    } else {
			
 
				+                                        switch (valType) {
			
 
				+                                            case 2 /* Number */:
			
 
				+                                                textAlign = 'right';
			
 
				+                                                break;
			
 
				+                                            case 3 /* Boolean */:
			
 
				+                                                textAlign = 'center';
			
 
				+                                                break;
			
 
				+                                            default:
			
 
				+                                                textAlign = 'left';
			
 
				+                                                break;
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                    styledCells[cellIndex] = {
			
 
				+                                        fontWeight: cellStyle.font && cellStyle.font.bold ? 'bold' : 'none',
			
 
				+                                        fontStyle: cellStyle.font && cellStyle.font.italic ? 'italic' : 'none',
			
 
				+                                        textDecoration: cellStyle.font && cellStyle.font.underline ? 'underline' : 'none',
			
 
				+                                        textAlign: textAlign,
			
 
				+                                        fontFamily: cellStyle.font && cellStyle.font.family ? cellStyle.font.family : '',
			
 
				+                                        fontSize: cellStyle.font && cellStyle.font.size ? Math.round(+cellStyle.font.size * 96 / 72) + 'px' : '',
			
 
				+                                        color: cellStyle.font ? this._parseExcelColor(cellStyle.font.color, excelThemes) : '',
			
 
				+                                        backgroundColor: cellStyle.fill && cellStyle.fill.color ? this._parseExcelColor(cellStyle.fill.color, excelThemes) : ''
			
 
				+                                    };
			
 
				+                                    if (cellStyle.font && fonts.indexOf(cellStyle.font.family) === -1) {
			
 
				+                                        fonts.push(cellStyle.font.family);
			
 
				+                                    }
			
 
				+                                }
			
 
				+
			
 
				+                                // Get merged cell ranges.
			
 
				+                                if (item && wijmo.isNumber(item.rowSpan) && wijmo.isNumber(item.colSpan)) {
			
 
				+                                    for (var i = r; i < r + item.rowSpan; i++) {
			
 
				+                                        for (var j = c; j < c + item.colSpan; j++) {
			
 
				+                                            cellIndex = i * columnCount + j;
			
 
				+                                            mergedRange[cellIndex] = new _grid.CellRange(r, c, r + item.rowSpan - 1, c + item.colSpan - 1);
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+
			
 
				+                        if (!groupCollapsed && row && !row.visible && row.visible != undefined) {
			
 
				+                            flex.rows[currentIncludeRowHeader ? r - 1 : r].visible = row.visible;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    if (currentSheet.frozenPane) {
			
 
				+                        frozenColumns = currentSheet.frozenPane.columns;
			
 
				+                        if (wijmo.isNumber(frozenColumns) && !isNaN(frozenColumns)) {
			
 
				+                            flex.frozenColumns = frozenColumns;
			
 
				+                        }
			
 
				+
			
 
				+                        frozenRows = currentSheet.frozenPane.rows;
			
 
				+                        if (wijmo.isNumber(frozenRows) && !isNaN(frozenRows)) {
			
 
				+                            flex.frozenRows = currentIncludeRowHeader && frozenRows > 0 ? frozenRows - 1 : frozenRows;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    for (c = 0; c < flex.columnHeaders.columns.length; c++) {
			
 
				+                        columnSetting = columns[c];
			
 
				+                        column = flex.columns[c];
			
 
				+                        if (currentIncludeRowHeader) {
			
 
				+                            sheetHeader = sheetHeaders ? sheetHeaders.cells[c] : undefined;
			
 
				+                            if (sheetHeader && sheetHeader.value) {
			
 
				+                                headerForamt = this._parseExcelFormat(sheetHeader);
			
 
				+                                columnHeader = wijmo.Globalize.format(sheetHeader.value, headerForamt);
			
 
				+                            } else {
			
 
				+                                columnHeader = this._numAlpha(c);
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            columnHeader = this._numAlpha(c);
			
 
				+                        }
			
 
				+                        column.header = columnHeader;
			
 
				+                        if (columnSetting) {
			
 
				+                            if (columnSetting.dataType) {
			
 
				+                                column.dataType = columnSetting.dataType;
			
 
				+                            }
			
 
				+                            column.format = columnSetting.format;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    // Set sheet related info for importing.
			
 
				+                    // This property contains the name, style of cells, merge cells and used fonts of current sheet.
			
 
				+                    if (moreSheets) {
			
 
				+                        flex['wj_sheetInfo'] = {
			
 
				+                            name: currentSheet.name,
			
 
				+                            styledCells: styledCells,
			
 
				+                            mergedRange: mergedRange,
			
 
				+                            fonts: fonts
			
 
				+                        };
			
 
				+                    }
			
 
				+
			
 
				+                    if (sheetIndex === 0) {
			
 
				+                        flex['styledCells'] = styledCells;
			
 
				+                        flex['mergedRange'] = mergedRange;
			
 
				+                    }
			
 
				+
			
 
				+                    if (moreSheets && sheetIndex > 0) {
			
 
				+                        moreSheets.push(flex);
			
 
				+                    }
			
 
				+                }
			
 
				+            };
			
 
				+
			
 
				+            // export the flexgrid to excel file
			
 
				+            ExcelConverter._exportFlexGrid = function (flex, file, convertOption) {
			
 
				+                var worksheetData = [], columnSettings = [], workSheet = {
			
 
				+                    name: '',
			
 
				+                    cols: [],
			
 
				+                    rows: [],
			
 
				+                    frozenPane: {},
			
 
				+                    summaryBelow: false
			
 
				+                }, groupLevel = 0, worksheetDataHeader, rowHeight, column, row, groupRow, isGroupRow, value, columnSetting, ri, ci, sheetInfo, fakeCell, headerCellStyle;
			
 
				+
			
 
				+                // Set sheet name for the exporting sheet.
			
 
				+                sheetInfo = flex['wj_sheetInfo'];
			
 
				+                workSheet.name = sheetInfo ? sheetInfo.name : '';
			
 
				+
			
 
				+                if (!sheetInfo) {
			
 
				+                    fakeCell = document.createElement('div'), fakeCell.style.visibility = 'hidden';
			
 
				+                    flex.hostElement.appendChild(fakeCell);
			
 
				+                    headerCellStyle = this._getCellStyle(flex, fakeCell, 0, 0, "columnHeaders") || {};
			
 
				+                }
			
 
				+
			
 
				+                // add the headers in the worksheet.
			
 
				+                if (convertOption.includeColumnHeader && flex.columnHeaders.rows.length > 0) {
			
 
				+                    for (ri = 0; ri < flex.columnHeaders.rows.length; ri++) {
			
 
				+                        worksheetDataHeader = {
			
 
				+                            visible: true,
			
 
				+                            cells: []
			
 
				+                        };
			
 
				+                        rowHeight = flex.columnHeaders.rows[ri].height;
			
 
				+                        if (rowHeight) {
			
 
				+                            rowHeight = rowHeight * 72 / 96;
			
 
				+                        }
			
 
				+                        worksheetDataHeader.height = rowHeight;
			
 
				+                        worksheetDataHeader.visible = true;
			
 
				+
			
 
				+                        for (ci = 0; ci < flex.columnHeaders.columns.length; ci++) {
			
 
				+                            column = flex.columnHeaders.columns[ci];
			
 
				+                            value = flex.columnHeaders.getCellData(ri, ci, true);
			
 
				+
			
 
				+                            if (ri === 0) {
			
 
				+                                columnSetting = this._getColumnSetting(column, flex.columnHeaders.columns.defaultSize);
			
 
				+                                columnSettings.push(columnSetting);
			
 
				+                            }
			
 
				+
			
 
				+                            worksheetDataHeader.cells.push({
			
 
				+                                value: value,
			
 
				+                                style: this._extend(this._parseCellStyle(headerCellStyle), {
			
 
				+                                    font: {
			
 
				+                                        bold: true
			
 
				+                                    },
			
 
				+                                    hAlign: columnSetting.style.hAlign
			
 
				+                                })
			
 
				+                            });
			
 
				+                        }
			
 
				+                        worksheetData.push(worksheetDataHeader);
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    for (ci = 0; ci < flex.columnHeaders.columns.length; ci++) {
			
 
				+                        column = flex.columnHeaders.columns[ci];
			
 
				+
			
 
				+                        columnSetting = this._getColumnSetting(column, flex.columnHeaders.columns.defaultSize);
			
 
				+                        columnSettings.push(columnSetting);
			
 
				+                    }
			
 
				+                }
			
 
				+                workSheet.cols = columnSettings;
			
 
				+
			
 
				+                for (ri = 0; ri < flex.cells.rows.length; ri++) {
			
 
				+                    row = flex.rows[ri];
			
 
				+                    isGroupRow = row instanceof _grid.GroupRow;
			
 
				+
			
 
				+                    if (isGroupRow) {
			
 
				+                        groupRow = wijmo.tryCast(row, _grid.GroupRow);
			
 
				+                        groupLevel = groupRow.level + 1;
			
 
				+                    }
			
 
				+
			
 
				+                    worksheetData.push(this._parseFlexGridRowToSheetRow(flex, row, ri, columnSettings, convertOption.includeColumnHeader, isGroupRow, groupLevel));
			
 
				+                }
			
 
				+
			
 
				+                workSheet.rows = worksheetData;
			
 
				+                workSheet.frozenPane = {
			
 
				+                    rows: convertOption.includeColumnHeader ? (flex.frozenRows + flex.columnHeaders.rows.length) : flex.frozenRows,
			
 
				+                    columns: flex.frozenColumns
			
 
				+                };
			
 
				+
			
 
				+                file.sheets.push(workSheet);
			
 
				+
			
 
				+                if (!sheetInfo) {
			
 
				+                    // done with style element
			
 
				+                    flex.hostElement.removeChild(fakeCell);
			
 
				+                }
			
 
				+            };
			
 
				+
			
 
				+            // Parse the row data of flex grid to a sheet row
			
 
				+            ExcelConverter._parseFlexGridRowToSheetRow = function (flex, row, rowIndex, columnSettings, includeColumnHeader, isGroupRow, groupLevel) {
			
 
				+                var rowHeight = row.height, worksheetDataItem, columnSetting, format, val, unformattedVal, groupHeader, isFormula, cellIndex, cellStyle, mergedCells, rowSpan, colSpan, sheetInfo, isCommonRow, fakeCell;
			
 
				+
			
 
				+                sheetInfo = flex['wj_sheetInfo'];
			
 
				+
			
 
				+                worksheetDataItem = {
			
 
				+                    visible: true,
			
 
				+                    cells: []
			
 
				+                };
			
 
				+
			
 
				+                if (rowHeight) {
			
 
				+                    rowHeight = rowHeight * 72 / 96;
			
 
				+                }
			
 
				+                worksheetDataItem.visible = row.visible;
			
 
				+                worksheetDataItem.height = rowHeight;
			
 
				+                worksheetDataItem.groupLevel = isGroupRow ? (groupLevel - 1) : groupLevel;
			
 
				+
			
 
				+                isCommonRow = row.constructor === wijmo.grid.Row || row.constructor === wijmo.grid._NewRowTemplate || row.constructor === wijmo.grid.detail.DetailRow;
			
 
				+
			
 
				+                if (!sheetInfo) {
			
 
				+                    fakeCell = document.createElement('div'), fakeCell.style.visibility = 'hidden';
			
 
				+                    flex.hostElement.appendChild(fakeCell);
			
 
				+                }
			
 
				+
			
 
				+                for (var ci = 0; ci < flex.columnHeaders.columns.length; ci++) {
			
 
				+                    colSpan = 1;
			
 
				+                    rowSpan = 1;
			
 
				+                    if (sheetInfo) {
			
 
				+                        cellIndex = rowIndex * flex.columns.length + ci;
			
 
				+
			
 
				+                        // Get merge range for cell.
			
 
				+                        if (sheetInfo.mergedRange) {
			
 
				+                            mergedCells = sheetInfo.mergedRange[cellIndex];
			
 
				+                        }
			
 
				+
			
 
				+                        // Get style for cell.
			
 
				+                        if (sheetInfo.styledCells) {
			
 
				+                            cellStyle = sheetInfo.styledCells[cellIndex];
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        cellStyle = this._getCellStyle(flex, fakeCell, rowIndex, ci) || {};
			
 
				+                    }
			
 
				+
			
 
				+                    if (mergedCells) {
			
 
				+                        if (rowIndex === mergedCells.topRow && ci === mergedCells.leftCol) {
			
 
				+                            rowSpan = mergedCells.bottomRow - mergedCells.topRow + 1;
			
 
				+                            colSpan = mergedCells.rightCol - mergedCells.leftCol + 1;
			
 
				+                        } else {
			
 
				+                            continue;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    columnSetting = columnSettings[ci];
			
 
				+                    if (isCommonRow || isGroupRow) {
			
 
				+                        val = flex.getCellData(rowIndex, ci, true);
			
 
				+                        unformattedVal = flex.getCellData(rowIndex, ci, false);
			
 
				+                        isFormula = val && wijmo.isString(val) && val.length > 1 && val[0] === '=';
			
 
				+                        format = columnSetting.style.format;
			
 
				+                        if (!format) {
			
 
				+                            if (wijmo.isDate(unformattedVal)) {
			
 
				+                                format = 'm/d/yyyy';
			
 
				+                            } else if (wijmo.isNumber(unformattedVal) && !wijmo.isInt(unformattedVal)) {
			
 
				+                                format = this._formatMap['n'];
			
 
				+                            } else if (wijmo.isInt(unformattedVal)) {
			
 
				+                                if (unformattedVal.toString() === val) {
			
 
				+                                    format = '#,##0';
			
 
				+                                } else {
			
 
				+                                    format = 'General';
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        val = flex.columnHeaders.getCellData(0, ci, true);
			
 
				+                        format = 'General';
			
 
				+                    }
			
 
				+
			
 
				+                    if (isGroupRow && row['hasChildren'] && ci === flex.columns.firstVisibleIndex) {
			
 
				+                        // Process the group header of the flex grid.
			
 
				+                        if (val) {
			
 
				+                            groupHeader = val;
			
 
				+                        } else {
			
 
				+                            groupHeader = row.dataItem && row.dataItem.groupDescription ? row.dataItem.groupDescription.propertyName + ': ' + row.dataItem.name + ' (' + row.dataItem.items.length + ' items)' : '';
			
 
				+                        }
			
 
				+
			
 
				+                        worksheetDataItem.cells.push({
			
 
				+                            value: groupHeader,
			
 
				+                            formula: isFormula ? this._parseExcelFormula(val) : null,
			
 
				+                            colSpan: colSpan,
			
 
				+                            rowSpan: rowSpan,
			
 
				+                            style: this._extend(this._parseCellStyle(cellStyle), {
			
 
				+                                formatCode: format,
			
 
				+                                originalFormat: columnSetting.style.format,
			
 
				+                                font: {
			
 
				+                                    bold: true
			
 
				+                                },
			
 
				+                                hAlign: 'left',
			
 
				+                                indent: groupLevel - 1
			
 
				+                            })
			
 
				+                        });
			
 
				+                    } else {
			
 
				+                        // Add the cell content
			
 
				+                        worksheetDataItem.cells.push({
			
 
				+                            value: format === 'General' ? val : unformattedVal,
			
 
				+                            formula: isFormula ? this._parseExcelFormula(val) : null,
			
 
				+                            colSpan: colSpan,
			
 
				+                            rowSpan: rowSpan,
			
 
				+                            style: this._extend(this._parseCellStyle(cellStyle), {
			
 
				+                                formatCode: format,
			
 
				+                                originalFormat: columnSetting.style.format,
			
 
				+                                hAlign: cellStyle && cellStyle.textAlign ? undefined : wijmo.isDate(unformattedVal) && columnSetting.style.hAlign === '' ? 'left' : columnSetting.style.hAlign
			
 
				+                            })
			
 
				+                        });
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                if (!sheetInfo) {
			
 
				+                    // done with style element
			
 
				+                    flex.hostElement.removeChild(fakeCell);
			
 
				+                }
			
 
				+
			
 
				+                return worksheetDataItem;
			
 
				+            };
			
 
				+
			
 
				+            // Parse css style to Excel style.
			
 
				+            // To jcc: you may merge your changes here.
			
 
				+            ExcelConverter._parseCellStyle = function (cellStyle) {
			
 
				+                var fontSize = cellStyle && cellStyle.fontSize ? +cellStyle.fontSize.substring(0, cellStyle.fontSize.indexOf('px')) : 14;
			
 
				+
			
 
				+                // We should parse the font size from pixel to point for exporting.
			
 
				+                if (isNaN(fontSize)) {
			
 
				+                    fontSize = 10;
			
 
				+                } else {
			
 
				+                    fontSize = Math.round(fontSize * 72 / 96);
			
 
				+                }
			
 
				+
			
 
				+                return {
			
 
				+                    font: {
			
 
				+                        bold: cellStyle && cellStyle.fontWeight && cellStyle.fontWeight === 'bold',
			
 
				+                        italic: cellStyle && cellStyle.fontStyle && cellStyle.fontStyle === 'italic',
			
 
				+                        underline: cellStyle && cellStyle.textDecoration && cellStyle.textDecoration === 'underline',
			
 
				+                        family: cellStyle ? this._parseExcelFontFamily(cellStyle.fontFamily) : 'Arial',
			
 
				+                        size: fontSize,
			
 
				+                        color: cellStyle && cellStyle.color ? cellStyle.color : ''
			
 
				+                    },
			
 
				+                    fill: {
			
 
				+                        color: cellStyle && cellStyle.backgroundColor ? cellStyle.backgroundColor : ''
			
 
				+                    },
			
 
				+                    hAlign: cellStyle && cellStyle.textAlign
			
 
				+                };
			
 
				+            };
			
 
				+
			
 
				+            // Parse the cell format of flex grid to excel format.
			
 
				+            ExcelConverter._parseCellFormat = function (format) {
			
 
				+                var dec = -1, fisrtFormatChar = format[0], mapFormat = this._formatMap[fisrtFormatChar], currencySymbol = wijmo.culture.Globalize.numberFormat.currency.symbol, decimalArray = [], xlsxFormat;
			
 
				+
			
 
				+                if (!mapFormat) {
			
 
				+                    return 'General';
			
 
				+                }
			
 
				+
			
 
				+                if (fisrtFormatChar === 'c') {
			
 
				+                    mapFormat = mapFormat.replace(/\{0\}/g, currencySymbol);
			
 
				+                }
			
 
				+
			
 
				+                if (format.length > 1) {
			
 
				+                    dec = parseInt(format.substr(1));
			
 
				+                    if (dec === 0) {
			
 
				+                        return mapFormat.replace(/\.00/g, '');
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                if (!isNaN(dec)) {
			
 
				+                    for (var i = 0; i < dec; i++) {
			
 
				+                        decimalArray.push(0);
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                if (decimalArray.length > 0) {
			
 
				+                    xlsxFormat = mapFormat.replace(/\.00/g, '.' + decimalArray.join(''));
			
 
				+                } else {
			
 
				+                    if (mapFormat) {
			
 
				+                        xlsxFormat = mapFormat;
			
 
				+                    } else {
			
 
				+                        xlsxFormat = format.replace(/tt/, 'AM/PM');
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                return xlsxFormat;
			
 
				+            };
			
 
				+
			
 
				+            // parse the basic excel format to js format
			
 
				+            ExcelConverter._parseExcelFormat = function (item) {
			
 
				+                if (item === undefined || item === null || item.value === undefined || item.value === null || isNaN(item.value)) {
			
 
				+                    return undefined;
			
 
				+                }
			
 
				+
			
 
				+                var formatCode = item.style && item.style.formatCode ? item.style.formatCode : '', currencySymbol = wijmo.culture.Globalize.numberFormat.currency.symbol, format = '', lastDotIndex;
			
 
				+
			
 
				+                if (wijmo.isDate(item.value)) {
			
 
				+                    if (!formatCode || formatCode === 'General') {
			
 
				+                        return 'M/d/yyyy';
			
 
				+                    }
			
 
				+                    format = formatCode.replace(/&quot;/g, '').replace(/;@/g, '').replace(/\[\$\-.+\]/g, '').replace(/AM\/PM/gi, 'tt').replace(/\\[\-\s,]/g, function (str) {
			
 
				+                        return str.substring(1);
			
 
				+                    }).replace(/m+:?|:?m+/g, function (str) {
			
 
				+                        if (str.indexOf(':') > -1) {
			
 
				+                            return str;
			
 
				+                        } else {
			
 
				+                            return str.toUpperCase();
			
 
				+                        }
			
 
				+                    });
			
 
				+                } else if (wijmo.isNumber(item.value)) {
			
 
				+                    if (!formatCode || formatCode === 'General') {
			
 
				+                        return item.value === Math.round(item.value) ? 'd' : 'f2';
			
 
				+                    }
			
 
				+                    lastDotIndex = formatCode.lastIndexOf('.');
			
 
				+                    if (formatCode.indexOf(currencySymbol) > -1 || formatCode.indexOf('$') > -1) {
			
 
				+                        format = 'c';
			
 
				+                    } else if (formatCode[formatCode.length - 1] === '%') {
			
 
				+                        format = 'p';
			
 
				+                    } else {
			
 
				+                        format = 'n';
			
 
				+                    }
			
 
				+
			
 
				+                    if (lastDotIndex > -1) {
			
 
				+                        format += formatCode.substring(lastDotIndex, formatCode.lastIndexOf('0')).length;
			
 
				+                    } else {
			
 
				+                        format += '0';
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    format = formatCode;
			
 
				+                }
			
 
				+
			
 
				+                return format;
			
 
				+            };
			
 
				+
			
 
				+            // Parse the css font family to excel font family.
			
 
				+            ExcelConverter._parseExcelFontFamily = function (fontFamily) {
			
 
				+                var firstQuotesIndex, lastQuotesIndex;
			
 
				+
			
 
				+                if (fontFamily) {
			
 
				+                    firstQuotesIndex = fontFamily.indexOf('"');
			
 
				+                    lastQuotesIndex = fontFamily.lastIndexOf('"');
			
 
				+
			
 
				+                    if (firstQuotesIndex > -1 && firstQuotesIndex !== lastQuotesIndex) {
			
 
				+                        fontFamily = fontFamily.substring(firstQuotesIndex + 1, lastQuotesIndex);
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    fontFamily = 'Arial';
			
 
				+                }
			
 
				+                return fontFamily;
			
 
				+            };
			
 
				+
			
 
				+            // Parse the excel color to css color.
			
 
				+            ExcelConverter._parseExcelColor = function (color, excelThemes) {
			
 
				+                var parsedColor = '';
			
 
				+
			
 
				+                if (!color) {
			
 
				+                    return parsedColor;
			
 
				+                }
			
 
				+
			
 
				+                if (typeof color === "string") {
			
 
				+                    return color;
			
 
				+                }
			
 
				+
			
 
				+                switch (color.colorType) {
			
 
				+                    case 'rgbColor':
			
 
				+                        parsedColor = '#' + color.value.substring(2);
			
 
				+                        break;
			
 
				+                    case 'indexedColor':
			
 
				+                        parsedColor = '#' + this._indexedColors[color.value];
			
 
				+                        break;
			
 
				+                    case 'themeColor':
			
 
				+                        parsedColor = this._getColorFromExcelTheme(excelThemes[color.theme], color.value);
			
 
				+                        break;
			
 
				+                }
			
 
				+
			
 
				+                return parsedColor;
			
 
				+            };
			
 
				+
			
 
				+            // Get the color by the excel theme color and value.
			
 
				+            ExcelConverter._getColorFromExcelTheme = function (themeColor, value) {
			
 
				+                var numberVal, color, hslArray;
			
 
				+
			
 
				+                if (value) {
			
 
				+                    numberVal = +value;
			
 
				+                    color = new wijmo.Color('#' + themeColor), hslArray = color.getHsl();
			
 
				+
			
 
				+                    // About the tint value and theme color convert to rgb color,
			
 
				+                    // please refer https://msdn.microsoft.com/en-us/library/documentformat.openxml.spreadsheet.tabcolor.aspx
			
 
				+                    if (numberVal < 0) {
			
 
				+                        hslArray[2] = hslArray[2] * (1.0 + numberVal);
			
 
				+                    } else {
			
 
				+                        hslArray[2] = hslArray[2] * (1.0 - numberVal) + (1 - 1 * (1.0 - numberVal));
			
 
				+                    }
			
 
				+
			
 
				+                    color = wijmo.Color.fromHsl(hslArray[0], hslArray[1], hslArray[2]);
			
 
				+                    return color.toString();
			
 
				+                }
			
 
				+
			
 
				+                // if the color value is undefined, we should return the themeColor (TFS 121712)
			
 
				+                return '#' + themeColor;
			
 
				+            };
			
 
				+
			
 
				+            // Parse the formula to excel formula.
			
 
				+            ExcelConverter._parseExcelFormula = function (formula) {
			
 
				+                var func = formula.substring(1, formula.indexOf('(')).toLowerCase(), format;
			
 
				+
			
 
				+                switch (func) {
			
 
				+                    case 'ceiling':
			
 
				+                    case 'floor':
			
 
				+                        formula = formula.substring(0, formula.lastIndexOf(')')) + ', 1)';
			
 
				+                        break;
			
 
				+                    case 'round':
			
 
				+                        formula = formula.substring(0, formula.lastIndexOf(')')) + ', 0)';
			
 
				+                        break;
			
 
				+                    case 'text':
			
 
				+                        format = formula.substring(formula.lastIndexOf(','), formula.lastIndexOf('\"'));
			
 
				+                        format = this._parseCellFormat(format.substring(format.lastIndexOf('\"') + 1));
			
 
				+                        formula = formula.substring(0, formula.lastIndexOf(',') + 1) + '\"' + format + '\")';
			
 
				+                        break;
			
 
				+                }
			
 
				+                return formula;
			
 
				+            };
			
 
				+
			
 
				+            // Parse the excel formula to flexsheet formula.
			
 
				+            ExcelConverter._parseFlexSheetFormula = function (excelFormula) {
			
 
				+                var func = excelFormula.substring(1, excelFormula.indexOf('(')).toLowerCase(), value, format, lowerCaseFormat;
			
 
				+
			
 
				+                switch (func) {
			
 
				+                    case 'ceiling':
			
 
				+                    case 'floor':
			
 
				+                    case 'round':
			
 
				+                        excelFormula = excelFormula.substring(0, excelFormula.lastIndexOf(',')) + ')';
			
 
				+                        break;
			
 
				+                    case 'text':
			
 
				+                        format = excelFormula.substring(excelFormula.indexOf('\"'), excelFormula.lastIndexOf('\"'));
			
 
				+
			
 
				+                        // Fix TFS issue 122648
			
 
				+                        format = format.substring(format.lastIndexOf('\"') + 1);
			
 
				+                        lowerCaseFormat = format.toLowerCase();
			
 
				+                        if (lowerCaseFormat.indexOf('0') > -1) {
			
 
				+                            // For processing number format
			
 
				+                            value = 0;
			
 
				+                        } else if (lowerCaseFormat.indexOf('m') > -1) {
			
 
				+                            // For processing date format
			
 
				+                            value = new Date();
			
 
				+                        } else {
			
 
				+                            // For processing string format
			
 
				+                            value = '';
			
 
				+                        }
			
 
				+                        format = this._parseExcelFormat({
			
 
				+                            value: value,
			
 
				+                            style: {
			
 
				+                                formatCode: format
			
 
				+                            }
			
 
				+                        });
			
 
				+                        format = format.replace(/Y+/g, function (str) {
			
 
				+                            return str.toLowerCase();
			
 
				+                        });
			
 
				+                        excelFormula = excelFormula.substring(0, excelFormula.indexOf('\"') + 1) + format + '\")';
			
 
				+                        break;
			
 
				+                }
			
 
				+                return excelFormula;
			
 
				+            };
			
 
				+
			
 
				+            // Gets the column setting, include width, visible, format and alignment
			
 
				+            ExcelConverter._getColumnSetting = function (column, defaultWidth) {
			
 
				+                var width = column.size;
			
 
				+
			
 
				+                width = width ? width / 6 : defaultWidth / 6;
			
 
				+
			
 
				+                return {
			
 
				+                    autoWidth: true,
			
 
				+                    width: width,
			
 
				+                    visible: column.visible,
			
 
				+                    style: {
			
 
				+                        format: column.format ? this._parseCellFormat(column.format) : '',
			
 
				+                        hAlign: this._toExcelHAlign(column.getAlignment())
			
 
				+                    }
			
 
				+                };
			
 
				+            };
			
 
				+
			
 
				+            // Parse the CSS alignment to excel hAlign.
			
 
				+            ExcelConverter._toExcelHAlign = function (value) {
			
 
				+                value = value ? value.trim().toLowerCase() : value;
			
 
				+                if (!value)
			
 
				+                    return value;
			
 
				+
			
 
				+                if (value.indexOf('center') > -1) {
			
 
				+                    return 'center';
			
 
				+                }
			
 
				+
			
 
				+                if (value.indexOf('right') > -1 || value.indexOf('end') > -1) {
			
 
				+                    return 'right';
			
 
				+                }
			
 
				+
			
 
				+                if (value.indexOf('justify') > -1) {
			
 
				+                    return 'justify';
			
 
				+                }
			
 
				+
			
 
				+                return 'left';
			
 
				+            };
			
 
				+
			
 
				+            // gets column count for specific row
			
 
				+            ExcelConverter._getColumnCount = function (sheetData) {
			
 
				+                var columnCount = 0, data;
			
 
				+
			
 
				+                for (var i = 0; i < sheetData.length; i++) {
			
 
				+                    data = sheetData[i] ? sheetData[i].cells : [];
			
 
				+                    if (data && data.length > columnCount) {
			
 
				+                        columnCount = data.length;
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                return columnCount;
			
 
				+            };
			
 
				+
			
 
				+            // convert the column index to alphabet
			
 
				+            ExcelConverter._numAlpha = function (i) {
			
 
				+                var t = Math.floor(i / 26) - 1;
			
 
				+                return (t > -1 ? this._numAlpha(t) : '') + this._alphabet.charAt(i % 26);
			
 
				+            };
			
 
				+
			
 
				+            // Get DataType for value of the specific excel item
			
 
				+            ExcelConverter._getItemType = function (item) {
			
 
				+                if (item === undefined || item === null || item.value === undefined || item.value === null || isNaN(item.value)) {
			
 
				+                    return undefined;
			
 
				+                }
			
 
				+
			
 
				+                return wijmo.getType(item.value);
			
 
				+            };
			
 
				+
			
 
				+            // Set column definition for the Flex Grid
			
 
				+            ExcelConverter._setColumn = function (columns, columnIndex, item) {
			
 
				+                var dataType, format;
			
 
				+                if (!columns[columnIndex]) {
			
 
				+                    columns.push({
			
 
				+                        dataType: this._getItemType(item),
			
 
				+                        format: this._parseExcelFormat(item)
			
 
				+                    });
			
 
				+                } else {
			
 
				+                    dataType = this._getItemType(item);
			
 
				+                    if (columns[columnIndex].dataType === undefined || (dataType !== undefined && dataType !== 1 /* String */ && columns[columnIndex].dataType === 1 /* String */)) {
			
 
				+                        columns[columnIndex].dataType = dataType;
			
 
				+                    }
			
 
				+
			
 
				+                    format = this._parseExcelFormat(item);
			
 
				+                    if (format && format !== 'General') {
			
 
				+                        columns[columnIndex].format = format;
			
 
				+                    }
			
 
				+                }
			
 
				+            };
			
 
				+
			
 
				+            // Get value from the excel cell item
			
 
				+            ExcelConverter._getItemValue = function (item) {
			
 
				+                if (item === undefined || item === null || item.value === undefined || item.value === null) {
			
 
				+                    return undefined;
			
 
				+                }
			
 
				+
			
 
				+                var val = item.value;
			
 
				+
			
 
				+                if (wijmo.isNumber(val) && isNaN(val)) {
			
 
				+                    return '';
			
 
				+                } else if (val instanceof Date && isNaN(val.getTime())) {
			
 
				+                    return '';
			
 
				+                } else {
			
 
				+                    return val;
			
 
				+                }
			
 
				+            };
			
 
				+
			
 
				+            // Get style of cell.
			
 
				+            ExcelConverter._getCellStyle = function (flex, fakeCell, r, c, panel) {
			
 
				+                if (typeof panel === "undefined") { panel = "cells"; }
			
 
				+                // create element to get styles
			
 
				+                var theStyle;
			
 
				+
			
 
				+                try  {
			
 
				+                    // get styles for any panel, row, column
			
 
				+                    flex.cellFactory.updateCell(flex[panel], r, c, fakeCell);
			
 
				+                } catch (ex) {
			
 
				+                    return undefined;
			
 
				+                }
			
 
				+
			
 
				+                theStyle = window.getComputedStyle(fakeCell);
			
 
				+                return theStyle;
			
 
				+            };
			
 
				+
			
 
				+            // extends the source hash to destination hash
			
 
				+            ExcelConverter._extend = function (dst, src) {
			
 
				+                for (var key in src) {
			
 
				+                    var value = src[key];
			
 
				+                    if (wijmo.isObject(value) && dst[key]) {
			
 
				+                        wijmo.copy(dst[key], value); // copy sub-objects
			
 
				+                    } else {
			
 
				+                        dst[key] = value; // assign values
			
 
				+                    }
			
 
				+                }
			
 
				+                return dst;
			
 
				+            };
			
 
				+
			
 
				+            // taken from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22
			
 
				+            ExcelConverter._b64ToUint6 = function (nChr) {
			
 
				+                return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 ? nChr - 71 : nChr > 47 && nChr < 58 ? nChr + 4 : nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
			
 
				+            };
			
 
				+
			
 
				+            // decode the base64 string to int array
			
 
				+            ExcelConverter._base64DecToArr = function (sBase64, nBlocksSize) {
			
 
				+                var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
			
 
				+
			
 
				+                for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
			
 
				+                    nMod4 = nInIdx & 3;
			
 
				+                    nUint24 |= this._b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
			
 
				+                    if (nMod4 === 3 || nInLen - nInIdx === 1) {
			
 
				+                        for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
			
 
				+                            taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
			
 
				+                        }
			
 
				+                        nUint24 = 0;
			
 
				+                    }
			
 
				+                }
			
 
				+                return taBytes;
			
 
				+            };
			
 
				+
			
 
				+            // taken from https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
			
 
				+            /* Base64 string to array encoding */
			
 
				+            ExcelConverter._uint6ToB64 = function (nUint6) {
			
 
				+                return nUint6 < 26 ? nUint6 + 65 : nUint6 < 52 ? nUint6 + 71 : nUint6 < 62 ? nUint6 - 4 : nUint6 === 62 ? 43 : nUint6 === 63 ? 47 : 65;
			
 
				+            };
			
 
				+
			
 
				+            ExcelConverter._base64EncArr = function (aBytes) {
			
 
				+                var nMod3 = 2, sB64Enc = "";
			
 
				+
			
 
				+                for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
			
 
				+                    nMod3 = nIdx % 3;
			
 
				+                    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) {
			
 
				+                        sB64Enc += "\r\n";
			
 
				+                    }
			
 
				+                    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
			
 
				+                    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
			
 
				+                        sB64Enc += String.fromCharCode(this._uint6ToB64(nUint24 >>> 18 & 63), this._uint6ToB64(nUint24 >>> 12 & 63), this._uint6ToB64(nUint24 >>> 6 & 63), this._uint6ToB64(nUint24 & 63));
			
 
				+                        nUint24 = 0;
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+                return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
			
 
				+            };
			
 
				+            ExcelConverter._formatMap = {
			
 
				+                n: '#,##0.00',
			
 
				+                c: '{0}#,##0.00_);({0}#,##0.00)',
			
 
				+                p: '0.00%'
			
 
				+            };
			
 
				+            ExcelConverter._alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
			
 
				+
			
 
				+            ExcelConverter._indexedColors = [
			
 
				+                '000000', 'FFFFFF', 'FF0000', '00FF00', '0000FF', 'FFFF00', 'FF00FF', '00FFFF',
			
 
				+                '000000', 'FFFFFF', 'FF0000', '00FF00', '0000FF', 'FFFF00', 'FF00FF', '00FFFF',
			
 
				+                '800000', '008000', '000080', '808000', '800080', '008080', 'C0C0C0', '808080',
			
 
				+                '9999FF', '993366', 'FFFFCC', 'CCFFFF', '660066', 'FF8080', '0066CC', 'CCCCFF',
			
 
				+                '000080', 'FF00FF', 'FFFF00', '00FFFF', '800080', '800000', '008080', '0000FF',
			
 
				+                '00CCFF', 'CCFFFF', 'CCFFCC', 'FFFF99', '99CCFF', 'FF99CC', 'CC99FF', 'FFCC99',
			
 
				+                '3366FF', '33CCCC', '99CC00', 'FFCC00', 'FF9900', 'FF6600', '666699', '969696',
			
 
				+                '003366', '339966', '003300', '333300', '993300', '993366', '333399', '333333',
			
 
				+                '000000', 'FFFFFF'];
			
 
				+            return ExcelConverter;
			
 
				+        })();
			
 
				+        _grid.ExcelConverter = ExcelConverter;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+//# sourceMappingURL=ExcelConverter.js.map
			
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -0,0 +1,98 @@
 
				+var appData = {
			
 
				+
			
 
				+	getCountries: function () {
			
 
				+		return ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
			
 
				+	},
			
 
				+
			
 
				+	getProducts: function () {
			
 
				+		return ['Widget', 'Gadget', 'Doohickey'];
			
 
				+	},
			
 
				+
			
 
				+	getData: function (count) {
			
 
				+		var data = new wijmo.collections.ObservableArray(),
			
 
				+			i = 0,
			
 
				+			countryId,
			
 
				+			productId;
			
 
				+
			
 
				+		for (var i = 0; i < count; i++) {
			
 
				+			countryId = Math.floor(Math.random() * this.getCountries().length);
			
 
				+			productId = Math.floor(Math.random() * this.getProducts().length);
			
 
				+			data.push({
			
 
				+				id: i,
			
 
				+				countryId: countryId,
			
 
				+				productId: productId,
			
 
				+				date: new Date(2014, i % 12, i % 28),
			
 
				+				amount: Math.random() * 10000,
			
 
				+				active: i % 4 === 0
			
 
				+			});
			
 
				+		}
			
 
				+		return data;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+$(function () {
			
 
				+	var flex = new wijmo.grid.sheet.FlexSheet('#flexsheet');
			
 
				+
			
 
				+	flex.addBoundSheet('Country', appData.getData(50));
			
 
				+	flex.addUnboundSheet('Empty Sheet');
			
 
				+
			
 
				+	flex.selectedSheetIndex = 0;
			
 
				+	initDataMapForBindingSheet(flex);
			
 
				+
			
 
				+	// import
			
 
				+	$('#import').bind('click', function () {
			
 
				+		var grids = [],
			
 
				+		reader;
			
 
				+
			
 
				+		if (flex) {
			
 
				+			reader = new FileReader();
			
 
				+			reader.onload = function (e) {
			
 
				+				flex.load(reader.result);
			
 
				+			};
			
 
				+			if ($('#importFile')[0].files[0]) {
			
 
				+				reader.readAsArrayBuffer($('#importFile')[0].files[0]);
			
 
				+			}
			
 
				+		}
			
 
				+	});
			
 
				+
			
 
				+	// export 
			
 
				+	$('#export').bind('click', function () {
			
 
				+		var result;
			
 
				+
			
 
				+		result = flex.save();
			
 
				+
			
 
				+		if (navigator.msSaveBlob) {
			
 
				+			// Saving the xlsx file using Blob and msSaveBlob in IE.
			
 
				+			var blob = new Blob([result.base64Array]);
			
 
				+
			
 
				+			navigator.msSaveBlob(blob, $('#export').attr("download"));
			
 
				+		} else {
			
 
				+			$('#export')[0].href = result.href();
			
 
				+		}
			
 
				+	});
			
 
				+});
			
 
				+
			
 
				+// initialize the dataMap for the bound sheet.
			
 
				+function initDataMapForBindingSheet(flexSheet) {
			
 
				+	var column;
			
 
				+
			
 
				+	if (flexSheet) {
			
 
				+		column = flexSheet.columns.getColumn('countryId');
			
 
				+		if (column && !column.dataMap) {
			
 
				+			column.dataMap = buildDataMap(appData.getCountries());
			
 
				+		}
			
 
				+		column = flexSheet.columns.getColumn('productId');
			
 
				+		if (column && !column.dataMap) {
			
 
				+			column.dataMap = buildDataMap(appData.getProducts());
			
 
				+		}
			
 
				+	}
			
 
				+};
			
 
				+
			
 
				+// build a data map from a string array using the indices as keys
			
 
				+function buildDataMap(items) {
			
 
				+	var map = [];
			
 
				+	for (var i = 0; i < items.length; i++) {
			
 
				+		map.push({ key: i, value: items[i] });
			
 
				+	}
			
 
				+	return new wijmo.grid.DataMap(map, 'key', 'value');
			
 
				+};
			
--- a/src/scripts/c1xlsx.js
+++ b/src/scripts/c1xlsx.js
--- a/src/scripts/treeDataHelper.js
+++ b/src/scripts/treeDataHelper.js
@@ -0,0 +1,81 @@
 
				+/**
			
 
				+ * Created by Tony on 2017/1/23.
			
 
				+ */
			
 
				+var tree_Data_Helper = {
			
 
				+    sortDataBySerial: function (data) {
			
 
				+        data.sort(function(item1, item2) {
			
 
				+            var rst = 0;
			
 
				+            if (item1["SerialNo"] > item2["SerialNo"]) {
			
 
				+                rst = 1;
			
 
				+            } else if (item1["SerialNo"] < item2["SerialNo"]) {
			
 
				+                rst = -1;
			
 
				+            }
			
 
				+            return rst;
			
 
				+        });
			
 
				+    },
			
 
				+
			
 
				+    buildTreeData: function (data) {
			
 
				+        var rst = [], idArr = [], me = this;
			
 
				+        var distIdx = -1, distinctIdx = 0;
			
 
				+        for (var i = 0; i < data.length; i++) {
			
 
				+            idArr.push(i);
			
 
				+        }
			
 
				+        me.distinctByCustId(data, idArr, "ParentID", distIdx);
			
 
				+        distinctIdx = me.getDistinctId(data, idArr, distIdx);
			
 
				+        for (var i = 0; i < distinctIdx; i++) {
			
 
				+            rst[i] = data[idArr[i]];
			
 
				+        }
			
 
				+        for (var i = 0; i < rst.length; i++) {
			
 
				+            idArr = idArr.slice(distinctIdx);
			
 
				+            me.buildBranchData(rst[i], data, idArr);
			
 
				+        }
			
 
				+        return rst;
			
 
				+    },
			
 
				+
			
 
				+    getDistinctId: function (data, idArr, compareVal) {
			
 
				+        var rst = 0, me = this;
			
 
				+        for (var i = 0; i < idArr.length; i++) {
			
 
				+            if (data[idArr[i]]["ParentID"] != compareVal) {
			
 
				+                rst = i;
			
 
				+                break;
			
 
				+            }
			
 
				+        }
			
 
				+        return rst;
			
 
				+    },
			
 
				+
			
 
				+    buildBranchData: function (parentItem, orgData, idArr) {
			
 
				+        var distinctIdx = 0, distVal = parentItem["ID"], me = this;
			
 
				+        me.distinctByCustId(orgData, idArr, "ParentID", distVal);
			
 
				+        distinctIdx = me.getDistinctId(orgData, idArr, distVal);
			
 
				+        parentItem["items"] = [];
			
 
				+        for (var i = 0; i < distinctIdx; i++) {
			
 
				+            parentItem["items"][i] = orgData[idArr[i]];
			
 
				+        }
			
 
				+        for (var i = 0; i < parentItem["items"].length; i++) {
			
 
				+            idArr = idArr.slice(distinctIdx);
			
 
				+            me.buildBranchData(parentItem["items"][i], orgData, idArr);
			
 
				+            distinctIdx = me.getDistinctId(orgData, idArr, parentItem["items"][i]["ID"]);
			
 
				+        }
			
 
				+    },
			
 
				+
			
 
				+    distinctByCustId: function (data, idArray, IdStr, IdVal) {
			
 
				+        idArray.sort(function(idx1, idx2) {
			
 
				+            var rst = 0;
			
 
				+            if (data[idx1][IdStr] == IdVal) {
			
 
				+                if (data[idx2][IdStr] == data[idx1][IdStr]) {
			
 
				+                    if (data[idx1]["SerialNo"] > data[idx2]["SerialNo"]) {
			
 
				+                        rst = 1;
			
 
				+                    } else {
			
 
				+                        rst = -1;
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    rst = -1;
			
 
				+                }
			
 
				+            } else if (data[idx2][IdStr] == IdVal) {
			
 
				+                rst = 1;
			
 
				+            }
			
 
				+            return rst;
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.detail.min.js
+++ b/src/scripts/wijmo/wijmo.grid.detail.min.js
--- a/src/scripts/wijmo/wijmo.grid.filter.min.js
+++ b/src/scripts/wijmo/wijmo.grid.filter.min.js
--- a/src/scripts/wijmo/wijmo.grid.min.js
+++ b/src/scripts/wijmo/wijmo.grid.min.js
--- a/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.js
@@ -0,0 +1,101 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the ContextMenu for the FlexSheet control.
			
 
				+            */
			
 
				+            var ContextMenu = (function (_super) {
			
 
				+                __extends(ContextMenu, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a ContextMenu.
			
 
				+                *
			
 
				+                * @param element The DOM element that will host the control, or a jQuery selector (e.g. '#theCtrl').
			
 
				+                * @param flex FlexSheet control what the ContextMenu works with.
			
 
				+                */
			
 
				+                function ContextMenu(element, owner) {
			
 
				+                    _super.call(this, element);
			
 
				+
			
 
				+                    this._owner = owner;
			
 
				+
			
 
				+                    this.applyTemplate('', this.getTemplate(), {
			
 
				+                        _insRows: 'insertRows',
			
 
				+                        _delRows: 'deleteRows',
			
 
				+                        _insCols: 'insertColumns',
			
 
				+                        _delCols: 'deleteColumns'
			
 
				+                    });
			
 
				+
			
 
				+                    this._init();
			
 
				+                }
			
 
				+                /**
			
 
				+                * Show the context menu.
			
 
				+                *
			
 
				+                * @param e The mouse event.
			
 
				+                * @param point The point indicates the position for the context menu.
			
 
				+                */
			
 
				+                ContextMenu.prototype.show = function (e, point) {
			
 
				+                    var posX = (point ? point.x : e.clientX) + window.pageXOffset, posY = (point ? point.y : e.clientY) + window.pageYOffset;
			
 
				+                    this.hostElement.style.position = 'absolute';
			
 
				+                    this.hostElement.style.display = 'inline';
			
 
				+                    if (posY + this.hostElement.clientHeight > window.innerHeight) {
			
 
				+                        posY -= this.hostElement.clientHeight;
			
 
				+                    }
			
 
				+                    if (posX + this.hostElement.clientWidth > window.innerWidth) {
			
 
				+                        posX -= this.hostElement.clientWidth;
			
 
				+                    }
			
 
				+                    this.hostElement.style.top = posY + 'px';
			
 
				+                    this.hostElement.style.left = posX + 'px';
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Hide the context menu.
			
 
				+                */
			
 
				+                ContextMenu.prototype.hide = function () {
			
 
				+                    this.hostElement.style.display = 'none';
			
 
				+                };
			
 
				+
			
 
				+                // Initialize the context menu.
			
 
				+                ContextMenu.prototype._init = function () {
			
 
				+                    var self = this;
			
 
				+
			
 
				+                    document.querySelector('body').appendChild(self.hostElement);
			
 
				+
			
 
				+                    self.hostElement.addEventListener('contextmenu', function (e) {
			
 
				+                        e.preventDefault();
			
 
				+                    });
			
 
				+
			
 
				+                    self._insRows.addEventListener('click', function (e) {
			
 
				+                        self._owner.insertRows();
			
 
				+                        self.hide();
			
 
				+                    });
			
 
				+                    self._delRows.addEventListener('click', function (e) {
			
 
				+                        self._owner.deleteRows();
			
 
				+                        self.hide();
			
 
				+                    });
			
 
				+                    self._insCols.addEventListener('click', function (e) {
			
 
				+                        self._owner.insertColumns();
			
 
				+                        self.hide();
			
 
				+                    });
			
 
				+                    self._delCols.addEventListener('click', function (e) {
			
 
				+                        self._owner.deleteColumns();
			
 
				+                        self.hide();
			
 
				+                    });
			
 
				+                };
			
 
				+                ContextMenu.controlTemplate = '<div class="contextMenu" width="150px">' + '<div class="contextMenuItem" wj-part="insertRows">Insert Row</div>' + '<div class="contextMenuItem" wj-part="deleteRows">Delete Rows</div>' + '<div class="contextMenuItem" wj-part="insertColumns">Insert Column</div>' + '<div class="contextMenuItem" wj-part="deleteColumns">Delete Columns</div>' + '</div>';
			
 
				+                return ContextMenu;
			
 
				+            })(wijmo.Control);
			
 
				+            sheet.ContextMenu = ContextMenu;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=ContextMenu.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.ts
@@ -0,0 +1,98 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the ContextMenu for the FlexSheet control.
			
 
				+	 */
			
 
				+	export class ContextMenu extends wijmo.Control {
			
 
				+		private _owner: FlexSheet;
			
 
				+		private _insRows: HTMLElement;
			
 
				+		private _delRows: HTMLElement;
			
 
				+		private _insCols: HTMLElement;
			
 
				+		private _delCols: HTMLElement;
			
 
				+
			
 
				+		static controlTemplate = '<div class="contextMenu" width="150px">' +
			
 
				+		'<div class="contextMenuItem" wj-part="insertRows">Insert Row</div>' +
			
 
				+		'<div class="contextMenuItem" wj-part="deleteRows">Delete Rows</div>' +
			
 
				+		'<div class="contextMenuItem" wj-part="insertColumns">Insert Column</div>' +
			
 
				+		'<div class="contextMenuItem" wj-part="deleteColumns">Delete Columns</div>' +
			
 
				+		'</div>';
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a ContextMenu.
			
 
				+		 *
			
 
				+		 * @param element The DOM element that will host the control, or a jQuery selector (e.g. '#theCtrl').
			
 
				+		 * @param flex FlexSheet control what the ContextMenu works with.
			
 
				+		 */
			
 
				+		constructor(element: any, owner: FlexSheet) {
			
 
				+			super(element);
			
 
				+
			
 
				+			this._owner = owner;
			
 
				+
			
 
				+			this.applyTemplate('', this.getTemplate(), {
			
 
				+				_insRows: 'insertRows',
			
 
				+				_delRows: 'deleteRows',
			
 
				+				_insCols: 'insertColumns',
			
 
				+				_delCols: 'deleteColumns',
			
 
				+			});
			
 
				+
			
 
				+			this._init();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Show the context menu.
			
 
				+		 *
			
 
				+		 * @param e The mouse event.
			
 
				+		 * @param point The point indicates the position for the context menu.
			
 
				+		 */
			
 
				+		show(e: MouseEvent, point?: wijmo.Point) {
			
 
				+			var posX = (point ? point.x : e.clientX) + window.pageXOffset, //Left Position of Mouse Pointer
			
 
				+				posY = (point ? point.y : e.clientY) + window.pageYOffset; //Top Position of Mouse Pointer
			
 
				+			this.hostElement.style.position = 'absolute';
			
 
				+			this.hostElement.style.display = 'inline';
			
 
				+			if (posY + this.hostElement.clientHeight > window.innerHeight) {
			
 
				+				posY -= this.hostElement.clientHeight;
			
 
				+			}
			
 
				+			if (posX + this.hostElement.clientWidth > window.innerWidth) {
			
 
				+				posX -= this.hostElement.clientWidth;
			
 
				+			}
			
 
				+			this.hostElement.style.top = posY + 'px';
			
 
				+			this.hostElement.style.left = posX + 'px';
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Hide the context menu.
			
 
				+		 */
			
 
				+		hide() {
			
 
				+			this.hostElement.style.display = 'none';
			
 
				+		}
			
 
				+
			
 
				+		// Initialize the context menu.
			
 
				+		private _init() {
			
 
				+			var self = this;
			
 
				+
			
 
				+			document.querySelector('body').appendChild(self.hostElement);
			
 
				+
			
 
				+			self.hostElement.addEventListener('contextmenu', (e: MouseEvent) => {
			
 
				+				e.preventDefault();
			
 
				+			});
			
 
				+
			
 
				+			self._insRows.addEventListener('click', (e: MouseEvent) => {
			
 
				+				self._owner.insertRows();
			
 
				+				self.hide();
			
 
				+			});
			
 
				+			self._delRows.addEventListener('click', (e: MouseEvent) => {
			
 
				+				self._owner.deleteRows();
			
 
				+				self.hide();
			
 
				+			});
			
 
				+			self._insCols.addEventListener('click', (e: MouseEvent) => {
			
 
				+				self._owner.insertColumns();
			
 
				+				self.hide();
			
 
				+			});
			
 
				+			self._delCols.addEventListener('click', (e: MouseEvent) => {
			
 
				+				self._owner.deleteColumns();
			
 
				+				self.hide();
			
 
				+			});
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.js
@@ -0,0 +1,115 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the ExcelCellFactory class.
			
 
				+            *
			
 
				+            * This class extends the CellFactory of FlexGrid control.
			
 
				+            * It updates the content of the row/column header for the FlexSheet control.
			
 
				+            */
			
 
				+            var ExcelCellFactory = (function (_super) {
			
 
				+                __extends(ExcelCellFactory, _super);
			
 
				+                function ExcelCellFactory() {
			
 
				+                    _super.apply(this, arguments);
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the updateCell function of the CellFactory class.
			
 
				+                *
			
 
				+                * @param panel Part of the grid that owns this cell.
			
 
				+                * @param r Index of this cell's row.
			
 
				+                * @param c Index of this cell's column.
			
 
				+                * @param cell Element that represents the cell.
			
 
				+                * @param rng @see:CellRange that contains the cell's merged range, or null if the cell is not merged.
			
 
				+                */
			
 
				+                ExcelCellFactory.prototype.updateCell = function (panel, r, c, cell, rng) {
			
 
				+                    var content, cellIndex, flex, cellData;
			
 
				+
			
 
				+                    // We shall reset the styles of current cell before updating current cell.
			
 
				+                    if (panel.cellType === 1 /* Cell */) {
			
 
				+                        this._resetCellStyle(panel.columns[c], cell);
			
 
				+                    }
			
 
				+
			
 
				+                    _super.prototype.updateCell.call(this, panel, r, c, cell, rng);
			
 
				+
			
 
				+                    switch (panel.cellType) {
			
 
				+                        case 3 /* RowHeader */:
			
 
				+                            cell.textContent = (r + 1) + '';
			
 
				+                            break;
			
 
				+                        case 2 /* ColumnHeader */:
			
 
				+                            if (r !== 0) {
			
 
				+                                return;
			
 
				+                            }
			
 
				+
			
 
				+                            content = sheet.FlexSheet.convertNumberToAlpha(c);
			
 
				+                            cell.innerHTML = cell.innerHTML.replace(cell.textContent, '') + content;
			
 
				+                            cell.style.textAlign = 'center';
			
 
				+                            break;
			
 
				+                        case 1 /* Cell */:
			
 
				+                            //process the header row with binding
			
 
				+                            if (panel.rows[r] instanceof sheet.HeaderRow) {
			
 
				+                                cell.innerHTML = wijmo.escapeHtml(panel.columns[c].header);
			
 
				+                                wijmo.addClass(cell, 'header-row');
			
 
				+                            } else {
			
 
				+                                flex = panel.grid;
			
 
				+                                cellData = flex.getCellData(r, c, false);
			
 
				+
			
 
				+                                if (!(flex.editRange && flex.editRange.contains(r, c)) && wijmo.isString(cellData) && cellData[0] === '=') {
			
 
				+                                    if (panel.columns[c].dataType === 3 /* Boolean */) {
			
 
				+                                        cell.querySelector('[type="checkbox"]').checked = flex.evaluate(cellData);
			
 
				+                                    } else {
			
 
				+                                        cell.innerHTML = wijmo.escapeHtml(flex.evaluate(cellData, true, flex.columns[c].format));
			
 
				+                                    }
			
 
				+                                }
			
 
				+
			
 
				+                                cellIndex = r * flex.columns.length + c;
			
 
				+
			
 
				+                                var styleInfo;
			
 
				+                                if (flex.styledCells && (styleInfo = flex.styledCells[cellIndex])) {
			
 
				+                                    var st = cell.style, styleInfoVal;
			
 
				+                                    for (var styleProp in styleInfo) {
			
 
				+                                        if (styleProp == 'className') {
			
 
				+                                            if (styleInfo.className) {
			
 
				+                                                wijmo.addClass(cell, styleInfo.className + '-style');
			
 
				+                                            }
			
 
				+                                        } else if (styleInfoVal = styleInfo[styleProp]) {
			
 
				+                                            if ((wijmo.hasClass(cell, 'wj-state-selected') || wijmo.hasClass(cell, 'wj-state-multi-selected')) && (styleProp === 'color' || styleProp === 'backgroundColor')) {
			
 
				+                                                st[styleProp] = '';
			
 
				+                                            } else {
			
 
				+                                                st[styleProp] = styleInfoVal;
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            }
			
 
				+                            break;
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                // Reset the styles of the cell.
			
 
				+                ExcelCellFactory.prototype._resetCellStyle = function (column, cell) {
			
 
				+                    ['fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'textDecoration', 'textAlign', 'verticalAlign', 'backgroundColor', 'color'].forEach(function (val) {
			
 
				+                        if (val === 'textAlign') {
			
 
				+                            cell.style.textAlign = column.getAlignment();
			
 
				+                        } else {
			
 
				+                            cell.style[val] = '';
			
 
				+                        }
			
 
				+                    });
			
 
				+                };
			
 
				+                return ExcelCellFactory;
			
 
				+            })(wijmo.grid.CellFactory);
			
 
				+            sheet.ExcelCellFactory = ExcelCellFactory;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=ExcelCellFactory.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.ts
@@ -0,0 +1,101 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the ExcelCellFactory class.
			
 
				+	 *
			
 
				+	 * This class extends the CellFactory of FlexGrid control.
			
 
				+	 * It updates the content of the row/column header for the FlexSheet control.
			
 
				+	 */
			
 
				+	export class ExcelCellFactory extends wijmo.grid.CellFactory {
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the updateCell function of the CellFactory class.  
			
 
				+		 *
			
 
				+		 * @param panel Part of the grid that owns this cell.
			
 
				+		 * @param r Index of this cell's row.
			
 
				+		 * @param c Index of this cell's column.
			
 
				+		 * @param cell Element that represents the cell.
			
 
				+		 * @param rng @see:CellRange that contains the cell's merged range, or null if the cell is not merged.
			
 
				+		 */
			
 
				+		public updateCell(panel: wijmo.grid.GridPanel, r: number, c: number, cell: HTMLElement, rng?: wijmo.grid.CellRange) {
			
 
				+			var content: string,
			
 
				+				cellIndex: number,
			
 
				+				flex: FlexSheet,
			
 
				+				cellData: any;
			
 
				+
			
 
				+			// We shall reset the styles of current cell before updating current cell.
			
 
				+			if (panel.cellType === wijmo.grid.CellType.Cell) {
			
 
				+				this._resetCellStyle(panel.columns[c], cell);
			
 
				+			}
			
 
				+
			
 
				+			super.updateCell(panel, r, c, cell, rng);
			
 
				+
			
 
				+			switch (panel.cellType) {
			
 
				+				case wijmo.grid.CellType.RowHeader:
			
 
				+					cell.textContent = (r + 1) + '';
			
 
				+					break;
			
 
				+				case wijmo.grid.CellType.ColumnHeader:
			
 
				+					if (r !== 0) {
			
 
				+						return;
			
 
				+					}
			
 
				+
			
 
				+					content = FlexSheet.convertNumberToAlpha(c);
			
 
				+					cell.innerHTML = cell.innerHTML.replace(cell.textContent, '') + content;
			
 
				+					cell.style.textAlign = 'center';
			
 
				+					break;
			
 
				+				case wijmo.grid.CellType.Cell:
			
 
				+					//process the header row with binding
			
 
				+					if (panel.rows[r] instanceof HeaderRow) {
			
 
				+						cell.innerHTML = wijmo.escapeHtml(panel.columns[c].header);
			
 
				+						addClass(cell, 'header-row');
			
 
				+					} else {
			
 
				+						flex = <FlexSheet>panel.grid;
			
 
				+						cellData = flex.getCellData(r, c, false);
			
 
				+
			
 
				+						if (!(flex.editRange && flex.editRange.contains(r, c)) && isString(cellData) && cellData[0] === '=') {
			
 
				+							if (panel.columns[c].dataType === DataType.Boolean) {
			
 
				+								(<HTMLInputElement>cell.querySelector('[type="checkbox"]')).checked = flex.evaluate(cellData);
			
 
				+							} else {
			
 
				+								cell.innerHTML = wijmo.escapeHtml(flex.evaluate(cellData, true, flex.columns[c].format));
			
 
				+							}
			
 
				+						}
			
 
				+
			
 
				+						cellIndex = r * flex.columns.length + c;
			
 
				+
			
 
				+						var styleInfo: ICellStyle;
			
 
				+						if (flex.styledCells && (styleInfo = flex.styledCells[cellIndex])) {
			
 
				+							var st = cell.style,
			
 
				+								styleInfoVal;
			
 
				+							for (var styleProp in styleInfo) {
			
 
				+								if (styleProp == 'className') {
			
 
				+									if (styleInfo.className) {
			
 
				+										addClass(cell, styleInfo.className + '-style');
			
 
				+									}
			
 
				+								} else if (styleInfoVal = styleInfo[styleProp]) {
			
 
				+									if ((hasClass(cell, 'wj-state-selected') || hasClass(cell, 'wj-state-multi-selected'))
			
 
				+										&& (styleProp === 'color' || styleProp === 'backgroundColor')) {
			
 
				+										st[styleProp] = '';
			
 
				+									} else {
			
 
				+										st[styleProp] = styleInfoVal;
			
 
				+									}
			
 
				+								}
			
 
				+							}
			
 
				+						}
			
 
				+					}
			
 
				+					break;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// Reset the styles of the cell.
			
 
				+		private _resetCellStyle(column: Column, cell: HTMLElement) {
			
 
				+			['fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'textDecoration', 'textAlign', 'verticalAlign', 'backgroundColor', 'color'].forEach((val) => {
			
 
				+				if (val === 'textAlign') {
			
 
				+					cell.style.textAlign = column.getAlignment();
			
 
				+				} else {
			
 
				+					cell.style[val] = '';
			
 
				+				}
			
 
				+			});
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.js
@@ -0,0 +1,66 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the HeaderRow class used to display header information for the bind sheet.
			
 
				+            */
			
 
				+            var HeaderRow = (function (_super) {
			
 
				+                __extends(HeaderRow, _super);
			
 
				+                function HeaderRow() {
			
 
				+                    _super.call(this);
			
 
				+                    this.isReadOnly = true;
			
 
				+                }
			
 
				+                return HeaderRow;
			
 
				+            })(wijmo.grid.Row);
			
 
				+            sheet.HeaderRow = HeaderRow;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the RowColDataCollection class used to store the row and column data for FlexSheet control.
			
 
				+            */
			
 
				+            var RowColDataCollection = (function (_super) {
			
 
				+                __extends(RowColDataCollection, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a RowColDataCollection class.
			
 
				+                *
			
 
				+                * @param defaultSize The default size for the collection.
			
 
				+                */
			
 
				+                function RowColDataCollection(defaultSize) {
			
 
				+                    _super.call(this);
			
 
				+                    this._szDef = 25;
			
 
				+                    if (wijmo.isNumber(defaultSize)) {
			
 
				+                        this._szDef = defaultSize;
			
 
				+                    }
			
 
				+                }
			
 
				+                Object.defineProperty(RowColDataCollection.prototype, "defaultSize", {
			
 
				+                    /**
			
 
				+                    * Gets or sets the default size of elements in this collection.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._szDef;
			
 
				+                    },
			
 
				+                    set: function (value) {
			
 
				+                        if (this._szDef !== value) {
			
 
				+                            this._szDef = wijmo.asNumber(value, false, true);
			
 
				+                        }
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+                return RowColDataCollection;
			
 
				+            })(wijmo.collections.ObservableArray);
			
 
				+            sheet.RowColDataCollection = RowColDataCollection;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=ExcelRow.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.ts
@@ -0,0 +1,44 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the HeaderRow class used to display header information for the bind sheet.
			
 
				+	 */
			
 
				+	export class HeaderRow extends wijmo.grid.Row {
			
 
				+		constructor() {
			
 
				+			super();
			
 
				+			this.isReadOnly = true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the RowColDataCollection class used to store the row and column data for FlexSheet control.
			
 
				+	 */
			
 
				+	export class RowColDataCollection extends wijmo.collections.ObservableArray {
			
 
				+		private _szDef = 25;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a RowColDataCollection class.
			
 
				+		 *
			
 
				+		 * @param defaultSize The default size for the collection.
			
 
				+		 */
			
 
				+		constructor(defaultSize?: number){
			
 
				+			super();
			
 
				+			if(isNumber(defaultSize)){
			
 
				+				this._szDef = defaultSize;
			
 
				+			} 
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the default size of elements in this collection.
			
 
				+		 */
			
 
				+		get defaultSize(): number {
			
 
				+			return this._szDef;
			
 
				+		}
			
 
				+		set defaultSize(value: number) {
			
 
				+			if (this._szDef !== value) {
			
 
				+				this._szDef = asNumber(value, false, true);
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.js
--- a/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.ts
--- a/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.js
@@ -0,0 +1,194 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the ScrollBar control.
			
 
				+            */
			
 
				+            var ScrollBar = (function (_super) {
			
 
				+                __extends(ScrollBar, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a ScrollBar control.
			
 
				+                *
			
 
				+                * @param element The DOM element that will host the control, or a selector for the host element (e.g. '#theCtrl').
			
 
				+                * @param options JavaScript object containing initialization data for the control.
			
 
				+                */
			
 
				+                function ScrollBar(element, options) {
			
 
				+                    _super.call(this, element, options);
			
 
				+                    this._scrollDistance = 0;
			
 
				+                    this._size = 0;
			
 
				+                    this._scrollValue = 0;
			
 
				+                    this._scrollHdl = this._scrollEventHandler.bind(this);
			
 
				+                    /**
			
 
				+                    * Occurs when the ScrollBar scrolled
			
 
				+                    */
			
 
				+                    this.scrolled = new wijmo.Event();
			
 
				+                    var self = this;
			
 
				+
			
 
				+                    if (self.hostElement.attributes['tabindex']) {
			
 
				+                        self.hostElement.attributes.removeNamedItem('tabindex');
			
 
				+                    }
			
 
				+
			
 
				+                    self.deferUpdate(function () {
			
 
				+                        self._initControl();
			
 
				+                        if (options) {
			
 
				+                            self.initialize(options);
			
 
				+                        }
			
 
				+                        self._adjustSize();
			
 
				+                    });
			
 
				+                }
			
 
				+                Object.defineProperty(ScrollBar.prototype, "scrollDistance", {
			
 
				+                    /**
			
 
				+                    * Gets or sets the scroll distance of the ScrollBar control.
			
 
				+                    *
			
 
				+                    * This value indicate the range the ScrollBar control can scroll.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._scrollDistance;
			
 
				+                    },
			
 
				+                    set: function (value) {
			
 
				+                        if (value !== this.scrollDistance && value >= 0) {
			
 
				+                            this._scrollDistance = value;
			
 
				+                            this.invalidate();
			
 
				+                        }
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                Object.defineProperty(ScrollBar.prototype, "scrollValue", {
			
 
				+                    /**
			
 
				+                    * Gets or sets the scroll value of the ScrollBar control
			
 
				+                    *
			
 
				+                    * This value is for synchronizing the scroll position of the FlexSheet control.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._scrollValue;
			
 
				+                    },
			
 
				+                    set: function (value) {
			
 
				+                        if (value < 0 || value > this.scrollDistance) {
			
 
				+                            return;
			
 
				+                        }
			
 
				+                        if (value !== this._scrollValue) {
			
 
				+                            this._root.scrollLeft = value;
			
 
				+                            this._scrollValue = value;
			
 
				+                        }
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                Object.defineProperty(ScrollBar.prototype, "size", {
			
 
				+                    /**
			
 
				+                    * Gets the size of the ScrollBar control
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._size;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                /**
			
 
				+                * Override to refresh the control.
			
 
				+                *
			
 
				+                * @param fullUpdate Whether to update the control layout as well as the content.
			
 
				+                */
			
 
				+                ScrollBar.prototype.refresh = function (fullUpdate) {
			
 
				+                    if (typeof fullUpdate === "undefined") { fullUpdate = true; }
			
 
				+                    _super.prototype.refresh.call(this, fullUpdate);
			
 
				+                    this._root.removeEventListener('mousedown', this._mousedownEventHandler);
			
 
				+                    this._root.removeEventListener('scroll', this._scrollHdl, true);
			
 
				+                    this._adjustSize(fullUpdate);
			
 
				+                    this._root.addEventListener('mousedown', this._mousedownEventHandler);
			
 
				+                    this._root.addEventListener('scroll', this._scrollHdl, true);
			
 
				+                };
			
 
				+
			
 
				+                // The scroll event handler for the ScrollBar control.
			
 
				+                ScrollBar.prototype._scrollEventHandler = function () {
			
 
				+                    this._scrollValue = this._root.scrollLeft;
			
 
				+
			
 
				+                    this.scrolled.raise(this);
			
 
				+                };
			
 
				+
			
 
				+                // The mousedown event handler for the ScrollBar control.
			
 
				+                ScrollBar.prototype._mousedownEventHandler = function (e) {
			
 
				+                    e.preventDefault();
			
 
				+                };
			
 
				+
			
 
				+                // Initialize the ScrollBar control.
			
 
				+                ScrollBar.prototype._initControl = function () {
			
 
				+                    this.applyTemplate('', this.getTemplate(), {
			
 
				+                        _fill: 'fill',
			
 
				+                        _root: 'root'
			
 
				+                    });
			
 
				+
			
 
				+                    this._root.addEventListener('mousedown', this._mousedownEventHandler);
			
 
				+                    this._root.addEventListener('scroll', this._scrollHdl, true);
			
 
				+                };
			
 
				+
			
 
				+                // Adjust the size for the ScrollBar control.
			
 
				+                ScrollBar.prototype._adjustSize = function (fullUpdate) {
			
 
				+                    if (typeof fullUpdate === "undefined") { fullUpdate = true; }
			
 
				+                    var size, dis;
			
 
				+
			
 
				+                    if (fullUpdate) {
			
 
				+                        this._root.style.overflowX = 'auto';
			
 
				+                        this._root.style.overflowY = 'hidden';
			
 
				+                        size = ScrollBar.scrollbarSize;
			
 
				+                        if (!size) {
			
 
				+                            dis = this._root.offsetWidth + this._scrollDistance;
			
 
				+                            this._fill.style.width = dis + 'px';
			
 
				+                            size = this._root.offsetHeight - this._root.clientHeight;
			
 
				+                            ScrollBar.scrollbarSize = size;
			
 
				+                        }
			
 
				+                        this._root.style.height = '100%';
			
 
				+                        this._fill.style.height = size + 'px';
			
 
				+                        this._root.style.width = '100%';
			
 
				+                        this._size = size;
			
 
				+                    }
			
 
				+                    dis = this._root.offsetWidth + this._scrollDistance;
			
 
				+                    this._fill.style.width = dis + 'px';
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Gets the size of the ScrollBar.
			
 
				+                *
			
 
				+                * @param dir The direction of the ScrollBar.
			
 
				+                */
			
 
				+                ScrollBar.getSize = function () {
			
 
				+                    var size = ScrollBar.scrollbarSize, tmp, scrollbar;
			
 
				+
			
 
				+                    if (size) {
			
 
				+                        return size;
			
 
				+                    }
			
 
				+
			
 
				+                    tmp = document.createElement('div');
			
 
				+                    document.body.appendChild(tmp);
			
 
				+                    scrollbar = new ScrollBar(tmp, { scrollDistance: 100 });
			
 
				+                    size = scrollbar.size;
			
 
				+                    ScrollBar.scrollbarSize = size;
			
 
				+                    document.body.removeChild(tmp);
			
 
				+
			
 
				+                    return size;
			
 
				+                };
			
 
				+                ScrollBar.scrollbarSize = 0;
			
 
				+
			
 
				+                ScrollBar.controlTemplate = '<div wj-part="root" style="width:100px;height:100px">' + '<div wj-part="fill" style="width:100%;height:100%"/>' + '</div>';
			
 
				+                return ScrollBar;
			
 
				+            })(wijmo.Control);
			
 
				+            sheet.ScrollBar = ScrollBar;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=ScrollBar.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.ts
@@ -0,0 +1,173 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the ScrollBar control.
			
 
				+	 */
			
 
				+	export class ScrollBar extends wijmo.Control {
			
 
				+		private _scrollDistance: number = 0;
			
 
				+		private _fill: HTMLDivElement;
			
 
				+		private _root: HTMLDivElement;
			
 
				+		private _size: number = 0;
			
 
				+		private _scrollValue: number = 0;
			
 
				+		private _scrollHdl = this._scrollEventHandler.bind(this);
			
 
				+		static scrollbarSize: number = 0;
			
 
				+
			
 
				+		static controlTemplate = '<div wj-part="root" style="width:100px;height:100px">' + 
			
 
				+			'<div wj-part="fill" style="width:100%;height:100%"/>' + 
			
 
				+			'</div>';
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a ScrollBar control.
			
 
				+		 *
			
 
				+		 * @param element The DOM element that will host the control, or a selector for the host element (e.g. '#theCtrl').
			
 
				+		 * @param options JavaScript object containing initialization data for the control.
			
 
				+		 */
			
 
				+		constructor(element: any, options?: any) {
			
 
				+			super(element, options);
			
 
				+			var self = this;
			
 
				+
			
 
				+			if (self.hostElement.attributes['tabindex']) {
			
 
				+				self.hostElement.attributes.removeNamedItem('tabindex');
			
 
				+			}
			
 
				+
			
 
				+			self.deferUpdate(function(){
			
 
				+				self._initControl();
			
 
				+				if (options) {
			
 
				+					self.initialize(options);
			
 
				+				}
			
 
				+				self._adjustSize();
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the scroll distance of the ScrollBar control.
			
 
				+		 *
			
 
				+		 * This value indicate the range the ScrollBar control can scroll.
			
 
				+		 */
			
 
				+		get scrollDistance(): number {
			
 
				+			return this._scrollDistance;
			
 
				+		}
			
 
				+		set scrollDistance(value: number) {
			
 
				+			if (value !== this.scrollDistance && value >= 0) {
			
 
				+				this._scrollDistance = value;
			
 
				+				this.invalidate();
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the scroll value of the ScrollBar control
			
 
				+		 *
			
 
				+		 * This value is for synchronizing the scroll position of the FlexSheet control.
			
 
				+		 */
			
 
				+		get scrollValue(): number {
			
 
				+			return this._scrollValue;
			
 
				+		}
			
 
				+		set scrollValue(value: number) {
			
 
				+			if (value < 0 || value > this.scrollDistance) {
			
 
				+				return;
			
 
				+			}
			
 
				+			if (value !== this._scrollValue) {
			
 
				+				this._root.scrollLeft = value;
			
 
				+				this._scrollValue = value;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the size of the ScrollBar control
			
 
				+		 */
			
 
				+		get size(): number {
			
 
				+			return this._size;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Override to refresh the control.
			
 
				+		 *
			
 
				+		 * @param fullUpdate Whether to update the control layout as well as the content.
			
 
				+		 */
			
 
				+		refresh(fullUpdate = true) {
			
 
				+			super.refresh(fullUpdate);
			
 
				+			this._root.removeEventListener('mousedown', this._mousedownEventHandler);
			
 
				+			this._root.removeEventListener('scroll', this._scrollHdl, true);
			
 
				+			this._adjustSize(fullUpdate);
			
 
				+			this._root.addEventListener('mousedown', this._mousedownEventHandler);
			
 
				+			this._root.addEventListener('scroll', this._scrollHdl, true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Occurs when the ScrollBar scrolled
			
 
				+		 */
			
 
				+		scrolled = new wijmo.Event();
			
 
				+
			
 
				+		// The scroll event handler for the ScrollBar control.
			
 
				+		private _scrollEventHandler() {
			
 
				+			this._scrollValue = this._root.scrollLeft;
			
 
				+
			
 
				+			this.scrolled.raise(this);
			
 
				+		}
			
 
				+
			
 
				+		// The mousedown event handler for the ScrollBar control.
			
 
				+		private _mousedownEventHandler(e: MouseEvent) {
			
 
				+			e.preventDefault();
			
 
				+		}
			
 
				+
			
 
				+		// Initialize the ScrollBar control.
			
 
				+		private _initControl(){
			
 
				+			this.applyTemplate('', this.getTemplate(), {
			
 
				+				_fill: 'fill',
			
 
				+				_root: 'root'
			
 
				+			}); 
			
 
				+
			
 
				+			this._root.addEventListener('mousedown', this._mousedownEventHandler);
			
 
				+			this._root.addEventListener('scroll', this._scrollHdl, true);
			
 
				+		}
			
 
				+
			
 
				+		// Adjust the size for the ScrollBar control.
			
 
				+		private _adjustSize(fullUpdate = true) {
			
 
				+			var size: number,
			
 
				+				dis: number;
			
 
				+
			
 
				+			if (fullUpdate) {
			
 
				+				this._root.style.overflowX = 'auto';
			
 
				+				this._root.style.overflowY = 'hidden';
			
 
				+				size = ScrollBar.scrollbarSize;
			
 
				+				if (!size) {
			
 
				+					dis = this._root.offsetWidth + this._scrollDistance;
			
 
				+					this._fill.style.width = dis + 'px';
			
 
				+					size = this._root.offsetHeight - this._root.clientHeight;
			
 
				+					ScrollBar.scrollbarSize = size;
			
 
				+				}
			
 
				+				this._root.style.height = '100%';
			
 
				+				this._fill.style.height = size + 'px';
			
 
				+				this._root.style.width = '100%';
			
 
				+				this._size = size;
			
 
				+			}
			
 
				+			dis = this._root.offsetWidth + this._scrollDistance;
			
 
				+			this._fill.style.width = dis + 'px';
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the size of the ScrollBar.
			
 
				+		 * 
			
 
				+		 * @param dir The direction of the ScrollBar.
			
 
				+		 */
			
 
				+		static getSize(): number {
			
 
				+			var size = ScrollBar.scrollbarSize,
			
 
				+				tmp: HTMLDivElement,
			
 
				+				scrollbar: ScrollBar;
			
 
				+
			
 
				+			if (size) {
			
 
				+				return size;
			
 
				+			}
			
 
				+
			
 
				+			tmp = document.createElement('div');
			
 
				+			document.body.appendChild(tmp);
			
 
				+			scrollbar = new ScrollBar(tmp, { scrollDistance: 100});
			
 
				+			size = scrollbar.size;
			
 
				+			ScrollBar.scrollbarSize = size;
			
 
				+			document.body.removeChild(tmp);
			
 
				+
			
 
				+			return size;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/Sheet.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/Sheet.js
--- a/src/scripts/wijmo/wijmo.grid.sheet/Sheet.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/Sheet.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/Sheet.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/Sheet.ts
@@ -0,0 +1,843 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the ValueChangedEvntArgs class.
			
 
				+	 */
			
 
				+	export class ValueChangedEventArgs extends wijmo.EventArgs {
			
 
				+		private _oldValue: any;
			
 
				+		private _newValue: any;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a ValueChangedEventArgs class.
			
 
				+		 *
			
 
				+		 * @param oldValue It stores the value before changing.
			
 
				+		 * @param newValue It stores the value after changing.
			
 
				+		 */
			
 
				+		constructor(oldValue: any, newValue: any) {
			
 
				+			super();
			
 
				+			this._oldValue = oldValue;
			
 
				+			this._newValue = newValue;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the old value before changing.
			
 
				+		 */
			
 
				+		get oldValue(): any {
			
 
				+			return this._oldValue;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the new value after changing.
			
 
				+		 */
			
 
				+		get newValue(): any {
			
 
				+			return this._newValue;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the Sheet Class within the FlexSheet control
			
 
				+	 */
			
 
				+	export class Sheet {
			
 
				+		private _name: string;
			
 
				+		private _owner: FlexSheet; 
			
 
				+		private _rowCount: number;
			
 
				+		private _columnCount: number;
			
 
				+		private _visible: boolean = true;
			
 
				+		private _unboundSortDesc = new wijmo.collections.ObservableArray();
			
 
				+		private _styledCells: any = {};
			
 
				+		private _mergedRange: any = {};
			
 
				+		private _dataGrid: FlexGrid;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a ValueChangedEventArgs class.
			
 
				+		 *
			
 
				+		 * @param sheetName The name of the sheet within the FlexSheet control.
			
 
				+		 * @param dataGrid The @see:FlexGrid in the sheet.
			
 
				+		 * @param rows The row count for the sheet.
			
 
				+		 * @param cols The column count for the sheet.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet, dataGrid?: FlexGrid, sheetName?: string, rows?: number, cols?: number) {
			
 
				+			var self = this,
			
 
				+				insertRows: number,
			
 
				+				insertCols: number,
			
 
				+				i: number;
			
 
				+
			
 
				+			self._owner = owner;
			
 
				+			self._name = sheetName;
			
 
				+			if (isNumber(rows) && !isNaN(rows) && rows >= 0) {
			
 
				+				self._rowCount = rows;
			
 
				+			} else {
			
 
				+				self._rowCount = 200;
			
 
				+			}
			
 
				+
			
 
				+			if (isNumber(cols) && !isNaN(cols) && cols >= 0) {
			
 
				+				self._columnCount = cols;
			
 
				+			} else {
			
 
				+				self._columnCount = 20;
			
 
				+			}
			
 
				+
			
 
				+			self._dataGrid = dataGrid ? dataGrid : this._createGrid();
			
 
				+
			
 
				+			self._unboundSortDesc.collectionChanged.addHandler(function () {
			
 
				+				var arr = self._unboundSortDesc,
			
 
				+					i = 0,
			
 
				+					sd;
			
 
				+
			
 
				+				for (; i < arr.length; i++) {
			
 
				+					sd = tryCast(arr[i], UnboundSortDescription);
			
 
				+					if (!sd) {
			
 
				+						throw 'sortDescriptions array must contain SortDescription objects.';
			
 
				+					}
			
 
				+				}
			
 
				+				self._owner.rows.sort(self._compareRows());
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the grid of the sheet.
			
 
				+		 */
			
 
				+		get dataGrid(): FlexGrid {
			
 
				+			return this._dataGrid;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the name of the sheet.
			
 
				+		 */
			
 
				+		get name(): string {
			
 
				+			return this._name;
			
 
				+		}
			
 
				+		set name(value: string) {
			
 
				+			if (!isNullOrWhiteSpace(value) && ((this._name && this._name.toLowerCase() !== value.toLowerCase()) || !this._name)) { 
			
 
				+				this._name = value;
			
 
				+				this._dataGrid['wj_sheetInfo'].name = value;
			
 
				+				this.onNameChanged(new wijmo.EventArgs());
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the visible for the sheet.
			
 
				+		 */
			
 
				+		get visible(): boolean {
			
 
				+			return this._visible;
			
 
				+		}
			
 
				+		set visible(value: boolean) {
			
 
				+			this._visible = value;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Get the row count of the flexgrid in current sheet.
			
 
				+		 */
			
 
				+		get rowCount(): number {
			
 
				+			return this._rowCount;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Get the column count of the flexgrid in current sheet.
			
 
				+		 */
			
 
				+		get columnCount(): number {
			
 
				+			return this._columnCount;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the styled cells
			
 
				+		 */
			
 
				+		get styledCells(): any {
			
 
				+			return this._styledCells;
			
 
				+		}
			
 
				+		set styledCells(value: any) {
			
 
				+			this._styledCells = value;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the merge ranges.
			
 
				+		 */
			
 
				+		get mergedRange(): any {
			
 
				+			return this._mergedRange;
			
 
				+		}
			
 
				+		set mergedRange(value: any) {
			
 
				+			this._mergedRange = value;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets a collection of @see:UnboundSortDescription objects that describe how the rows in the unbound sheet are sorted in the view.
			
 
				+		 */
			
 
				+		get unboundSortDescriptions(): wijmo.collections.ObservableArray {
			
 
				+			return this._unboundSortDesc;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Occurs after the sheet name changes.
			
 
				+		 */
			
 
				+		nameChanged = new wijmo.Event();
			
 
				+		/**
			
 
				+		 * Raises the @see:sheetNameChanged event.
			
 
				+		 */
			
 
				+		onNameChanged(e: wijmo.EventArgs) {
			
 
				+			this.nameChanged.raise(this, e);
			
 
				+		}
			
 
				+
			
 
				+		// Update the sheet name with valid name.
			
 
				+		_setValidName(validName: string) {
			
 
				+			this._name = validName;
			
 
				+			this._dataGrid['wj_sheetInfo'].name = validName;
			
 
				+		}
			
 
				+
			
 
				+		// comparison function used in rows sort for unbound sheet.
			
 
				+		private _compareRows() {
			
 
				+			var self = this,
			
 
				+				sortDesc = this._unboundSortDesc;
			
 
				+
			
 
				+			return function (a, b) {
			
 
				+				for (var i = 0; i < sortDesc.length; i++) {
			
 
				+
			
 
				+					// get values
			
 
				+					var sd = <UnboundSortDescription>sortDesc[i],
			
 
				+						v1 = a._ubv ? a._ubv[sd.column._hash] : '',
			
 
				+						v2 = b._ubv ? b._ubv[sd.column._hash] : '';
			
 
				+
			
 
				+					// if the cell value is formula, we should try to evaluate this formula.
			
 
				+					if (isString(v1) && v1[0] === '=') {
			
 
				+						v1 = self._owner.evaluate(v1, false);
			
 
				+					}
			
 
				+					if (isString(v2) && v2[0] === '=') {
			
 
				+						v2 = self._owner.evaluate(v2, false);
			
 
				+					}
			
 
				+
			
 
				+					// check for NaN (isNaN returns true for NaN but also for non-numbers)
			
 
				+					if (v1 !== v1) v1 = null;
			
 
				+					if (v2 !== v2) v2 = null;
			
 
				+
			
 
				+					// ignore case when sorting  (but add the original string to keep the 
			
 
				+					// strings different and the sort consistent, 'aa' between 'AA' and 'bb')
			
 
				+					if (isString(v1)) v1 = v1.toLowerCase() + v1;
			
 
				+					if (isString(v2)) v2 = v2.toLowerCase() + v2;
			
 
				+
			
 
				+					// compare the values (at last!)
			
 
				+					var cmp = (v1 < v2) ? -1 : (v1 > v2) ? +1 : 0;
			
 
				+					if (cmp !== 0) {
			
 
				+						return sd.ascending ? +cmp : -cmp;
			
 
				+					}
			
 
				+				}
			
 
				+				return 0;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// Create a blank flexsheet.
			
 
				+		private _createGrid(): FlexGrid {
			
 
				+			var hostElement = document.createElement('div'),
			
 
				+				grid: FlexGrid,
			
 
				+				colIndex: number,
			
 
				+				rowIndex: number;
			
 
				+
			
 
				+			// We should append the host element of the data grid of current sheet to body before creating data grid,
			
 
				+			// this will make the host element to inherit the style of body (TFS 121713)
			
 
				+			hostElement.style.visibility = 'hidden';
			
 
				+			document.body.appendChild(hostElement);
			
 
				+			grid = new FlexGrid(hostElement);
			
 
				+			document.body.removeChild(hostElement);
			
 
				+			for (rowIndex = 0; rowIndex < this._rowCount; rowIndex++) {
			
 
				+				grid.rows.push(new Row());
			
 
				+			}
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < this._columnCount; colIndex++) {
			
 
				+				grid.columns.push(new Column());
			
 
				+			}
			
 
				+
			
 
				+			// Add header row for the datagrid of the bind sheet.
			
 
				+			grid.loadedRows.addHandler(() => {
			
 
				+				if (grid.itemsSource && !(grid.rows[0] instanceof HeaderRow)) {
			
 
				+					grid.rows.insert(0, new HeaderRow());
			
 
				+				}
			
 
				+			});
			
 
				+
			
 
				+			// Add sheet related info into the flexgrid.
			
 
				+			// This property contains the name, style of cells and merge cells of current sheet.
			
 
				+			grid['wj_sheetInfo'] = {
			
 
				+				name: this.name,
			
 
				+				styledCells: this.styledCells,
			
 
				+				mergedRange: this.mergedRange
			
 
				+			};
			
 
				+
			
 
				+			return grid;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the SheetCollection class
			
 
				+	 *
			
 
				+	 * This class stores the sheets for the FlexSheet control.
			
 
				+	 */
			
 
				+	export class SheetCollection extends wijmo.collections.ObservableArray {
			
 
				+		private _current: number = -1;
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets current selected index.
			
 
				+		 */
			
 
				+		get selectedIndex(): number {
			
 
				+			return this._current;
			
 
				+		}
			
 
				+		set selectedIndex(index: number) {
			
 
				+			this._moveCurrentTo(index);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Occurs when selected index changed.
			
 
				+		 */
			
 
				+		selectedChanged = new wijmo.Event();
			
 
				+		/**
			
 
				+         * Raises the currentChanged event.
			
 
				+         *
			
 
				+         * @param e @see:ValueChangedEventArgs that contains the event data.
			
 
				+         */
			
 
				+		onSelectedChanged(e: ValueChangedEventArgs) {
			
 
				+			this.selectedChanged.raise(this, e);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Add new sheet in the SheetCollection.
			
 
				+		 *
			
 
				+		 * @param item The new sheet added in the SheetCollection.
			
 
				+		 * @param pos The insert position for the new sheet.
			
 
				+		 */
			
 
				+		add(item: Sheet, pos?: number) {
			
 
				+			var name = item.name ? this.getValidSheetName(item) : this._getUniqueName(),
			
 
				+				e: wijmo.collections.NotifyCollectionChangedEventArgs;
			
 
				+
			
 
				+			if (name !== item.name) {
			
 
				+				item.name = name;
			
 
				+			}
			
 
				+			if (isNumber(pos)) {
			
 
				+				this.insert(pos, item);
			
 
				+			} else {
			
 
				+				this.push(item);
			
 
				+				pos = this.length - 1;
			
 
				+			}
			
 
				+
			
 
				+			// Update the sheet name via the sheetNameChanged event handler.
			
 
				+			item.nameChanged.addHandler(() => {
			
 
				+				if (!this.isValidSheetName(item, pos)) {
			
 
				+					item._setValidName(this.getValidSheetName(item, pos));
			
 
				+				}
			
 
				+				e = new wijmo.collections.NotifyCollectionChangedEventArgs(wijmo.collections.NotifyCollectionChangedAction.Change, item, isNumber(pos) ? pos : this.length - 1);
			
 
				+				this.onSheetNameChanged(e);
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Occurs after the name of the sheet in the sheetCollection changes
			
 
				+		 */
			
 
				+		sheetNameChanged = new wijmo.Event();
			
 
				+		/**
			
 
				+		 * Rasie the @see:itemNameChanged event.
			
 
				+		 */
			
 
				+		onSheetNameChanged(e: wijmo.collections.NotifyCollectionChangedEventArgs) {
			
 
				+			this.sheetNameChanged.raise(this, e);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Select the first sheet in the flexsheet control.
			
 
				+		 */
			
 
				+		selectFirst(): boolean {
			
 
				+			return this._moveCurrentTo(0);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Select the last sheet in the flexsheet control.
			
 
				+		 */
			
 
				+		selectLast(): boolean {
			
 
				+			return this._moveCurrentTo(this.length - 1);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Select the previous sheet in the flexsheet control.
			
 
				+		 */
			
 
				+		selectPrev(): boolean {
			
 
				+			return this._moveCurrentTo(this._current - 1);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Select the next sheet in the flexsheet control.
			
 
				+		 */
			
 
				+		selectNext(): boolean {
			
 
				+			return this._moveCurrentTo(this._current + 1);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Hide the indicated sheet in the SheetCollection
			
 
				+		 *
			
 
				+		 * @param pos The position of the Sheet need be hidden.
			
 
				+		 */
			
 
				+		hide(pos: number): boolean {
			
 
				+			var succeeded = false;
			
 
				+			if (pos < 0 && pos >= this.length) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			if (!this[pos].visible) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			this[pos].visible = false;
			
 
				+			if (pos === this._current) {
			
 
				+				succeeded = this._moveCurrentTo(pos + 1);
			
 
				+			}
			
 
				+			if (!succeeded) {
			
 
				+				this[pos].visible = true;
			
 
				+				return succeeded;
			
 
				+			}
			
 
				+			return true;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Show the indicated sheet in the SheetCollection
			
 
				+		 *
			
 
				+		 * @param pos The position of the Sheet need be shown.
			
 
				+		 */
			
 
				+		show(pos: number): boolean {
			
 
				+			var succeeded = false;
			
 
				+			if (pos < 0 && pos >= this.length) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			this[pos].visible = true;
			
 
				+			this._moveCurrentTo(pos);
			
 
				+			return true;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Delete the indicated sheet in the SheetCollection
			
 
				+		 *
			
 
				+		 * @param pos The position of the Sheet need be deleted.
			
 
				+		 */
			
 
				+		delete(pos: number) {
			
 
				+			var succeeded = this.hide(pos);
			
 
				+			if (succeeded) {
			
 
				+				this.removeAt(pos);
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Clear the SheetCollection.
			
 
				+		 */
			
 
				+		clear() {
			
 
				+			super.clear();
			
 
				+			this._current = -1;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Check whether the sheet name is valid
			
 
				+		 *
			
 
				+		 * @param sheet The @see:Sheet need check the name is valid or not.
			
 
				+		 * @param currentSheetIndex The sheet index for the current checking sheet.
			
 
				+		 */
			
 
				+		isValidSheetName(sheet: Sheet, currentSheetIndex: number = -1): boolean {
			
 
				+			var sheetIndex = this._getSheetIndexFrom(sheet.name);
			
 
				+
			
 
				+			return (sheetIndex === -1 || sheetIndex === currentSheetIndex);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Get the valid name for the sheet.
			
 
				+		 *
			
 
				+		 * @param currentSheet The @see:Sheet need get the valid name.
			
 
				+		 * @param currentSheetIndex The sheet index for the current checking sheet.
			
 
				+		 */
			
 
				+		getValidSheetName(currentSheet: Sheet, currentSheetIndex: number = -1): string {
			
 
				+			var validName = currentSheet.name,
			
 
				+				index = 1,
			
 
				+				sheetIndex: number;
			
 
				+
			
 
				+			do {
			
 
				+				sheetIndex = this._getSheetIndexFrom(validName);
			
 
				+				if (sheetIndex === -1 || sheetIndex === currentSheetIndex) {
			
 
				+					break;
			
 
				+				} else {
			
 
				+					validName = currentSheet.name.concat((index + 1).toString());
			
 
				+				}
			
 
				+				index = index + 1;
			
 
				+			} while (true);
			
 
				+
			
 
				+			return validName;
			
 
				+		}
			
 
				+
			
 
				+		// Move the current index to indicated position.
			
 
				+		private _moveCurrentTo(pos: number): boolean {
			
 
				+			var searchedPos = pos,
			
 
				+				e: ValueChangedEventArgs;
			
 
				+
			
 
				+			if (pos < 0 || pos >= this.length) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			while (searchedPos < this.length && !this[searchedPos].visible) {
			
 
				+				searchedPos++;
			
 
				+			}
			
 
				+			if (searchedPos === this.length) {
			
 
				+				searchedPos = pos;
			
 
				+				while (searchedPos >= 0 && !this[searchedPos].visible) {
			
 
				+					searchedPos--;
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			if (searchedPos < 0) {
			
 
				+				return false;
			
 
				+			}
			
 
				+
			
 
				+			if (searchedPos !== this._current) {
			
 
				+				e = new ValueChangedEventArgs(this._current, searchedPos);
			
 
				+				this._current = searchedPos;
			
 
				+				this.onSelectedChanged(e);
			
 
				+			}
			
 
				+
			
 
				+			return true;
			
 
				+		}
			
 
				+
			
 
				+		// Get the index for the sheet in the SheetCollection.
			
 
				+		private _getSheetIndexFrom(sheetName: string): number {
			
 
				+			var result = -1,
			
 
				+				sheet: Sheet,
			
 
				+				name: string;
			
 
				+
			
 
				+			sheetName = sheetName ? sheetName.toLowerCase() : '';
			
 
				+			for (var i = 0; i < this.length; i++) {
			
 
				+				sheet = <Sheet>this[i];
			
 
				+				name = sheet.name ? sheet.name.toLowerCase() : '';
			
 
				+				if (name === sheetName) {
			
 
				+					return i;
			
 
				+				}
			
 
				+			}
			
 
				+			return result;
			
 
				+		}
			
 
				+
			
 
				+		// Get the unique name for the sheet in the SheetCollection.
			
 
				+		private _getUniqueName(): string {
			
 
				+			var validName = 'Sheet1',
			
 
				+				index = 0;
			
 
				+			do {
			
 
				+				if (this._getSheetIndexFrom(validName) === -1) {
			
 
				+					break;
			
 
				+				} else {
			
 
				+					validName = 'Sheet'.concat((index + 1).toString());
			
 
				+				}
			
 
				+				index = index + 1;
			
 
				+			} while (true);
			
 
				+
			
 
				+			return validName;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the SheetTabs control
			
 
				+	 *
			
 
				+	 * This control shows the @see Sheet for the @see FlexSheet control.
			
 
				+	 */
			
 
				+	export class SheetTabs extends wijmo.Control {
			
 
				+		private _itemsSource: SheetCollection;
			
 
				+		private _tabContainer: HTMLElement;
			
 
				+		private _sheetPage: HTMLElement;
			
 
				+		private _newSheet: HTMLElement;
			
 
				+		private _owner: FlexSheet;
			
 
				+
			
 
				+		static controlTemplate = '<div class="sheet" style="height:100%;position:relative">' +
			
 
				+			'<div wj-part="sheetpage" class="wj-btn-group sheetpage">' + // Sheets pageg
			
 
				+			'<button type="button" class="wj-btn wj-btn-default">' +
			
 
				+			'<span class="sheeticon glyphicon glyphicon-step-backward"></span>' +
			
 
				+			'</button>' +
			
 
				+			'<button type="button" class="wj-btn wj-btn-default">' +
			
 
				+			'<span class="sheeticon glyphicon glyphicon-triangle-left"></span>' +
			
 
				+			'</button>' +
			
 
				+			'<button type="button" class="wj-btn wj-btn-default">' +
			
 
				+			'<span class="sheeticon glyphicon glyphicon-triangle-right"></span>' +
			
 
				+			'</button>' +
			
 
				+			'<button type="button" class="wj-btn wj-btn-default">' +
			
 
				+			'<span class="sheeticon glyphicon glyphicon-step-forward"></span>' +
			
 
				+			'</button>' +
			
 
				+			'</div>' +
			
 
				+			'<div class="sheettab" style="height:100%;overflow:hidden">' + //Sheet Tabs
			
 
				+			'<ul wj-part="container"></ul>' +
			
 
				+			'</div>' +
			
 
				+			'<div wj-part="newsheet" class="newsheet"><span class="glyphicon glyphicon-file"></span></div>' +
			
 
				+			'</div>';
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a SheetTabs control.
			
 
				+		 *
			
 
				+		 * @param element The DOM element that will host the control, or a selector for the host element (e.g. '#theCtrl').
			
 
				+		 * @param options JavaScript object containing initialization data for the control.
			
 
				+		 */
			
 
				+		constructor(element: any, owner: FlexSheet, options?: any) {
			
 
				+			super(element, options);
			
 
				+			var self = this;
			
 
				+
			
 
				+			self._owner = owner;
			
 
				+			if (self.hostElement.attributes['tabindex']) {
			
 
				+				self.hostElement.attributes.removeNamedItem('tabindex');
			
 
				+			}
			
 
				+
			
 
				+			self._initControl();
			
 
				+			self.deferUpdate(function () {
			
 
				+				if (options) {
			
 
				+					self.initialize(options);
			
 
				+				}
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the SheetCollection for the SheetTabs control.
			
 
				+		 */
			
 
				+		get itemsSource(): SheetCollection{
			
 
				+			return this._itemsSource;
			
 
				+		}
			
 
				+		set itemsSource(value: SheetCollection) {
			
 
				+			if (value != this._itemsSource) {
			
 
				+				if (this._itemsSource) {
			
 
				+					this._itemsSource.collectionChanged.removeHandler(this._sourceChanged, this);
			
 
				+					this._itemsSource.selectedChanged.removeHandler(this._selectedChanged, this);
			
 
				+					this._itemsSource.sheetNameChanged.removeHandler(this._updateSheetName);
			
 
				+					this._itemsSource = null;
			
 
				+				}
			
 
				+				this._itemsSource = value;
			
 
				+				this._itemsSource.collectionChanged.addHandler(this._sourceChanged, this);
			
 
				+				this._itemsSource.selectedChanged.addHandler(this._selectedChanged, this);
			
 
				+				this._itemsSource.sheetNameChanged.addHandler(this._updateSheetName, this);
			
 
				+				this._sourceChanged(this);
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Override to refresh the control.
			
 
				+		 *
			
 
				+		 * @param fullUpdate Whether to update the control layout as well as the content.
			
 
				+		 */
			
 
				+		refresh(fullUpdate) {
			
 
				+			this._tabContainer.innerHTML = '';
			
 
				+			this._tabContainer.innerHTML = this._getSheetTabs();
			
 
				+			this._adjustSize();
			
 
				+		}
			
 
				+
			
 
				+		// The items source changed event handler.
			
 
				+		private _sourceChanged(sender: any, e: wijmo.EventArgs = wijmo.collections.NotifyCollectionChangedEventArgs.reset) {
			
 
				+			var eArgs: wijmo.collections.NotifyCollectionChangedEventArgs = <wijmo.collections.NotifyCollectionChangedEventArgs> e,
			
 
				+				html: string,
			
 
				+				index: number;
			
 
				+
			
 
				+			switch (eArgs.action) {
			
 
				+				case wijmo.collections.NotifyCollectionChangedAction.Add:
			
 
				+					html = this._getSheetElement(<Sheet>eArgs.item);
			
 
				+					index = eArgs.index - 1;
			
 
				+					if (index < 0) {
			
 
				+						index = 0;
			
 
				+					}
			
 
				+					this._tabContainer.appendChild(createElement(html));
			
 
				+					this._adjustSize();
			
 
				+					break;
			
 
				+				case wijmo.collections.NotifyCollectionChangedAction.Remove:
			
 
				+					this._tabContainer.removeChild(this._tabContainer.children[eArgs.index]);
			
 
				+					this._adjustSize();
			
 
				+					break;
			
 
				+				default:
			
 
				+					this.invalidate();
			
 
				+					break;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// The current changed of the item source event handler.
			
 
				+		private _selectedChanged(sender: any, e: ValueChangedEventArgs) {
			
 
				+			this._updateTabActive(e.oldValue, false);
			
 
				+			this._updateTabActive(e.newValue, true);
			
 
				+		}
			
 
				+
			
 
				+		// Initialize the SheetTabs control.
			
 
				+		private _initControl() {
			
 
				+			var self = this;
			
 
				+
			
 
				+			//apply template
			
 
				+			self.applyTemplate('', self.getTemplate(), {
			
 
				+				_tabContainer: 'container',
			
 
				+				_sheetPage: 'sheetpage',
			
 
				+				_newSheet: 'newsheet'
			
 
				+			});
			
 
				+			//init opts
			
 
				+
			
 
				+			self._newSheet.addEventListener('click', (evt: MouseEvent) => {
			
 
				+				self._owner.addUnboundSheet();
			
 
				+				self._tabContainer.parentElement.scrollLeft = self._tabContainer.offsetWidth;
			
 
				+			});
			
 
				+
			
 
				+			self._initSheetPage();
			
 
				+			self._initSheetTab();
			
 
				+		}
			
 
				+
			
 
				+		// Initialize the sheet tab part.
			
 
				+		private _initSheetTab() {
			
 
				+			var self = this;
			
 
				+			self._tabContainer.addEventListener('click', (evt: MouseEvent) => {
			
 
				+				var li = <HTMLElement>evt.target,
			
 
				+					idx;
			
 
				+				evt.preventDefault();
			
 
				+				
			
 
				+				idx = self._getItemIndex(self._tabContainer, li);
			
 
				+
			
 
				+				self._scrollSheetTabContainer(li);
			
 
				+
			
 
				+				if (idx > -1) {
			
 
				+					self.itemsSource.selectedIndex = idx;
			
 
				+				}
			
 
				+			});
			
 
				+			//todo
			
 
				+			//contextmenu
			
 
				+		}
			
 
				+
			
 
				+		// Initialize the sheet pager part.
			
 
				+		private _initSheetPage() {
			
 
				+			var self = this;
			
 
				+
			
 
				+			self.hostElement.querySelector('div.sheetpage').addEventListener('click', (e: MouseEvent) => {
			
 
				+				var btn = (<HTMLElement>e.target).toString() === '[object HTMLButtonElement]' ? <HTMLElement>e.target : (<HTMLElement>e.target).parentElement,
			
 
				+					index = self._getItemIndex(self._sheetPage, btn),
			
 
				+					currentSheetTab: HTMLElement;
			
 
				+
			
 
				+				switch (index) {
			
 
				+					case 0:
			
 
				+						self.itemsSource.selectFirst();
			
 
				+						self._tabContainer.parentElement.scrollLeft = 0;
			
 
				+						break;
			
 
				+					case 1:
			
 
				+						self.itemsSource.selectPrev();
			
 
				+						currentSheetTab = <HTMLElement>self._tabContainer.children[self.itemsSource.selectedIndex];
			
 
				+						self._scrollSheetTabContainer(currentSheetTab);
			
 
				+						break;
			
 
				+					case 2:
			
 
				+						self.itemsSource.selectNext();
			
 
				+						currentSheetTab = <HTMLElement>self._tabContainer.children[self.itemsSource.selectedIndex];
			
 
				+						self._scrollSheetTabContainer(currentSheetTab);
			
 
				+						break;
			
 
				+					case 3:
			
 
				+						self.itemsSource.selectLast();
			
 
				+						self._tabContainer.parentElement.scrollLeft = self._tabContainer.offsetWidth;
			
 
				+						break;
			
 
				+				}
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		// Get markup for the sheet tabs
			
 
				+		private _getSheetTabs(): string {
			
 
				+			var html = '',
			
 
				+				i: number;
			
 
				+
			
 
				+			for (i = 0; i < this.itemsSource.length; i++) {
			
 
				+				html += this._getSheetElement(this.itemsSource[i], this.itemsSource.selectedIndex === i);
			
 
				+			}
			
 
				+			return html;
			
 
				+		}
			
 
				+
			
 
				+		// Get the markup for a sheet tab.
			
 
				+		private _getSheetElement(sheetItem: Sheet, isActive=false): string {
			
 
				+			var result = '<li';
			
 
				+			if (!sheetItem.visible) {
			
 
				+				result += ' class="hidden"';
			
 
				+			} else if (isActive) {
			
 
				+				result += ' class="active"';
			
 
				+			}
			
 
				+			result += '>' + sheetItem.name + '</li>';
			
 
				+			return result;
			
 
				+		}
			
 
				+
			
 
				+		// Update the active state for the sheet tabs.
			
 
				+		private _updateTabActive(pos: number, active: boolean) {
			
 
				+			if (pos < 0 || pos >= this._tabContainer.children.length) {
			
 
				+				return;
			
 
				+			}
			
 
				+			if (active) {
			
 
				+				addClass(<HTMLElement>this._tabContainer.children[pos], 'active');
			
 
				+			} else {
			
 
				+				removeClass(<HTMLElement>this._tabContainer.children[pos], 'active');
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// Update the show or hide state for the sheet tabs
			
 
				+		private _updateTabShown(pos: number, show: boolean) {
			
 
				+			if (pos < 0 || pos >= this._tabContainer.children.length) {
			
 
				+				return;
			
 
				+			}
			
 
				+			if (show) {
			
 
				+				addClass(<HTMLElement>this._tabContainer.children[pos], 'hidden');
			
 
				+			} else {
			
 
				+				removeClass(<HTMLElement>this._tabContainer.children[pos], 'hidden');
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// Adjust the size of the SheetTabs control.
			
 
				+		private _adjustSize() {
			
 
				+			//adjust the size
			
 
				+			var sheetCount = this._tabContainer.childElementCount,
			
 
				+				index: number,
			
 
				+				containerMaxWidth: number,
			
 
				+				width: number = 0;
			
 
				+
			
 
				+			for (index = 0; index < sheetCount; index++) {
			
 
				+				width += (<HTMLElement>this._tabContainer.children[index]).offsetWidth + 1;
			
 
				+			}
			
 
				+			containerMaxWidth = this.hostElement.offsetWidth - this._sheetPage.offsetWidth - this._newSheet.offsetWidth - 2;
			
 
				+			this._tabContainer.parentElement.style.width = (width > containerMaxWidth ? containerMaxWidth : width) + 'px';
			
 
				+			this._tabContainer.style.width = width + 'px';
			
 
				+			this._sheetPage.parentElement.style.width = this._sheetPage.offsetWidth + this._newSheet.offsetWidth + this._tabContainer.parentElement.offsetWidth + 3 + 'px';
			
 
				+		}
			
 
				+
			
 
				+		// Get the index of the element in its parent container.
			
 
				+		private _getItemIndex(container:HTMLElement, item: HTMLElement): number {
			
 
				+			var idx = 0;
			
 
				+			for (; idx < container.children.length; idx++) {
			
 
				+				if (container.children[idx] === item) {
			
 
				+					return idx;
			
 
				+				}
			
 
				+			}
			
 
				+			return -1;
			
 
				+		}
			
 
				+
			
 
				+		// Update the sheet tab name.
			
 
				+		private _updateSheetName(sender: any, e: wijmo.collections.NotifyCollectionChangedEventArgs) {
			
 
				+			(<HTMLElement>this._tabContainer.querySelectorAll('li')[e.index]).textContent = e.item.name;
			
 
				+			this._adjustSize();
			
 
				+		}
			
 
				+
			
 
				+		// Scroll the sheet tab container to display the invisible or partial visible sheet tab.
			
 
				+		private _scrollSheetTabContainer(currentSheetTab: HTMLElement) {
			
 
				+			if (currentSheetTab.offsetLeft + currentSheetTab.offsetWidth - this._sheetPage.offsetWidth > this._tabContainer.parentElement.offsetWidth + this._tabContainer.parentElement.scrollLeft) {
			
 
				+				this._tabContainer.parentElement.scrollLeft += currentSheetTab.offsetWidth;
			
 
				+			} else if (currentSheetTab.offsetLeft - this._sheetPage.offsetWidth < this._tabContainer.parentElement.scrollLeft) {
			
 
				+				this._tabContainer.parentElement.scrollLeft -= currentSheetTab.offsetWidth;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the UnboundSortDescription class.
			
 
				+	 */
			
 
				+	export class UnboundSortDescription {
			
 
				+		private _column: wijmo.grid.Column;
			
 
				+		private _ascending: boolean;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:UnboundSortDescription class.
			
 
				+		 *
			
 
				+		 * @param column The column to sort the rows by.
			
 
				+		 * @param ascending The sort order.
			
 
				+		 */
			
 
				+		constructor(column: wijmo.grid.Column, ascending: boolean) {
			
 
				+			this._column = column;
			
 
				+			this._ascending = ascending;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the column to sort the rows by.
			
 
				+		 */
			
 
				+		get column(): wijmo.grid.Column {
			
 
				+			return this._column;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the sort order.
			
 
				+		 */
			
 
				+		get ascending(): boolean {
			
 
				+			return this._ascending;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/SortManager.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/SortManager.js
@@ -0,0 +1,284 @@
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the SortManager class.
			
 
				+            *
			
 
				+            * This class is for managing the sorts of the FlexSheet control.
			
 
				+            */
			
 
				+            var SortManager = (function () {
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see: SortManager class.
			
 
				+                *
			
 
				+                * @param owner The FlexSheet control.
			
 
				+                */
			
 
				+                function SortManager(owner) {
			
 
				+                    this._owner = owner;
			
 
				+                    this._sorts = new wijmo.collections.CollectionView();
			
 
				+                    this._committedList = [{
			
 
				+                            colIndex: -1,
			
 
				+                            ascending: true
			
 
				+                        }];
			
 
				+                    this._sorts.newItemCreator = function () {
			
 
				+                        return {
			
 
				+                            colIndex: -1,
			
 
				+                            ascending: true
			
 
				+                        };
			
 
				+                    };
			
 
				+
			
 
				+                    this.refresh();
			
 
				+                }
			
 
				+                Object.defineProperty(SortManager.prototype, "sorts", {
			
 
				+                    /**
			
 
				+                    * Gets the sort collection for the FlexSheet control.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._sorts;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                /**
			
 
				+                * Refresh the sort collection.
			
 
				+                */
			
 
				+                SortManager.prototype.refresh = function () {
			
 
				+                    var sortList = [], i, sd;
			
 
				+
			
 
				+                    if (this._owner.collectionView && this._owner.collectionView.sortDescriptions.length > 0) {
			
 
				+                        for (i = 0; i < this._owner.collectionView.sortDescriptions.length; i++) {
			
 
				+                            sd = this._owner.collectionView.sortDescriptions[i];
			
 
				+                            sortList.push({
			
 
				+                                colIndex: this._getColumnIndex(sd.property),
			
 
				+                                ascending: sd.ascending
			
 
				+                            });
			
 
				+                        }
			
 
				+                    } else if (this._owner.selectedSheet && this._owner.unboundSortDescriptions.length > 0) {
			
 
				+                        for (i = 0; i < this._owner.unboundSortDescriptions.length; i++) {
			
 
				+                            sd = this._owner.unboundSortDescriptions[i];
			
 
				+                            sortList.push({
			
 
				+                                colIndex: sd.column.index,
			
 
				+                                ascending: sd.ascending
			
 
				+                            });
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        sortList.push({
			
 
				+                            colIndex: -1,
			
 
				+                            ascending: true
			
 
				+                        });
			
 
				+                    }
			
 
				+                    this._sorts.sourceCollection = sortList;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Adds a blank sorting level to the sort descriptions.
			
 
				+                */
			
 
				+                SortManager.prototype.addSortLevel = function () {
			
 
				+                    var item = this._sorts.addNew();
			
 
				+                    this._sorts.commitNew();
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Removes the current sorting level from the sort descriptions.
			
 
				+                *
			
 
				+                * @param columnIndex The index of the column in the FlexSheet control.
			
 
				+                */
			
 
				+                SortManager.prototype.deleteSortLevel = function (columnIndex) {
			
 
				+                    var item;
			
 
				+
			
 
				+                    if (columnIndex != null) {
			
 
				+                        item = this._getSortItem(columnIndex);
			
 
				+                    } else {
			
 
				+                        item = this._sorts.currentItem;
			
 
				+                    }
			
 
				+                    if (item) {
			
 
				+                        this._sorts.remove(item);
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Adds a copy of the current sorting level to the sort descriptions.
			
 
				+                */
			
 
				+                SortManager.prototype.copySortLevel = function () {
			
 
				+                    var item = this._sorts.currentItem;
			
 
				+                    if (item) {
			
 
				+                        var newItem = this._sorts.addNew();
			
 
				+                        newItem.colIndex = parseInt(item.colIndex);
			
 
				+                        newItem.ascending = item.ascending;
			
 
				+                        this._sorts.commitNew();
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Update current sort level
			
 
				+                *
			
 
				+                * @param columnIndex The column index for the sort level.
			
 
				+                * @param ascending The sort order for the sort level.
			
 
				+                */
			
 
				+                SortManager.prototype.editSortLevel = function (columnIndex, ascending) {
			
 
				+                    if (columnIndex !== undefined) {
			
 
				+                        this._sorts.currentItem.colIndex = columnIndex;
			
 
				+                    }
			
 
				+                    if (ascending !== undefined) {
			
 
				+                        this._sorts.currentItem.ascending = ascending;
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Moves the current sorting level to a new position.
			
 
				+                *
			
 
				+                * @param offset The offset to move the current level by.
			
 
				+                */
			
 
				+                SortManager.prototype.moveSortLevel = function (offset) {
			
 
				+                    var item = this._sorts.currentItem;
			
 
				+                    if (item) {
			
 
				+                        var arr = this._sorts.sourceCollection, index = arr.indexOf(item), newIndex = index + offset;
			
 
				+                        if (index > -1 && newIndex > -1) {
			
 
				+                            arr.splice(index, 1);
			
 
				+                            arr.splice(newIndex, 0, item);
			
 
				+                            this._sorts.refresh();
			
 
				+                            this._sorts.moveCurrentTo(item);
			
 
				+                        }
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Commits the current sort descriptions to the FlexSheet control.
			
 
				+                */
			
 
				+                SortManager.prototype.commitSort = function (needUndoable) {
			
 
				+                    var _this = this;
			
 
				+                    if (typeof needUndoable === "undefined") { needUndoable = true; }
			
 
				+                    var sd, newSortDesc, bindSortDesc, dataBindSortDesc, i, unSortDesc = this._owner.unboundSortDescriptions, sortAction, unboundRows;
			
 
				+
			
 
				+                    if (needUndoable) {
			
 
				+                        sortAction = new sheet._SortColumnAction(this._owner);
			
 
				+                    }
			
 
				+
			
 
				+                    if (this._sorts.itemCount > 0) {
			
 
				+                        this._committedList = this._sorts.items.slice();
			
 
				+                    } else {
			
 
				+                        this._committedList = [{
			
 
				+                                colIndex: -1,
			
 
				+                                ascending: true
			
 
				+                            }];
			
 
				+                    }
			
 
				+
			
 
				+                    if (this._owner.collectionView) {
			
 
				+                        // Try to get the unbound row in the bound sheet.
			
 
				+                        unboundRows = this._scanUnboundRows();
			
 
				+
			
 
				+                        // Update sorting for the bind booksheet
			
 
				+                        this._owner.collectionView.beginUpdate();
			
 
				+                        this._owner.selectedSheet.dataGrid.collectionView.beginUpdate();
			
 
				+                        bindSortDesc = this._owner.collectionView.sortDescriptions;
			
 
				+                        bindSortDesc.clear();
			
 
				+
			
 
				+                        // Synch the sorts for the datagrid of current sheet.
			
 
				+                        dataBindSortDesc = this._owner.selectedSheet.dataGrid.collectionView.sortDescriptions;
			
 
				+                        dataBindSortDesc.clear();
			
 
				+                        for (i = 0; i < this._sorts.itemCount; i++) {
			
 
				+                            sd = this._sorts.items[i];
			
 
				+
			
 
				+                            if (sd.colIndex > -1) {
			
 
				+                                newSortDesc = new wijmo.collections.SortDescription(this._owner.columns[sd.colIndex].binding, sd.ascending);
			
 
				+                                bindSortDesc.push(newSortDesc);
			
 
				+
			
 
				+                                // Synch the sorts for the datagrid of current sheet.
			
 
				+                                dataBindSortDesc.push(newSortDesc);
			
 
				+                            }
			
 
				+                        }
			
 
				+                        this._owner.collectionView.endUpdate();
			
 
				+                        this._owner.selectedSheet.dataGrid.collectionView.endUpdate();
			
 
				+
			
 
				+                        // Re-insert the unbound row into the sheet.
			
 
				+                        if (unboundRows) {
			
 
				+                            Object.keys(unboundRows).forEach(function (key) {
			
 
				+                                _this._owner.rows.splice(+key, 0, unboundRows[key]);
			
 
				+                            });
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        // Update sorting for the unbound booksheet.
			
 
				+                        this._owner.rows.beginUpdate();
			
 
				+                        unSortDesc.clear();
			
 
				+                        for (i = 0; i < this._sorts.itemCount; i++) {
			
 
				+                            sd = this._sorts.items[i];
			
 
				+
			
 
				+                            if (sd.colIndex > -1) {
			
 
				+                                unSortDesc.push(new sheet.UnboundSortDescription(this._owner.columns[sd.colIndex], sd.ascending));
			
 
				+                            }
			
 
				+                        }
			
 
				+                        this._owner.rows.endUpdate();
			
 
				+                    }
			
 
				+
			
 
				+                    if (needUndoable) {
			
 
				+                        sortAction.saveNewState();
			
 
				+                        this._owner.undoableStack.addAction(sortAction);
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Cancel the current sort descriptions to the FlexSheet control.
			
 
				+                */
			
 
				+                SortManager.prototype.cancelSort = function () {
			
 
				+                    this._sorts.sourceCollection = this._committedList.slice();
			
 
				+
			
 
				+                    this.refresh();
			
 
				+                };
			
 
				+
			
 
				+                // Get the index of the column by the binding property.
			
 
				+                SortManager.prototype._getColumnIndex = function (property) {
			
 
				+                    var i = 0, colCnt = this._owner.columns.length;
			
 
				+
			
 
				+                    for (; i < colCnt; i++) {
			
 
				+                        if (this._owner.columns[i].binding === property) {
			
 
				+                            return i;
			
 
				+                        }
			
 
				+                    }
			
 
				+                    return -1;
			
 
				+                };
			
 
				+
			
 
				+                // Get the sort item via the column index
			
 
				+                SortManager.prototype._getSortItem = function (columnIndex) {
			
 
				+                    var i = 0, sortItemCnt = this._sorts.itemCount, sortItem;
			
 
				+
			
 
				+                    for (; i < sortItemCnt; i++) {
			
 
				+                        sortItem = this._sorts.items[i];
			
 
				+
			
 
				+                        if (+sortItem.colIndex === columnIndex) {
			
 
				+                            return sortItem;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    return undefined;
			
 
				+                };
			
 
				+
			
 
				+                // Scan the unbound row of the bound sheet.
			
 
				+                SortManager.prototype._scanUnboundRows = function () {
			
 
				+                    var rowIndex, processingRow, unboundRows;
			
 
				+
			
 
				+                    for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+                        processingRow = this._owner.rows[rowIndex];
			
 
				+                        if (!processingRow.dataItem) {
			
 
				+                            if (!(processingRow instanceof sheet.HeaderRow)) {
			
 
				+                                if (!unboundRows) {
			
 
				+                                    unboundRows = {};
			
 
				+                                }
			
 
				+                                unboundRows[rowIndex] = processingRow;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    return unboundRows;
			
 
				+                };
			
 
				+                return SortManager;
			
 
				+            })();
			
 
				+            sheet.SortManager = SortManager;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=SortManager.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/SortManager.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/SortManager.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/SortManager.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/SortManager.ts
@@ -0,0 +1,285 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the SortManager class.
			
 
				+	 *
			
 
				+	 * This class is for managing the sorts of the FlexSheet control.
			
 
				+	 */
			
 
				+	export class SortManager {
			
 
				+		private _sorts: wijmo.collections.CollectionView;
			
 
				+		private _owner: FlexSheet;
			
 
				+		_committedList: any[];
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see: SortManager class.
			
 
				+		 *
			
 
				+		 * @param owner The FlexSheet control.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			this._owner = owner;
			
 
				+			this._sorts = new wijmo.collections.CollectionView();
			
 
				+			this._committedList = [{
			
 
				+				colIndex: -1,
			
 
				+				ascending: true
			
 
				+			}];
			
 
				+			this._sorts.newItemCreator = () => {
			
 
				+				return {
			
 
				+					colIndex: -1,
			
 
				+					ascending: true
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			this.refresh();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the sort collection for the FlexSheet control.
			
 
				+		 */
			
 
				+		get sorts(): wijmo.collections.CollectionView {
			
 
				+			return this._sorts;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Refresh the sort collection.
			
 
				+		 */
			
 
				+		refresh() {
			
 
				+			var sortList = [],
			
 
				+				i: number,
			
 
				+				sd: any;
			
 
				+
			
 
				+			if (this._owner.collectionView && this._owner.collectionView.sortDescriptions.length > 0) {
			
 
				+				for (i = 0; i < this._owner.collectionView.sortDescriptions.length; i++) {
			
 
				+					sd = this._owner.collectionView.sortDescriptions[i];
			
 
				+					sortList.push({
			
 
				+						colIndex: this._getColumnIndex(sd.property),
			
 
				+						ascending: sd.ascending
			
 
				+					});
			
 
				+				}
			
 
				+			} else if (this._owner.selectedSheet && this._owner.unboundSortDescriptions.length > 0) {
			
 
				+				for (i = 0; i < this._owner.unboundSortDescriptions.length; i++) {
			
 
				+					sd = this._owner.unboundSortDescriptions[i];
			
 
				+					sortList.push({
			
 
				+						colIndex: sd.column.index,
			
 
				+						ascending: sd.ascending
			
 
				+					});
			
 
				+				}
			
 
				+			} else {
			
 
				+				sortList.push({
			
 
				+					colIndex: -1,
			
 
				+					ascending: true
			
 
				+				});
			
 
				+			}
			
 
				+			this._sorts.sourceCollection = sortList;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Adds a blank sorting level to the sort descriptions.
			
 
				+		 */
			
 
				+		addSortLevel() {
			
 
				+			var item = this._sorts.addNew();
			
 
				+			this._sorts.commitNew();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Removes the current sorting level from the sort descriptions.
			
 
				+		 *
			
 
				+		 * @param columnIndex The index of the column in the FlexSheet control.
			
 
				+		 */
			
 
				+		deleteSortLevel(columnIndex?: number) {
			
 
				+			var item: any;
			
 
				+
			
 
				+			if (columnIndex != null) {
			
 
				+				item = this._getSortItem(columnIndex);
			
 
				+			} else {
			
 
				+				item = this._sorts.currentItem;
			
 
				+			}
			
 
				+			if (item) {
			
 
				+				this._sorts.remove(item);
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Adds a copy of the current sorting level to the sort descriptions.
			
 
				+		 */
			
 
				+		copySortLevel() {
			
 
				+			var item = this._sorts.currentItem;
			
 
				+			if (item) {
			
 
				+				var newItem = this._sorts.addNew();
			
 
				+				newItem.colIndex = parseInt(item.colIndex);
			
 
				+				newItem.ascending = item.ascending;
			
 
				+				this._sorts.commitNew();
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Update current sort level
			
 
				+		 *
			
 
				+		 * @param columnIndex The column index for the sort level.
			
 
				+		 * @param ascending The sort order for the sort level.
			
 
				+		 */
			
 
				+		editSortLevel(columnIndex: number, ascending: boolean) {
			
 
				+			if (columnIndex !== undefined) {
			
 
				+				this._sorts.currentItem.colIndex = columnIndex;
			
 
				+			}
			
 
				+			if (ascending !== undefined) {
			
 
				+				this._sorts.currentItem.ascending = ascending;
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Moves the current sorting level to a new position.
			
 
				+		 *
			
 
				+		 * @param offset The offset to move the current level by.
			
 
				+		 */
			
 
				+		moveSortLevel(offset: number) {
			
 
				+			var item = this._sorts.currentItem;
			
 
				+			if (item) {
			
 
				+				var arr = this._sorts.sourceCollection,
			
 
				+					index = arr.indexOf(item),
			
 
				+					newIndex = index + offset;
			
 
				+				if (index > -1 && newIndex > -1) {
			
 
				+					arr.splice(index, 1);
			
 
				+					arr.splice(newIndex, 0, item);
			
 
				+					this._sorts.refresh();
			
 
				+					this._sorts.moveCurrentTo(item);
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Commits the current sort descriptions to the FlexSheet control.
			
 
				+		 */
			
 
				+		commitSort(needUndoable = true) {
			
 
				+			var sd: any,
			
 
				+				newSortDesc: wijmo.collections.SortDescription,
			
 
				+				bindSortDesc: wijmo.collections.ObservableArray,
			
 
				+				dataBindSortDesc: wijmo.collections.ObservableArray,
			
 
				+				i: number,
			
 
				+				unSortDesc = this._owner.unboundSortDescriptions,
			
 
				+				sortAction: _SortColumnAction,
			
 
				+				unboundRows: any;
			
 
				+
			
 
				+			if (needUndoable) {
			
 
				+				sortAction = new _SortColumnAction(this._owner);
			
 
				+			}
			
 
				+
			
 
				+			if (this._sorts.itemCount > 0) {
			
 
				+				this._committedList = this._sorts.items.slice();
			
 
				+			} else {
			
 
				+				this._committedList = [{
			
 
				+					colIndex: -1,
			
 
				+					ascending: true
			
 
				+				}];
			
 
				+			}
			
 
				+
			
 
				+			if (this._owner.collectionView) {
			
 
				+				// Try to get the unbound row in the bound sheet.
			
 
				+				unboundRows = this._scanUnboundRows();
			
 
				+				// Update sorting for the bind booksheet
			
 
				+				this._owner.collectionView.beginUpdate();
			
 
				+				this._owner.selectedSheet.dataGrid.collectionView.beginUpdate();
			
 
				+				bindSortDesc = this._owner.collectionView.sortDescriptions;
			
 
				+				bindSortDesc.clear();
			
 
				+				// Synch the sorts for the datagrid of current sheet.
			
 
				+				dataBindSortDesc = this._owner.selectedSheet.dataGrid.collectionView.sortDescriptions;
			
 
				+				dataBindSortDesc.clear();
			
 
				+				for (i = 0; i < this._sorts.itemCount; i++) {
			
 
				+					sd = this._sorts.items[i];
			
 
				+
			
 
				+					if (sd.colIndex > -1) {
			
 
				+						newSortDesc = new wijmo.collections.SortDescription(this._owner.columns[sd.colIndex].binding, sd.ascending); 
			
 
				+						bindSortDesc.push(newSortDesc);
			
 
				+						// Synch the sorts for the datagrid of current sheet.
			
 
				+						dataBindSortDesc.push(newSortDesc);
			
 
				+					}
			
 
				+				}
			
 
				+				this._owner.collectionView.endUpdate();
			
 
				+				this._owner.selectedSheet.dataGrid.collectionView.endUpdate();
			
 
				+				// Re-insert the unbound row into the sheet.
			
 
				+				if (unboundRows) {
			
 
				+					Object.keys(unboundRows).forEach((key) => {
			
 
				+						this._owner.rows.splice(+key, 0, unboundRows[key]);
			
 
				+					});
			
 
				+				}
			
 
				+			} else {
			
 
				+				// Update sorting for the unbound booksheet.
			
 
				+				this._owner.rows.beginUpdate();
			
 
				+				unSortDesc.clear();
			
 
				+				for (i = 0; i < this._sorts.itemCount; i++) {
			
 
				+					sd = this._sorts.items[i];
			
 
				+
			
 
				+					if (sd.colIndex > -1) {
			
 
				+						unSortDesc.push(new UnboundSortDescription(this._owner.columns[sd.colIndex], sd.ascending));
			
 
				+					}
			
 
				+				}
			
 
				+				this._owner.rows.endUpdate();
			
 
				+			}
			
 
				+
			
 
				+			if (needUndoable) {
			
 
				+				sortAction.saveNewState();
			
 
				+				this._owner.undoableStack.addAction(sortAction);
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Cancel the current sort descriptions to the FlexSheet control.
			
 
				+		 */
			
 
				+		cancelSort() {
			
 
				+			this._sorts.sourceCollection = this._committedList.slice();
			
 
				+
			
 
				+			this.refresh();
			
 
				+		}
			
 
				+
			
 
				+		// Get the index of the column by the binding property.
			
 
				+		private _getColumnIndex(property: string): number {
			
 
				+			var i = 0,
			
 
				+				colCnt = this._owner.columns.length;
			
 
				+
			
 
				+			for (; i < colCnt; i++) {
			
 
				+				if (this._owner.columns[i].binding === property) {
			
 
				+					return i;
			
 
				+				}
			
 
				+			}
			
 
				+			return -1;
			
 
				+		}
			
 
				+
			
 
				+		// Get the sort item via the column index
			
 
				+		private _getSortItem(columnIndex: number): any {
			
 
				+			var i = 0,
			
 
				+				sortItemCnt = this._sorts.itemCount,
			
 
				+				sortItem: any;
			
 
				+
			
 
				+			for (; i < sortItemCnt; i++) {
			
 
				+				sortItem = this._sorts.items[i];
			
 
				+
			
 
				+				if (+sortItem.colIndex === columnIndex) {
			
 
				+					return sortItem;
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			return undefined;
			
 
				+		}
			
 
				+
			
 
				+		// Scan the unbound row of the bound sheet.
			
 
				+		private _scanUnboundRows(): any {
			
 
				+			var rowIndex: number,
			
 
				+				processingRow: wijmo.grid.Row,
			
 
				+				unboundRows: any;
			
 
				+
			
 
				+			for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+				processingRow = this._owner.rows[rowIndex];
			
 
				+				if (!processingRow.dataItem) {
			
 
				+					if (!(processingRow instanceof HeaderRow)) {
			
 
				+						if (!unboundRows) {
			
 
				+							unboundRows = {};
			
 
				+						}
			
 
				+						unboundRows[rowIndex] = processingRow;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			return unboundRows;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.js
--- a/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.ts
@@ -0,0 +1,208 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the TabHolder control.
			
 
				+	 */
			
 
				+	export class TabHolder extends wijmo.Control {
			
 
				+		private _owner: FlexSheet;
			
 
				+
			
 
				+		// child controls
			
 
				+		private _hScrollbar: ScrollBar;
			
 
				+		private _sheetControl: SheetTabs;
			
 
				+
			
 
				+		// child elements
			
 
				+		private _divSheet: HTMLElement;
			
 
				+		private _divSplitter: HTMLElement;
			
 
				+		private _divRight: HTMLElement;
			
 
				+		private _divHScrollbar: HTMLElement;
			
 
				+
			
 
				+		// event handler
			
 
				+		private _funSplitterMousedown: (ev: MouseEvent) => any;
			
 
				+		private _splitterMousedownHdl = this._splitterMousedownHandler.bind(this);
			
 
				+
			
 
				+		private _startPos: number;
			
 
				+
			
 
				+		static controlTemplate = '<div>' +
			
 
				+		'<div wj-part="left" style ="float:left;height:100%;overflow:hidden"></div>' +  // left sheet
			
 
				+		'<div wj-part="splitter" style="float:left;height:100%;width:6px;background-color:#e9eaee;padding:2px;cursor:e-resize"><div style="background-color:#8a9eb2;height:100%"></div></div>' + // splitter
			
 
				+		'<div wj-part="right" style="float:left;height:100%;background-color:#e9eaee">' +
			
 
				+		// We will use the native scrollbar of the flexgrid instead of the custom scrollbar of flexsheet (TFS 121971)
			
 
				+		'<div wj-part="hscrollbar" style="float:none;height:100%;border-left:1px solid #8a9eb2; padding-top:1px; display: none;"></div>' + // right scrollbar
			
 
				+		'</div>' +
			
 
				+		'</div>';
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a TabHolder control.
			
 
				+		 *
			
 
				+		 * @param element The DOM element that will host the control, or a jQuery selector (e.g. '#theCtrl').
			
 
				+		 * @param flex FlexSheet control what the TabHolder control works with.
			
 
				+		 */
			
 
				+		constructor(element: any, owner: FlexSheet) {
			
 
				+			super(element);
			
 
				+			this._owner = owner;
			
 
				+
			
 
				+			if (this.hostElement.attributes['tabindex']) {
			
 
				+				this.hostElement.attributes.removeNamedItem('tabindex');
			
 
				+			}
			
 
				+			// instantiate and apply template
			
 
				+			this.applyTemplate('', this.getTemplate(), {
			
 
				+				_divSheet: 'left',
			
 
				+				_divSplitter: 'splitter',
			
 
				+				_divRight: 'right',
			
 
				+				_divHScrollbar: 'hscrollbar'
			
 
				+			});
			
 
				+
			
 
				+			this._init();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the SheetTabs control
			
 
				+		 */
			
 
				+		get SheetControl(): SheetTabs {
			
 
				+			return this._sheetControl;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the ScrollBar control
			
 
				+		 */
			
 
				+		get ScrollBar(): ScrollBar {
			
 
				+			return this._hScrollbar;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets or sets the visible of the TabHolder control
			
 
				+		 */
			
 
				+		get visible(): boolean {
			
 
				+			return this.hostElement.style.display !== 'none';
			
 
				+		}
			
 
				+		set visible(value: boolean) {
			
 
				+			this.hostElement.style.display = value ? 'block' : 'none'; 
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the Blanket size for the TabHolder control.
			
 
				+		 */
			
 
				+		public getSheetBlanketSize(): number {
			
 
				+			var scrollBarSize = ScrollBar.getSize();
			
 
				+			return (scrollBarSize === 0 ? 20 : scrollBarSize + 3);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Adjust the size of the TabHolder control 
			
 
				+		 */
			
 
				+		public adjustSize() {
			
 
				+			var hScrollDis = this._owner.scrollSize.width - this._owner.clientSize.width,
			
 
				+				vScrollDis = this._owner.scrollSize.height - this._owner.clientSize.height,
			
 
				+				eParent = this._divSplitter.parentElement,
			
 
				+				//totalWidth: number,
			
 
				+				leftWidth: number;
			
 
				+
			
 
				+			if (hScrollDis <= 0) {
			
 
				+				eParent.style.minWidth = '100px';
			
 
				+				this._divSplitter.style.display = 'none';
			
 
				+				this._divRight.style.display = 'none';
			
 
				+				this._divSheet.style.width = '100%';
			
 
				+				this._divSplitter.removeEventListener('mousedown', this._splitterMousedownHdl, true);
			
 
				+				this._hScrollbar.scrolled.removeHandler(this._scrollbarScrolled, this);
			
 
				+			} else {
			
 
				+				eParent.style.minWidth = '300px';
			
 
				+				this._divSplitter.style.display = 'none';
			
 
				+				this._divRight.style.display = 'none';
			
 
				+				//totalWidth = eParent.clientWidth - this._divSplitter.offsetWidth;
			
 
				+				this._divSheet.style.width = '100%';
			
 
				+				//leftWidth = Math.ceil(totalWidth / 2);
			
 
				+				//this._divSheet.style.width = leftWidth + 'px';
			
 
				+				//this._divRight.style.width = (totalWidth - leftWidth) + 'px';
			
 
				+				if (vScrollDis <= 0) {
			
 
				+					this._divHScrollbar.style.marginRight = '0px';
			
 
				+				} else {
			
 
				+					this._divHScrollbar.style.marginRight = ScrollBar.getSize() + 'px';
			
 
				+				}
			
 
				+				this._hScrollbar.scrollDistance = hScrollDis;
			
 
				+				this._hScrollbar.scrollValue = -this._owner.scrollPosition.x;
			
 
				+				this._divSplitter.removeEventListener('mousedown', this._splitterMousedownHdl, true);
			
 
				+				this._divSplitter.addEventListener('mousedown', this._splitterMousedownHdl, true);
			
 
				+				this._hScrollbar.scrolled.removeHandler(this._scrollbarScrolled, this);
			
 
				+				this._hScrollbar.scrolled.addHandler(this._scrollbarScrolled, this);
			
 
				+				this._hScrollbar.refresh();
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		// Init the size of the splitter.
			
 
				+		// And init the ScrollBar, SheetTabs control 
			
 
				+		private _init() {
			
 
				+			var self = this;
			
 
				+			self._funSplitterMousedown = function (e: MouseEvent) {
			
 
				+				self._splitterMouseupHandler(e);
			
 
				+			};
			
 
				+			self._divSplitter.parentElement.style.height = self.getSheetBlanketSize() + 'px';
			
 
				+			//init scrollbar
			
 
				+			self._hScrollbar = new ScrollBar(self._divHScrollbar);
			
 
				+			//init sheet
			
 
				+			self._sheetControl = new SheetTabs(self._divSheet, this._owner);
			
 
				+			self._sheetControl.itemsSource = self._owner.sheets;
			
 
				+			self._owner.scrollPositionChanged.addHandler(() => {
			
 
				+				self._hScrollbar.scrollValue = -self._owner.scrollPosition.x;
			
 
				+			});
			
 
				+		}
			
 
				+
			
 
				+		// Mousedown event handler for the splitter
			
 
				+		private _splitterMousedownHandler(e: MouseEvent) {
			
 
				+			this._startPos = e.pageX;
			
 
				+			document.addEventListener('mousemove', this._splitterMousemoveHandler.bind(this), true);
			
 
				+			document.addEventListener('mouseup', this._funSplitterMousedown, true);
			
 
				+			e.preventDefault();
			
 
				+		}
			
 
				+
			
 
				+		// Mousemove event handler for the splitter
			
 
				+		private _splitterMousemoveHandler(e: MouseEvent) {
			
 
				+			if (this._startPos === null || typeof (this._startPos) === 'undefined') {
			
 
				+				return;
			
 
				+			}
			
 
				+			this._adjustDis(e.pageX - this._startPos);
			
 
				+		}
			
 
				+
			
 
				+		// Mouseup event handler for the splitter
			
 
				+		private _splitterMouseupHandler(e: MouseEvent) {
			
 
				+			document.removeEventListener('mousemove', this._splitterMousemoveHandler, true);
			
 
				+			document.removeEventListener('mouseup', this._funSplitterMousedown, true);
			
 
				+			this._adjustDis(e.pageX - this._startPos);
			
 
				+			this._startPos = null;
			
 
				+		}
			
 
				+
			
 
				+		// Adjust the distance for the splitter
			
 
				+		private _adjustDis(dis: number) {
			
 
				+			var rightWidth = this._divRight.offsetWidth - dis,
			
 
				+				leftWidth = this._divSheet.offsetWidth + dis;
			
 
				+
			
 
				+			if (rightWidth <= 100) {
			
 
				+				rightWidth = 100;
			
 
				+				dis = this._divRight.offsetWidth - rightWidth;
			
 
				+				leftWidth = this._divSheet.offsetWidth + dis;
			
 
				+			} else if (leftWidth <= 100) {
			
 
				+				leftWidth = 100;
			
 
				+				dis = leftWidth - this._divSheet.offsetWidth;
			
 
				+				rightWidth = this._divRight.offsetWidth - dis;
			
 
				+			}
			
 
				+			if (dis == 0) {
			
 
				+				return;
			
 
				+			}
			
 
				+			this._divRight.style.width = rightWidth + 'px';
			
 
				+			this._divSheet.style.width = leftWidth + 'px';
			
 
				+			this._startPos = this._startPos + dis;
			
 
				+			this._hScrollbar.invalidate(false);
			
 
				+		}
			
 
				+
			
 
				+		// scrolled event handler for the scrollbar control
			
 
				+		private _scrollbarScrolled(sender, e) {
			
 
				+			var hs = <ScrollBar> sender,
			
 
				+				scrollValue = -hs.scrollValue;
			
 
				+			
			
 
				+			if (scrollValue !== this._owner.scrollPosition.x) {
			
 
				+				this._owner._ptScrl = new wijmo.Point(scrollValue, this._owner.scrollPosition.y);
			
 
				+				this._owner.refresh(true);
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.js
@@ -0,0 +1,175 @@
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the UndoableStack class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for the Flexsheet control.
			
 
				+            */
			
 
				+            var UndoableStack = (function () {
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:UndoableStack class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the UndoableStack works for.
			
 
				+                */
			
 
				+                function UndoableStack(owner) {
			
 
				+                    var _this = this;
			
 
				+                    this.MAX_STACK_SIZE = 500;
			
 
				+                    this._stack = [];
			
 
				+                    this._pointer = -1;
			
 
				+                    this._resizingTriggered = false;
			
 
				+                    /**
			
 
				+                    * Occurs when the undoable stack changed.
			
 
				+                    */
			
 
				+                    this.undoableStackChanged = new wijmo.Event();
			
 
				+                    this._owner = owner;
			
 
				+
			
 
				+                    // Handles the cell edit action for editing cell
			
 
				+                    this._owner.prepareCellForEdit.addHandler(this._initCellEditAction, this);
			
 
				+                    this._owner.cellEditEnded.addHandler(this._afterProcessCellEditAction, this);
			
 
				+
			
 
				+                    // Handles the cell edit action for copy\paste operation
			
 
				+                    this._owner.pasting.addHandler(this._initCellEditAction, this);
			
 
				+                    this._owner.pasted.addHandler(this._afterProcessCellEditAction, this);
			
 
				+
			
 
				+                    // Handles the resize column action
			
 
				+                    this._owner.resizingColumn.addHandler(function (sender, e) {
			
 
				+                        if (!_this._resizingTriggered) {
			
 
				+                            _this._pendingAction = new sheet._ColumnResizeAction(_this._owner, e.col);
			
 
				+                            _this._resizingTriggered = true;
			
 
				+                        }
			
 
				+                    }, this);
			
 
				+                    this._owner.resizedColumn.addHandler(function (sender, e) {
			
 
				+                        if (_this._pendingAction instanceof sheet._ColumnResizeAction && _this._pendingAction.saveNewState()) {
			
 
				+                            _this.addAction(_this._pendingAction);
			
 
				+                        }
			
 
				+                        _this._pendingAction = null;
			
 
				+                        _this._resizingTriggered = false;
			
 
				+                    }, this);
			
 
				+
			
 
				+                    // Handles the resize row action
			
 
				+                    this._owner.resizingRow.addHandler(function (sender, e) {
			
 
				+                        if (!_this._resizingTriggered) {
			
 
				+                            _this._pendingAction = new sheet._RowResizeAction(_this._owner, e.row);
			
 
				+                            _this._resizingTriggered = true;
			
 
				+                        }
			
 
				+                    }, this);
			
 
				+                    this._owner.resizedRow.addHandler(function (sender, e) {
			
 
				+                        if (_this._pendingAction instanceof sheet._RowResizeAction && _this._pendingAction.saveNewState()) {
			
 
				+                            _this.addAction(_this._pendingAction);
			
 
				+                        }
			
 
				+                        _this._pendingAction = null;
			
 
				+                        _this._resizingTriggered = false;
			
 
				+                    }, this);
			
 
				+                }
			
 
				+                Object.defineProperty(UndoableStack.prototype, "canUndo", {
			
 
				+                    /**
			
 
				+                    * Check whether undo can be done.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._pointer > -1 && this._pointer < this._stack.length;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                Object.defineProperty(UndoableStack.prototype, "canRedo", {
			
 
				+                    /**
			
 
				+                    * Check whether redo can be done.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._pointer + 1 > -1 && this._pointer + 1 < this._stack.length;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                /**
			
 
				+                * Raises the undoableStackChanged event.
			
 
				+                */
			
 
				+                UndoableStack.prototype.onUndoableStackChanged = function () {
			
 
				+                    this.undoableStackChanged.raise(this);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Executes an undo command.
			
 
				+                */
			
 
				+                UndoableStack.prototype.undo = function () {
			
 
				+                    var action;
			
 
				+                    if (this.canUndo) {
			
 
				+                        action = this._stack[this._pointer];
			
 
				+                        this._beforeUndoRedo(action);
			
 
				+                        action.undo();
			
 
				+                        this._pointer--;
			
 
				+                        this.onUndoableStackChanged();
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Executes an redo command.
			
 
				+                */
			
 
				+                UndoableStack.prototype.redo = function () {
			
 
				+                    var action;
			
 
				+                    if (this.canRedo) {
			
 
				+                        this._pointer++;
			
 
				+                        action = this._stack[this._pointer];
			
 
				+                        this._beforeUndoRedo(action);
			
 
				+                        action.redo();
			
 
				+                        this.onUndoableStackChanged();
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Add the undoable action into the undo stack.
			
 
				+                */
			
 
				+                UndoableStack.prototype.addAction = function (action) {
			
 
				+                    // trim stack
			
 
				+                    if (this._stack.length > 0 && this._stack.length > this._pointer + 1) {
			
 
				+                        this._stack.splice(this._pointer + 1, this._stack.length - this._pointer - 1);
			
 
				+                    }
			
 
				+                    if (this._stack.length >= this.MAX_STACK_SIZE) {
			
 
				+                        this._stack.splice(0, this._stack.length - this.MAX_STACK_SIZE + 1);
			
 
				+                    }
			
 
				+
			
 
				+                    // update pointer and add action to stack
			
 
				+                    this._pointer = this._stack.length;
			
 
				+                    this._stack.push(action);
			
 
				+                    this.onUndoableStackChanged();
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Clear the undo stack.
			
 
				+                */
			
 
				+                UndoableStack.prototype.clear = function () {
			
 
				+                    this._stack.length = 0;
			
 
				+                };
			
 
				+
			
 
				+                // initialize the cell edit action.
			
 
				+                UndoableStack.prototype._initCellEditAction = function () {
			
 
				+                    this._pendingAction = new sheet._EditAction(this._owner);
			
 
				+                };
			
 
				+
			
 
				+                // after processing the cell edit action.
			
 
				+                UndoableStack.prototype._afterProcessCellEditAction = function () {
			
 
				+                    if (this._pendingAction instanceof sheet._EditAction && this._pendingAction.saveNewState()) {
			
 
				+                        this.addAction(this._pendingAction);
			
 
				+                    }
			
 
				+                    this._pendingAction = null;
			
 
				+                };
			
 
				+
			
 
				+                // Called before an action is undone or redone.
			
 
				+                UndoableStack.prototype._beforeUndoRedo = function (action) {
			
 
				+                    this._owner.selectedSheetIndex = action.sheetIndex;
			
 
				+                };
			
 
				+                return UndoableStack;
			
 
				+            })();
			
 
				+            sheet.UndoableStack = UndoableStack;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=UndoableStack.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.ts
@@ -0,0 +1,160 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the UndoableStack class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for the Flexsheet control.
			
 
				+	 */
			
 
				+	export class UndoableStack {
			
 
				+		private MAX_STACK_SIZE = 500;
			
 
				+		private _owner: FlexSheet;
			
 
				+		private _stack = [];
			
 
				+		private _pointer = -1;
			
 
				+		private _pendingAction: _UndoableAction;
			
 
				+		private _resizingTriggered = false;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:UndoableStack class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the UndoableStack works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			this._owner = owner;
			
 
				+
			
 
				+			// Handles the cell edit action for editing cell
			
 
				+			this._owner.prepareCellForEdit.addHandler(this._initCellEditAction, this);
			
 
				+			this._owner.cellEditEnded.addHandler(this._afterProcessCellEditAction, this);
			
 
				+
			
 
				+			// Handles the cell edit action for copy\paste operation
			
 
				+			this._owner.pasting.addHandler(this._initCellEditAction, this);
			
 
				+			this._owner.pasted.addHandler(this._afterProcessCellEditAction, this);
			
 
				+
			
 
				+			// Handles the resize column action
			
 
				+			this._owner.resizingColumn.addHandler((sender: FlexGrid, e: CellRangeEventArgs) => {
			
 
				+				if (!this._resizingTriggered) {
			
 
				+					this._pendingAction = new _ColumnResizeAction(this._owner, e.col);
			
 
				+					this._resizingTriggered = true;
			
 
				+				}
			
 
				+			}, this)
			
 
				+			this._owner.resizedColumn.addHandler((sender: FlexGrid, e: CellRangeEventArgs) => {
			
 
				+				if (this._pendingAction instanceof _ColumnResizeAction && this._pendingAction.saveNewState()) {
			
 
				+					this.addAction(this._pendingAction);
			
 
				+				}
			
 
				+				this._pendingAction = null;
			
 
				+				this._resizingTriggered = false;
			
 
				+			}, this);
			
 
				+
			
 
				+			// Handles the resize row action
			
 
				+			this._owner.resizingRow.addHandler((sender: FlexGrid, e: CellRangeEventArgs) => {
			
 
				+				if (!this._resizingTriggered) {
			
 
				+					this._pendingAction = new _RowResizeAction(this._owner, e.row);
			
 
				+					this._resizingTriggered = true;
			
 
				+				}
			
 
				+			}, this)
			
 
				+			this._owner.resizedRow.addHandler((sender: FlexGrid, e: CellRangeEventArgs) => {
			
 
				+				if (this._pendingAction instanceof _RowResizeAction && this._pendingAction.saveNewState()) {
			
 
				+					this.addAction(this._pendingAction);
			
 
				+				}
			
 
				+				this._pendingAction = null;
			
 
				+				this._resizingTriggered = false;
			
 
				+			}, this);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Check whether undo can be done.
			
 
				+		 */
			
 
				+		get canUndo(): boolean {
			
 
				+			return this._pointer > -1 && this._pointer < this._stack.length;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Check whether redo can be done.
			
 
				+		 */
			
 
				+		get canRedo(): boolean {
			
 
				+			return this._pointer + 1 > -1 && this._pointer + 1 < this._stack.length;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Occurs when the undoable stack changed.
			
 
				+		 */
			
 
				+		undoableStackChanged = new wijmo.Event();
			
 
				+		/**
			
 
				+		 * Raises the undoableStackChanged event.
			
 
				+		 */
			
 
				+		onUndoableStackChanged() {
			
 
				+			this.undoableStackChanged.raise(this);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Executes an undo command.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			var action: _UndoableAction;
			
 
				+			if (this.canUndo) {
			
 
				+				action = this._stack[this._pointer];
			
 
				+				this._beforeUndoRedo(action);
			
 
				+				action.undo();
			
 
				+				this._pointer--;
			
 
				+				this.onUndoableStackChanged();
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Executes an redo command.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			var action: _UndoableAction;
			
 
				+			if (this.canRedo) {
			
 
				+				this._pointer++;
			
 
				+				action = this._stack[this._pointer];
			
 
				+				this._beforeUndoRedo(action);
			
 
				+				action.redo();
			
 
				+				this.onUndoableStackChanged();
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Add the undoable action into the undo stack.
			
 
				+		 */
			
 
				+		addAction(action: _UndoableAction) {
			
 
				+			// trim stack
			
 
				+			if (this._stack.length > 0 && this._stack.length > this._pointer + 1) {
			
 
				+				this._stack.splice(this._pointer + 1, this._stack.length - this._pointer - 1);
			
 
				+			}
			
 
				+			if (this._stack.length >= this.MAX_STACK_SIZE) {
			
 
				+				this._stack.splice(0, this._stack.length - this.MAX_STACK_SIZE + 1);
			
 
				+			}
			
 
				+
			
 
				+			// update pointer and add action to stack
			
 
				+			this._pointer = this._stack.length;
			
 
				+			this._stack.push(action);
			
 
				+			this.onUndoableStackChanged();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Clear the undo stack.
			
 
				+		 */
			
 
				+		clear() {
			
 
				+			this._stack.length = 0;
			
 
				+		}
			
 
				+
			
 
				+		// initialize the cell edit action.
			
 
				+		private _initCellEditAction() {
			
 
				+			this._pendingAction = new _EditAction(this._owner);
			
 
				+		}
			
 
				+
			
 
				+		// after processing the cell edit action.
			
 
				+		private _afterProcessCellEditAction() {
			
 
				+			if (this._pendingAction instanceof _EditAction && this._pendingAction.saveNewState()) {
			
 
				+				this.addAction(this._pendingAction);
			
 
				+			}
			
 
				+			this._pendingAction = null;
			
 
				+		}
			
 
				+
			
 
				+		// Called before an action is undone or redone.
			
 
				+		private _beforeUndoRedo(action: _UndoableAction) {
			
 
				+			this._owner.selectedSheetIndex = action.sheetIndex;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.js
--- a/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.ts
--- a/src/scripts/wijmo/wijmo.grid.sheet/_Expression.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_Expression.js
@@ -0,0 +1,413 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the base class that represents parsed expressions.
			
 
				+            */
			
 
				+            var _Expression = (function () {
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:Expression class.
			
 
				+                *
			
 
				+                * @param arg This parameter is used to build the token for the expression.
			
 
				+                */
			
 
				+                function _Expression(arg) {
			
 
				+                    if (arg) {
			
 
				+                        if (arg instanceof sheet.Token) {
			
 
				+                            this._token = arg;
			
 
				+                        } else {
			
 
				+                            this._token = new sheet.Token(arg, 18 /* ATOM */, 5 /* LITERAL */);
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        this._token = new sheet.Token(null, 18 /* ATOM */, 6 /* IDENTIFIER */);
			
 
				+                    }
			
 
				+                }
			
 
				+                Object.defineProperty(_Expression.prototype, "token", {
			
 
				+                    /**
			
 
				+                    * Gets the token of the expression.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._token;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                /**
			
 
				+                * Evaluates the expression.
			
 
				+                */
			
 
				+                _Expression.prototype.evaluate = function () {
			
 
				+                    if (this._token.tokenType !== 5 /* LITERAL */) {
			
 
				+                        throw "Bad expression.";
			
 
				+                    }
			
 
				+                    return this._token.value;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Parse the expression to a string value.
			
 
				+                *
			
 
				+                * @param x The @see:Expression need be parsed to string value.
			
 
				+                */
			
 
				+                _Expression.toString = function (x) {
			
 
				+                    var v = x.evaluate();
			
 
				+                    return v ? v.toString() : '';
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Parse the expression to a number value.
			
 
				+                *
			
 
				+                * @param x The @see:Expression need be parsed to number value.
			
 
				+                */
			
 
				+                _Expression.toNumber = function (x) {
			
 
				+                    // evaluate
			
 
				+                    var v = x.evaluate();
			
 
				+
			
 
				+                    // handle numbers
			
 
				+                    if (wijmo.isNumber(v)) {
			
 
				+                        return v;
			
 
				+                    }
			
 
				+
			
 
				+                    // handle booleans
			
 
				+                    if (wijmo.isBoolean(v)) {
			
 
				+                        return v ? 1 : 0;
			
 
				+                    }
			
 
				+
			
 
				+                    // handle dates
			
 
				+                    if (wijmo.isDate(v)) {
			
 
				+                        return this._toOADate(v);
			
 
				+                    }
			
 
				+
			
 
				+                    // handle strings
			
 
				+                    if (wijmo.isString(v)) {
			
 
				+                        return parseFloat(v);
			
 
				+                    }
			
 
				+
			
 
				+                    // handle everything else
			
 
				+                    return wijmo.changeType(v, 2 /* Number */, '');
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Parse the expression to a boolean value.
			
 
				+                *
			
 
				+                * @param x The @see:Expression need be parsed to boolean value.
			
 
				+                */
			
 
				+                _Expression.toBoolean = function (x) {
			
 
				+                    // evaluate
			
 
				+                    var v = x.evaluate();
			
 
				+
			
 
				+                    // handle booleans
			
 
				+                    if (wijmo.isBoolean(v)) {
			
 
				+                        return v;
			
 
				+                    }
			
 
				+
			
 
				+                    // handle numbers
			
 
				+                    if (wijmo.isNumber(v)) {
			
 
				+                        return v === 0 ? false : true;
			
 
				+                    }
			
 
				+
			
 
				+                    // handle everything else
			
 
				+                    return wijmo.changeType(v, 3 /* Boolean */, '');
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Parse the expression to a date value.
			
 
				+                *
			
 
				+                * @param x The @see:Expression need be parsed to date value.
			
 
				+                */
			
 
				+                _Expression.toDate = function (x) {
			
 
				+                    // evaluate
			
 
				+                    var v = x.evaluate();
			
 
				+
			
 
				+                    // handle dates
			
 
				+                    if (wijmo.isDate(v)) {
			
 
				+                        return v;
			
 
				+                    }
			
 
				+
			
 
				+                    // handle numbers
			
 
				+                    if (wijmo.isNumber(v)) {
			
 
				+                        return this._fromOADate(v);
			
 
				+                    }
			
 
				+
			
 
				+                    // handle everything else
			
 
				+                    return wijmo.changeType(v, 4 /* Date */, '');
			
 
				+                };
			
 
				+
			
 
				+                // convert the common date to OLE Automation date.
			
 
				+                _Expression._toOADate = function (val) {
			
 
				+                    var epoch = Date.UTC(1899, 11, 30), currentUTC = Date.UTC(val.getFullYear(), val.getMonth(), val.getDate(), val.getHours(), val.getMinutes(), val.getSeconds(), val.getMilliseconds());
			
 
				+
			
 
				+                    return (currentUTC - epoch) / 8.64e7;
			
 
				+                };
			
 
				+
			
 
				+                // convert the OLE Automation date to common date.
			
 
				+                _Expression._fromOADate = function (oADate) {
			
 
				+                    var epoch = Date.UTC(1899, 11, 30);
			
 
				+
			
 
				+                    return new Date(oADate * 8.64e7 + epoch);
			
 
				+                };
			
 
				+                return _Expression;
			
 
				+            })();
			
 
				+            sheet._Expression = _Expression;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the unary expression class.
			
 
				+            * For e.g. -1.23.
			
 
				+            */
			
 
				+            var _UnaryExpression = (function (_super) {
			
 
				+                __extends(_UnaryExpression, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:UnaryExpression class.
			
 
				+                *
			
 
				+                * @param arg This parameter is used to build the token for the expression.
			
 
				+                * @param expr The @see:Expression instance for evluating the UnaryExpression.
			
 
				+                */
			
 
				+                function _UnaryExpression(arg, expr) {
			
 
				+                    _super.call(this, arg);
			
 
				+
			
 
				+                    this._expr = expr;
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the evaluate function of base class.
			
 
				+                */
			
 
				+                _UnaryExpression.prototype.evaluate = function () {
			
 
				+                    if (this.token.tokenID === 7 /* SUB */) {
			
 
				+                        return -_Expression.toNumber(this._expr);
			
 
				+                    }
			
 
				+
			
 
				+                    if (this.token.tokenID === 6 /* ADD */) {
			
 
				+                        return +_Expression.toNumber(this._expr);
			
 
				+                    }
			
 
				+
			
 
				+                    throw "Bad expression.";
			
 
				+                };
			
 
				+                return _UnaryExpression;
			
 
				+            })(_Expression);
			
 
				+            sheet._UnaryExpression = _UnaryExpression;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the binary expression class.
			
 
				+            * For e.g. 1 + 1.
			
 
				+            */
			
 
				+            var _BinaryExpression = (function (_super) {
			
 
				+                __extends(_BinaryExpression, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:BinaryExpression class.
			
 
				+                *
			
 
				+                * @param arg This parameter is used to build the token for the expression.
			
 
				+                * @param leftExpr The @see:Expression instance for evluating the BinaryExpression.
			
 
				+                * @param rightExpr The @see:Expression instance for evluating the BinaryExpression.
			
 
				+                */
			
 
				+                function _BinaryExpression(arg, leftExpr, rightExpr) {
			
 
				+                    _super.call(this, arg);
			
 
				+
			
 
				+                    this._leftExpr = leftExpr;
			
 
				+                    this._rightExpr = rightExpr;
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the evaluate function of base class.
			
 
				+                */
			
 
				+                _BinaryExpression.prototype.evaluate = function () {
			
 
				+                    var leftValue = _Expression.toNumber(this._leftExpr), rightValue = _Expression.toNumber(this._rightExpr), compareVal = leftValue - rightValue, result;
			
 
				+
			
 
				+                    // handle comparisons
			
 
				+                    if (this.token.tokenType === 0 /* COMPARE */) {
			
 
				+                        switch (this.token.tokenID) {
			
 
				+                            case 0 /* GT */:
			
 
				+                                return compareVal > 0;
			
 
				+                            case 1 /* LT */:
			
 
				+                                return compareVal < 0;
			
 
				+                            case 2 /* GE */:
			
 
				+                                return compareVal >= 0;
			
 
				+                            case 3 /* LE */:
			
 
				+                                return compareVal <= 0;
			
 
				+                            case 4 /* EQ */:
			
 
				+                                return compareVal === 0;
			
 
				+                            case 5 /* NE */:
			
 
				+                                return compareVal !== 0;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    switch (this.token.tokenID) {
			
 
				+                        case 6 /* ADD */:
			
 
				+                            result = leftValue + rightValue;
			
 
				+                            break;
			
 
				+                        case 7 /* SUB */:
			
 
				+                            result = leftValue - rightValue;
			
 
				+                            break;
			
 
				+                        case 8 /* MUL */:
			
 
				+                            result = leftValue * rightValue;
			
 
				+                            break;
			
 
				+                        case 9 /* DIV */:
			
 
				+                            result = leftValue / rightValue;
			
 
				+                            break;
			
 
				+                        case 10 /* DIVINT */:
			
 
				+                            result = Math.floor(leftValue / rightValue);
			
 
				+                            break;
			
 
				+                        case 11 /* MOD */:
			
 
				+                            result = Math.floor(leftValue % rightValue);
			
 
				+                            break;
			
 
				+                        case 12 /* POWER */:
			
 
				+                            if (rightValue === 0.0) {
			
 
				+                                result = 1.0;
			
 
				+                            }
			
 
				+                            if (rightValue === 0.5) {
			
 
				+                                result = Math.sqrt(leftValue);
			
 
				+                            }
			
 
				+                            if (rightValue === 1.0) {
			
 
				+                                result = leftValue;
			
 
				+                            }
			
 
				+                            if (rightValue === 2.0) {
			
 
				+                                result = leftValue * leftValue;
			
 
				+                            }
			
 
				+                            if (rightValue === 3.0) {
			
 
				+                                result = leftValue * leftValue * leftValue;
			
 
				+                            }
			
 
				+                            if (rightValue === 4.0) {
			
 
				+                                result = leftValue * leftValue * leftValue * leftValue;
			
 
				+                            }
			
 
				+                            result = Math.pow(leftValue, rightValue);
			
 
				+                            break;
			
 
				+                        default:
			
 
				+                            result = NaN;
			
 
				+                            break;
			
 
				+                    }
			
 
				+
			
 
				+                    if (!isNaN(result)) {
			
 
				+                        return result;
			
 
				+                    }
			
 
				+
			
 
				+                    throw "Bad expression.";
			
 
				+                };
			
 
				+                return _BinaryExpression;
			
 
				+            })(_Expression);
			
 
				+            sheet._BinaryExpression = _BinaryExpression;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the cell range expression class.
			
 
				+            * For e.g. A1 or A1:B2.
			
 
				+            */
			
 
				+            var _CellRangeExpression = (function (_super) {
			
 
				+                __extends(_CellRangeExpression, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:CellRangeExpression class.
			
 
				+                *
			
 
				+                * @param cells The @see:CellRange instance represents the cell range for the CellRangeExpression.
			
 
				+                * @param flex The @see:FlexSheet instance for evluating the value for the CellRangeExpression.
			
 
				+                */
			
 
				+                function _CellRangeExpression(cells, flex) {
			
 
				+                    _super.call(this);
			
 
				+
			
 
				+                    this._cells = cells;
			
 
				+                    this._flex = flex;
			
 
				+                    this._evalutingRange = {};
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the evaluate function of base class.
			
 
				+                */
			
 
				+                _CellRangeExpression.prototype.evaluate = function () {
			
 
				+                    return this._getCellValue(this._cells);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Gets the value list for each cell inside the cell range.
			
 
				+                */
			
 
				+                _CellRangeExpression.prototype.getValues = function () {
			
 
				+                    var vals = [], valIndex = 0, rowIndex, columnIndex, cellValue;
			
 
				+
			
 
				+                    for (rowIndex = this._cells.topRow; rowIndex <= this._cells.bottomRow; rowIndex++) {
			
 
				+                        if (rowIndex >= this._flex.rows.length) {
			
 
				+                            throw 'The cell reference is out of the cell range of the flexsheet.';
			
 
				+                        }
			
 
				+                        for (columnIndex = this._cells.leftCol; columnIndex <= this._cells.rightCol; columnIndex++) {
			
 
				+                            if (columnIndex >= this._flex.columns.length) {
			
 
				+                                throw 'The cell reference is out of the cell range of the flexsheet.';
			
 
				+                            }
			
 
				+                            cellValue = this._flex.getCellData(rowIndex, columnIndex, false);
			
 
				+                            vals[valIndex] = cellValue ? this._getCellValue(new grid.CellRange(rowIndex, columnIndex)) : '';
			
 
				+                            valIndex++;
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    return vals;
			
 
				+                };
			
 
				+
			
 
				+                Object.defineProperty(_CellRangeExpression.prototype, "cells", {
			
 
				+                    /**
			
 
				+                    * Gets the cell range of the CellRangeExpression.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._cells;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                // Get cell value for a cell.
			
 
				+                _CellRangeExpression.prototype._getCellValue = function (cell) {
			
 
				+                    var data;
			
 
				+
			
 
				+                    if (this._evalutingRange[cell]) {
			
 
				+                        throw "Circular Reference";
			
 
				+                    }
			
 
				+
			
 
				+                    try  {
			
 
				+                        if (this._flex) {
			
 
				+                            this._evalutingRange[cell] = true;
			
 
				+                            data = this._flex.getCellData(cell.row, cell.col, false);
			
 
				+                            if (wijmo.isString(data) && data[0] === '=') {
			
 
				+                                return this._flex.evaluate(data, false);
			
 
				+                            } else {
			
 
				+                                return data;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    } finally {
			
 
				+                        delete this._evalutingRange[cell];
			
 
				+                    }
			
 
				+
			
 
				+                    return '';
			
 
				+                };
			
 
				+                return _CellRangeExpression;
			
 
				+            })(_Expression);
			
 
				+            sheet._CellRangeExpression = _CellRangeExpression;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the function expression class.
			
 
				+            * For e.g. sum(1,2,3).
			
 
				+            */
			
 
				+            var _FunctionExpression = (function (_super) {
			
 
				+                __extends(_FunctionExpression, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:FunctionExpression class.
			
 
				+                *
			
 
				+                * @param func The @see:FunctionDefinition instance keeps function name, parameter counts, and function.
			
 
				+                * @param params The parameter list that the function of the @see:FunctionDefinition instance needs.
			
 
				+                */
			
 
				+                function _FunctionExpression(func, params) {
			
 
				+                    _super.call(this);
			
 
				+
			
 
				+                    this._funcDefinition = func;
			
 
				+                    this._params = params;
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the evaluate function of base class.
			
 
				+                */
			
 
				+                _FunctionExpression.prototype.evaluate = function () {
			
 
				+                    return this._funcDefinition.func(this._params);
			
 
				+                };
			
 
				+                return _FunctionExpression;
			
 
				+            })(_Expression);
			
 
				+            sheet._FunctionExpression = _FunctionExpression;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=_Expression.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/_Expression.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_Expression.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/_Expression.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_Expression.ts
@@ -0,0 +1,400 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the base class that represents parsed expressions.
			
 
				+	 */
			
 
				+	export class _Expression {
			
 
				+		private _token: Token;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:Expression class.
			
 
				+		 *
			
 
				+		 * @param arg This parameter is used to build the token for the expression.
			
 
				+		 */
			
 
				+		constructor(arg?: any) {
			
 
				+			if (arg) {
			
 
				+				if (arg instanceof Token) {
			
 
				+					this._token = arg;
			
 
				+				} else {
			
 
				+					this._token = new Token(arg, TokenID.ATOM, TokenType.LITERAL);
			
 
				+				}
			
 
				+			} else {
			
 
				+				this._token = new Token(null, TokenID.ATOM, TokenType.IDENTIFIER);
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the token of the expression.
			
 
				+		 */
			
 
				+		get token(): Token {
			
 
				+			return this._token;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Evaluates the expression.
			
 
				+		 */
			
 
				+		evaluate(): any {
			
 
				+			if (this._token.tokenType !== TokenType.LITERAL) {
			
 
				+				throw "Bad expression.";
			
 
				+			}
			
 
				+			return this._token.value;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Parse the expression to a string value.
			
 
				+		 *
			
 
				+		 * @param x The @see:Expression need be parsed to string value.
			
 
				+		 */
			
 
				+		static toString(x: _Expression): string {
			
 
				+			var v = x.evaluate();
			
 
				+			return v ? v.toString() : '';
			
 
				+		 }
			
 
				+
			
 
				+		/**
			
 
				+		 * Parse the expression to a number value.
			
 
				+		 *
			
 
				+		 * @param x The @see:Expression need be parsed to number value.
			
 
				+		 */
			
 
				+		static toNumber(x: _Expression): number {
			
 
				+			// evaluate
			
 
				+			var v = x.evaluate();
			
 
				+
			
 
				+			// handle numbers
			
 
				+			if (isNumber(v)) {
			
 
				+				return v;
			
 
				+			}
			
 
				+
			
 
				+			// handle booleans
			
 
				+			if (isBoolean(v)) {
			
 
				+				return v ? 1 : 0;
			
 
				+			}
			
 
				+
			
 
				+			// handle dates
			
 
				+			if (isDate(v)) {
			
 
				+				return this._toOADate(v);
			
 
				+			}
			
 
				+
			
 
				+			// handle strings
			
 
				+			if (isString(v)) {
			
 
				+				return parseFloat(v);
			
 
				+			}
			
 
				+			// handle everything else
			
 
				+			return changeType(v, DataType.Number, '');
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Parse the expression to a boolean value.
			
 
				+		 *
			
 
				+		 * @param x The @see:Expression need be parsed to boolean value.
			
 
				+		 */
			
 
				+		static toBoolean(x: _Expression) {
			
 
				+			// evaluate
			
 
				+			var v = x.evaluate();
			
 
				+
			
 
				+			// handle booleans
			
 
				+			if (isBoolean(v)) {
			
 
				+				return v;
			
 
				+			}
			
 
				+
			
 
				+			// handle numbers
			
 
				+			if (isNumber(v)) {
			
 
				+				return v === 0 ? false : true;
			
 
				+			}
			
 
				+
			
 
				+			// handle everything else
			
 
				+			return changeType(v, DataType.Boolean, '');
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Parse the expression to a date value.
			
 
				+		 *
			
 
				+		 * @param x The @see:Expression need be parsed to date value.
			
 
				+		 */
			
 
				+		static toDate(x: _Expression) {
			
 
				+			// evaluate
			
 
				+			var v = x.evaluate();
			
 
				+
			
 
				+			// handle dates
			
 
				+			if (isDate(v)) {
			
 
				+				return v;
			
 
				+			}
			
 
				+
			
 
				+			// handle numbers
			
 
				+			if (isNumber(v)) {
			
 
				+				return this._fromOADate(v);
			
 
				+			}
			
 
				+
			
 
				+			// handle everything else
			
 
				+			return changeType(v, DataType.Date, '');
			
 
				+		}
			
 
				+
			
 
				+		// convert the common date to OLE Automation date.
			
 
				+		private static _toOADate(val: Date): number {
			
 
				+			var epoch = Date.UTC(1899, 11, 30), // 1899-12-30T00:00:00
			
 
				+				currentUTC = Date.UTC(val.getFullYear(), val.getMonth(), val.getDate(),
			
 
				+					val.getHours(), val.getMinutes(), val.getSeconds(), val.getMilliseconds());
			
 
				+
			
 
				+			return (currentUTC - epoch) / 8.64e7;
			
 
				+		}
			
 
				+
			
 
				+		// convert the OLE Automation date to common date.
			
 
				+		private static _fromOADate(oADate: number): Date {
			
 
				+			var epoch = Date.UTC(1899, 11, 30);
			
 
				+
			
 
				+			return new Date(oADate * 8.64e7 + epoch);
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the unary expression class.
			
 
				+	 * For e.g. -1.23.
			
 
				+	 */
			
 
				+	export class _UnaryExpression extends _Expression {
			
 
				+		private _expr: _Expression;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:UnaryExpression class.
			
 
				+		 *
			
 
				+		 * @param arg This parameter is used to build the token for the expression.
			
 
				+		 * @param expr The @see:Expression instance for evluating the UnaryExpression.
			
 
				+		 */
			
 
				+		constructor(arg: any, expr: _Expression) {
			
 
				+			super(arg);
			
 
				+
			
 
				+			this._expr = expr;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the evaluate function of base class.
			
 
				+		 */
			
 
				+		evaluate(): any {
			
 
				+			if (this.token.tokenID === TokenID.SUB) {
			
 
				+				return -_Expression.toNumber(this._expr);
			
 
				+			}
			
 
				+
			
 
				+			if (this.token.tokenID === TokenID.ADD) {
			
 
				+				return +_Expression.toNumber(this._expr);
			
 
				+			}
			
 
				+
			
 
				+			throw "Bad expression.";
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the binary expression class.
			
 
				+	 * For e.g. 1 + 1.
			
 
				+	 */
			
 
				+	export class _BinaryExpression extends _Expression {
			
 
				+		private _leftExpr: _Expression;
			
 
				+		private _rightExpr: _Expression;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:BinaryExpression class.
			
 
				+		 *
			
 
				+		 * @param arg This parameter is used to build the token for the expression.
			
 
				+		 * @param leftExpr The @see:Expression instance for evluating the BinaryExpression.
			
 
				+		 * @param rightExpr The @see:Expression instance for evluating the BinaryExpression.
			
 
				+		 */
			
 
				+		constructor(arg: any, leftExpr: _Expression, rightExpr: _Expression) {
			
 
				+			super(arg);
			
 
				+
			
 
				+			this._leftExpr = leftExpr;
			
 
				+			this._rightExpr = rightExpr;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the evaluate function of base class.
			
 
				+		 */
			
 
				+		evaluate(): any {
			
 
				+			var leftValue = _Expression.toNumber(this._leftExpr),
			
 
				+				rightValue = _Expression.toNumber(this._rightExpr),
			
 
				+				compareVal = leftValue - rightValue,
			
 
				+				result: number;
			
 
				+
			
 
				+			// handle comparisons
			
 
				+			if (this.token.tokenType === TokenType.COMPARE) {
			
 
				+				switch (this.token.tokenID) {
			
 
				+					case TokenID.GT: return compareVal > 0;
			
 
				+					case TokenID.LT: return compareVal < 0;
			
 
				+					case TokenID.GE: return compareVal >= 0;
			
 
				+					case TokenID.LE: return compareVal <= 0;
			
 
				+					case TokenID.EQ: return compareVal === 0;
			
 
				+					case TokenID.NE: return compareVal !== 0;
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			// handle everything else
			
 
				+			switch (this.token.tokenID) {
			
 
				+				case TokenID.ADD: 
			
 
				+					result = leftValue + rightValue;
			
 
				+					break;
			
 
				+				case TokenID.SUB: 
			
 
				+					result = leftValue - rightValue;
			
 
				+					break;
			
 
				+				case TokenID.MUL: 
			
 
				+					result = leftValue * rightValue;
			
 
				+					break;
			
 
				+				case TokenID.DIV: 
			
 
				+					result = leftValue / rightValue;
			
 
				+					break;
			
 
				+				case TokenID.DIVINT:
			
 
				+					result = Math.floor(leftValue / rightValue);
			
 
				+					break;
			
 
				+				case TokenID.MOD:
			
 
				+					result = Math.floor(leftValue % rightValue);
			
 
				+					break;
			
 
				+				case TokenID.POWER:
			
 
				+					if (rightValue === 0.0) {
			
 
				+						result = 1.0;
			
 
				+					}
			
 
				+					if (rightValue === 0.5) {
			
 
				+						result = Math.sqrt(leftValue);
			
 
				+					}
			
 
				+					if (rightValue === 1.0) {
			
 
				+						result = leftValue;
			
 
				+					}
			
 
				+					if (rightValue === 2.0) {
			
 
				+						result = leftValue * leftValue;
			
 
				+					}
			
 
				+					if (rightValue === 3.0) {
			
 
				+						result = leftValue * leftValue * leftValue;
			
 
				+					}
			
 
				+					if (rightValue === 4.0) {
			
 
				+						result = leftValue * leftValue * leftValue * leftValue;
			
 
				+					}
			
 
				+					result = Math.pow(leftValue, rightValue);
			
 
				+					break;
			
 
				+				default:
			
 
				+					result = NaN;
			
 
				+					break;
			
 
				+			}
			
 
				+
			
 
				+			if (!isNaN(result)) {
			
 
				+				return result;
			
 
				+			}
			
 
				+
			
 
				+			throw "Bad expression.";
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the cell range expression class.
			
 
				+	 * For e.g. A1 or A1:B2.
			
 
				+	 */
			
 
				+	export class _CellRangeExpression extends _Expression {
			
 
				+		private _cells: CellRange;
			
 
				+		private _flex: FlexSheet;
			
 
				+		private _evalutingRange: any;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:CellRangeExpression class.
			
 
				+		 *
			
 
				+		 * @param cells The @see:CellRange instance represents the cell range for the CellRangeExpression.
			
 
				+		 * @param flex The @see:FlexSheet instance for evluating the value for the CellRangeExpression.
			
 
				+		 */
			
 
				+		constructor(cells: CellRange, flex: FlexSheet) {
			
 
				+			super();
			
 
				+
			
 
				+			this._cells = cells;
			
 
				+			this._flex = flex;
			
 
				+			this._evalutingRange = {};
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the evaluate function of base class.
			
 
				+		 */
			
 
				+		evaluate(): any {
			
 
				+			return this._getCellValue(this._cells);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the value list for each cell inside the cell range.
			
 
				+		 */
			
 
				+		getValues(): any[] {
			
 
				+			var vals: any[] = [],
			
 
				+				valIndex: number = 0,
			
 
				+				rowIndex: number,
			
 
				+				columnIndex: number,
			
 
				+				cellValue: any;
			
 
				+
			
 
				+			for (rowIndex = this._cells.topRow; rowIndex <= this._cells.bottomRow; rowIndex++) {
			
 
				+				if (rowIndex >= this._flex.rows.length) {
			
 
				+					throw 'The cell reference is out of the cell range of the flexsheet.';
			
 
				+				}
			
 
				+				for (columnIndex = this._cells.leftCol; columnIndex <= this._cells.rightCol; columnIndex++) {
			
 
				+					if (columnIndex >= this._flex.columns.length) {
			
 
				+						throw 'The cell reference is out of the cell range of the flexsheet.';
			
 
				+					}
			
 
				+					cellValue = this._flex.getCellData(rowIndex, columnIndex, false);
			
 
				+					vals[valIndex] = cellValue ? this._getCellValue(new CellRange(rowIndex, columnIndex)) : '';
			
 
				+					valIndex++;
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			return vals;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the cell range of the CellRangeExpression.
			
 
				+		 */
			
 
				+		get cells(): CellRange {
			
 
				+			return this._cells;
			
 
				+		}
			
 
				+
			
 
				+		// Get cell value for a cell.
			
 
				+		private _getCellValue(cell: CellRange) {
			
 
				+			var data: any;
			
 
				+
			
 
				+			if (this._evalutingRange[cell]) {
			
 
				+				throw "Circular Reference";
			
 
				+			}
			
 
				+
			
 
				+			try {
			
 
				+				if (this._flex) {
			
 
				+					this._evalutingRange[cell] = true;
			
 
				+					data = this._flex.getCellData(cell.row, cell.col, false);
			
 
				+					if (isString(data) && <string>data[0] === '=') {
			
 
				+						return this._flex.evaluate(data, false);
			
 
				+					} else {
			
 
				+						return data;
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+			finally {
			
 
				+				delete this._evalutingRange[cell];
			
 
				+			}
			
 
				+
			
 
				+			return '';
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the function expression class.
			
 
				+	 * For e.g. sum(1,2,3).
			
 
				+	 */
			
 
				+	export class _FunctionExpression extends _Expression {
			
 
				+		private _funcDefinition: FunctionDefinition;
			
 
				+		private _params: Array<_Expression>;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:FunctionExpression class.
			
 
				+		 *
			
 
				+		 * @param func The @see:FunctionDefinition instance keeps function name, parameter counts, and function.
			
 
				+		 * @param params The parameter list that the function of the @see:FunctionDefinition instance needs.
			
 
				+		 */
			
 
				+		constructor(func: FunctionDefinition, params: Array<_Expression>) {
			
 
				+			super();
			
 
				+
			
 
				+			this._funcDefinition = func;
			
 
				+			this._params = params;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the evaluate function of base class.
			
 
				+		 */
			
 
				+		evaluate(): any {
			
 
				+			return this._funcDefinition.func(this._params);
			
 
				+		}
			
 
				+	}
			
 
				+} 
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.js
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.js
@@ -0,0 +1,705 @@
 
				+var __extends = this.__extends || function (d, b) {
			
 
				+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
			
 
				+    function __() { this.constructor = d; }
			
 
				+    __.prototype = b.prototype;
			
 
				+    d.prototype = new __();
			
 
				+};
			
 
				+var wijmo;
			
 
				+(function (wijmo) {
			
 
				+    (function (grid) {
			
 
				+        (function (sheet) {
			
 
				+            'use strict';
			
 
				+
			
 
				+            /**
			
 
				+            * Base class for Flexsheet undo/redo actions.
			
 
				+            */
			
 
				+            var _UndoableAction = (function () {
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_UndoableAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _UndoableAction works for.
			
 
				+                */
			
 
				+                function _UndoableAction(owner) {
			
 
				+                    this._owner = owner;
			
 
				+                    this._sheetIndex = owner.selectedSheetIndex;
			
 
				+                }
			
 
				+                Object.defineProperty(_UndoableAction.prototype, "sheetIndex", {
			
 
				+                    /**
			
 
				+                    * Gets the index of the sheet that the undoable action wokrs for.
			
 
				+                    */
			
 
				+                    get: function () {
			
 
				+                        return this._sheetIndex;
			
 
				+                    },
			
 
				+                    enumerable: true,
			
 
				+                    configurable: true
			
 
				+                });
			
 
				+
			
 
				+                /**
			
 
				+                * Excutes undo of the undoable action
			
 
				+                */
			
 
				+                _UndoableAction.prototype.undo = function () {
			
 
				+                    throw 'This abstract method must be overrided.';
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Excutes redo of the undoable action
			
 
				+                */
			
 
				+                _UndoableAction.prototype.redo = function () {
			
 
				+                    throw 'This abstract method must be overrided.';
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Saves the current flexsheet state.
			
 
				+                */
			
 
				+                _UndoableAction.prototype.saveNewState = function () {
			
 
				+                    throw 'This abstract method must be overrided.';
			
 
				+                };
			
 
				+                return _UndoableAction;
			
 
				+            })();
			
 
				+            sheet._UndoableAction = _UndoableAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _EditAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for editing value of the flexsheet cells.
			
 
				+            */
			
 
				+            var _EditAction = (function (_super) {
			
 
				+                __extends(_EditAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_EditAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _EditAction works for.
			
 
				+                */
			
 
				+                function _EditAction(owner) {
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    this._selection = owner.selection;
			
 
				+                    this._oldValue = owner.getCellData(this._selection.topRow, this._selection.leftCol, !!owner.columns[this._selection.leftCol].dataMap);
			
 
				+                    this._oldValue = this._oldValue != undefined ? this._oldValue : '';
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _EditAction.prototype.undo = function () {
			
 
				+                    this._owner.setCellData(this._selection.topRow, this._selection.leftCol, this._oldValue);
			
 
				+                    this._owner.select(this._selection);
			
 
				+                    this._owner.refresh(false);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _EditAction.prototype.redo = function () {
			
 
				+                    this._owner.setCellData(this._selection.topRow, this._selection.leftCol, this._newValue);
			
 
				+                    this._owner.select(this._selection);
			
 
				+                    this._owner.refresh(false);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _EditAction.prototype.saveNewState = function () {
			
 
				+                    var currentCol = this._owner.columns[this._selection.leftCol];
			
 
				+
			
 
				+                    if (!currentCol) {
			
 
				+                        return false;
			
 
				+                    }
			
 
				+
			
 
				+                    this._newValue = this._owner.getCellData(this._selection.topRow, this._selection.leftCol, !!this._owner.columns[this._selection.leftCol].dataMap);
			
 
				+                    this._newValue = this._newValue != undefined ? this._newValue : '';
			
 
				+
			
 
				+                    return this._newValue !== this._oldValue;
			
 
				+                };
			
 
				+                return _EditAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._EditAction = _EditAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _ColumnResizeAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for resize the column of the flexsheet.
			
 
				+            */
			
 
				+            var _ColumnResizeAction = (function (_super) {
			
 
				+                __extends(_ColumnResizeAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_ColumnResizeAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _ColumnResizeAction works for.
			
 
				+                * @param colIndex it indicates which column is resizing.
			
 
				+                */
			
 
				+                function _ColumnResizeAction(owner, colIndex) {
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    this._colIndex = colIndex;
			
 
				+                    this._oldColWidth = owner.columns[colIndex].width;
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _ColumnResizeAction.prototype.undo = function () {
			
 
				+                    this._owner.columns[this._colIndex].width = this._oldColWidth;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _ColumnResizeAction.prototype.redo = function () {
			
 
				+                    this._owner.columns[this._colIndex].width = this._newColWidth;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _ColumnResizeAction.prototype.saveNewState = function () {
			
 
				+                    this._newColWidth = this._owner.columns[this._colIndex].width;
			
 
				+                    if (this._oldColWidth === this._newColWidth) {
			
 
				+                        return false;
			
 
				+                    }
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _ColumnResizeAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._ColumnResizeAction = _ColumnResizeAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _RowResizeAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for resize the row of the flexsheet.
			
 
				+            */
			
 
				+            var _RowResizeAction = (function (_super) {
			
 
				+                __extends(_RowResizeAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_RowResizeAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _RowResizeAction works for.
			
 
				+                * @param rowIndex it indicates which row is resizing.
			
 
				+                */
			
 
				+                function _RowResizeAction(owner, rowIndex) {
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    this._rowIndex = rowIndex;
			
 
				+                    this._oldRowHeight = owner.rows[rowIndex].height;
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _RowResizeAction.prototype.undo = function () {
			
 
				+                    this._owner.rows[this._rowIndex].height = this._oldRowHeight;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _RowResizeAction.prototype.redo = function () {
			
 
				+                    this._owner.rows[this._rowIndex].height = this._newRowHeight;
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _RowResizeAction.prototype.saveNewState = function () {
			
 
				+                    this._newRowHeight = this._owner.rows[this._rowIndex].height;
			
 
				+                    if (this._oldRowHeight === this._newRowHeight) {
			
 
				+                        return false;
			
 
				+                    }
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _RowResizeAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._RowResizeAction = _RowResizeAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _InsertDeleteColumnAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for insert or delete column of the flexsheet.
			
 
				+            */
			
 
				+            var _InsertDeleteColumnAction = (function (_super) {
			
 
				+                __extends(_InsertDeleteColumnAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_InsertDeleteColumnAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _InsertDeleteColumnAction works for.
			
 
				+                */
			
 
				+                function _InsertDeleteColumnAction(owner) {
			
 
				+                    var colIndex, columns = [];
			
 
				+
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+                        columns.push(owner.columns[colIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    this._oldValue = {
			
 
				+                        columns: columns,
			
 
				+                        sortList: owner.sortManager._committedList.slice(),
			
 
				+                        styledCells: JSON.parse(JSON.stringify(owner.styledCells)),
			
 
				+                        mergedCells: owner._cloneMergedCells()
			
 
				+                    };
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteColumnAction.prototype.undo = function () {
			
 
				+                    var colIndex;
			
 
				+
			
 
				+                    this._owner.columns.clear();
			
 
				+                    this._owner.styledCells = undefined;
			
 
				+                    this._owner.mergedRange = undefined;
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+                        this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+                    }
			
 
				+                    this._owner.styledCells = this._oldValue.styledCells;
			
 
				+                    this._owner.mergedRange = this._oldValue.mergedCells;
			
 
				+
			
 
				+                    // Synch with current sheet.
			
 
				+                    this._owner._copyTo(this._owner.selectedSheet);
			
 
				+                    this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+                    this._owner.sortManager.sorts.sourceCollection = this._oldValue.sortList.slice();
			
 
				+                    this._owner.sortManager.commitSort(false);
			
 
				+                    this._owner.sortManager.refresh();
			
 
				+
			
 
				+                    this._owner.onColumnChanged();
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteColumnAction.prototype.redo = function () {
			
 
				+                    var colIndex;
			
 
				+
			
 
				+                    this._owner.columns.clear();
			
 
				+                    this._owner.styledCells = undefined;
			
 
				+                    this._owner.mergedRange = undefined;
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+                        this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+                    }
			
 
				+                    this._owner.styledCells = this._newValue.styledCells;
			
 
				+                    this._owner.mergedRange = this._newValue.mergedCells;
			
 
				+
			
 
				+                    // Synch with current sheet.
			
 
				+                    this._owner._copyTo(this._owner.selectedSheet);
			
 
				+                    this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+                    this._owner.sortManager.sorts.sourceCollection = this._newValue.sortList.slice();
			
 
				+                    this._owner.sortManager.commitSort(false);
			
 
				+                    this._owner.sortManager.refresh();
			
 
				+
			
 
				+                    this._owner.onColumnChanged();
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteColumnAction.prototype.saveNewState = function () {
			
 
				+                    var colIndex, columns = [];
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+                        columns.push(this._owner.columns[colIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    this._newValue = {
			
 
				+                        columns: columns,
			
 
				+                        sortList: this._owner.sortManager._committedList.slice(),
			
 
				+                        styledCells: JSON.parse(JSON.stringify(this._owner.styledCells)),
			
 
				+                        mergedCells: this._owner._cloneMergedCells()
			
 
				+                    };
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _InsertDeleteColumnAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._InsertDeleteColumnAction = _InsertDeleteColumnAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _InsertDeleteRowAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for insert or delete row of the flexsheet.
			
 
				+            */
			
 
				+            var _InsertDeleteRowAction = (function (_super) {
			
 
				+                __extends(_InsertDeleteRowAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_InsertDeleteRowAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _InsertDeleteRowAction works for.
			
 
				+                */
			
 
				+                function _InsertDeleteRowAction(owner) {
			
 
				+                    var rowIndex, colIndex, rows = [], columns = [];
			
 
				+
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    for (rowIndex = 0; rowIndex < owner.rows.length; rowIndex++) {
			
 
				+                        rows.push(owner.rows[rowIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+                        columns.push(owner.columns[colIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    this._oldValue = {
			
 
				+                        rows: rows,
			
 
				+                        columns: columns,
			
 
				+                        itemsSource: owner.itemsSource ? owner.itemsSource.slice() : undefined,
			
 
				+                        styledCells: JSON.parse(JSON.stringify(owner.styledCells)),
			
 
				+                        mergedCells: owner._cloneMergedCells()
			
 
				+                    };
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteRowAction.prototype.undo = function () {
			
 
				+                    var rowIndex, colIndex, processingRow, dataSourceBinding = !!this._oldValue.itemsSource;
			
 
				+
			
 
				+                    this._owner.finishEditing();
			
 
				+                    this._owner.columns.clear();
			
 
				+                    this._owner.rows.clear();
			
 
				+                    this._owner.styledCells = undefined;
			
 
				+                    this._owner.mergedRange = undefined;
			
 
				+
			
 
				+                    if (dataSourceBinding) {
			
 
				+                        this._owner.autoGenerateColumns = false;
			
 
				+                        this._owner.itemsSource = this._oldValue.itemsSource.slice();
			
 
				+                    }
			
 
				+                    for (rowIndex = 0; rowIndex < this._oldValue.rows.length; rowIndex++) {
			
 
				+                        processingRow = this._oldValue.rows[rowIndex];
			
 
				+                        if (dataSourceBinding) {
			
 
				+                            if (!processingRow.dataItem && !(processingRow instanceof sheet.HeaderRow)) {
			
 
				+                                this._owner.rows.splice(rowIndex, 0, processingRow);
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            this._owner.rows.push(processingRow);
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+                        this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+                    }
			
 
				+                    this._owner.styledCells = this._oldValue.styledCells;
			
 
				+                    this._owner.mergedRange = this._oldValue.mergedCells;
			
 
				+
			
 
				+                    // Synch with current sheet.
			
 
				+                    this._owner._copyTo(this._owner.selectedSheet);
			
 
				+                    this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteRowAction.prototype.redo = function () {
			
 
				+                    var rowIndex, colIndex, processingRow, dataSourceBinding = !!this._newValue.itemsSource;
			
 
				+
			
 
				+                    this._owner.finishEditing();
			
 
				+                    this._owner.columns.clear();
			
 
				+                    this._owner.rows.clear();
			
 
				+                    this._owner.styledCells = undefined;
			
 
				+                    this._owner.mergedRange = undefined;
			
 
				+
			
 
				+                    if (dataSourceBinding) {
			
 
				+                        this._owner.autoGenerateColumns = false;
			
 
				+                        this._owner.itemsSource = this._newValue.itemsSource.slice();
			
 
				+                    }
			
 
				+                    for (rowIndex = 0; rowIndex < this._newValue.rows.length; rowIndex++) {
			
 
				+                        processingRow = this._newValue.rows[rowIndex];
			
 
				+                        if (dataSourceBinding) {
			
 
				+                            if (!processingRow.dataItem && !(processingRow instanceof sheet.HeaderRow)) {
			
 
				+                                this._owner.rows.splice(rowIndex, 0, processingRow);
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            this._owner.rows.push(processingRow);
			
 
				+                        }
			
 
				+                    }
			
 
				+                    for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+                        this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+                    }
			
 
				+                    this._owner.styledCells = this._newValue.styledCells;
			
 
				+                    this._owner.mergedRange = this._newValue.mergedCells;
			
 
				+
			
 
				+                    // Synch with current sheet.
			
 
				+                    this._owner._copyTo(this._owner.selectedSheet);
			
 
				+                    this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _InsertDeleteRowAction.prototype.saveNewState = function () {
			
 
				+                    var rowIndex, colIndex, rows = [], columns = [];
			
 
				+
			
 
				+                    for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+                        rows.push(this._owner.rows[rowIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+                        columns.push(this._owner.columns[colIndex]);
			
 
				+                    }
			
 
				+
			
 
				+                    this._newValue = {
			
 
				+                        rows: rows,
			
 
				+                        columns: columns,
			
 
				+                        itemsSource: this._owner.itemsSource ? this._owner.itemsSource.slice() : undefined,
			
 
				+                        styledCells: JSON.parse(JSON.stringify(this._owner.styledCells)),
			
 
				+                        mergedCells: this._owner._cloneMergedCells()
			
 
				+                    };
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _InsertDeleteRowAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._InsertDeleteRowAction = _InsertDeleteRowAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _CellStyleAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for applying style for the cells of the flexsheet.
			
 
				+            */
			
 
				+            var _CellStyleAction = (function (_super) {
			
 
				+                __extends(_CellStyleAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_CellStyleAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _CellStyleAction works for.
			
 
				+                * @param styledCells Current styled cells of the @see: FlexSheet control.
			
 
				+                */
			
 
				+                function _CellStyleAction(owner, styledCells) {
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    this._oldStyledCells = styledCells ? JSON.parse(JSON.stringify(styledCells)) : JSON.parse(JSON.stringify(owner.styledCells));
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellStyleAction.prototype.undo = function () {
			
 
				+                    this._owner.styledCells = JSON.parse(JSON.stringify(this._oldStyledCells));
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.styledCells = this._owner.styledCells;
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellStyleAction.prototype.redo = function () {
			
 
				+                    this._owner.styledCells = JSON.parse(JSON.stringify(this._newStyledCells));
			
 
				+
			
 
				+                    // Synch the cell style for current sheet.
			
 
				+                    this._owner.selectedSheet.styledCells = this._owner.styledCells;
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellStyleAction.prototype.saveNewState = function () {
			
 
				+                    this._newStyledCells = JSON.parse(JSON.stringify(this._owner.styledCells));
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _CellStyleAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._CellStyleAction = _CellStyleAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _CellMergeAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for merging the cells of the flexsheet.
			
 
				+            */
			
 
				+            var _CellMergeAction = (function (_super) {
			
 
				+                __extends(_CellMergeAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_CellMergeAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _CellMergeAction works for.
			
 
				+                */
			
 
				+                function _CellMergeAction(owner) {
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    this._oldMergedCells = owner._cloneMergedCells();
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellMergeAction.prototype.undo = function () {
			
 
				+                    this._owner.mergedRange = this._oldMergedCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.mergedRange = this._owner.mergedRange;
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellMergeAction.prototype.redo = function () {
			
 
				+                    this._owner.mergedRange = this._newMergedCells;
			
 
				+
			
 
				+                    // Synch the merged range for current sheet.
			
 
				+                    this._owner.selectedSheet.mergedRange = this._owner.mergedRange;
			
 
				+                    this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+                    this._owner.refresh(true);
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _CellMergeAction.prototype.saveNewState = function () {
			
 
				+                    this._newMergedCells = this._owner._cloneMergedCells();
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _CellMergeAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._CellMergeAction = _CellMergeAction;
			
 
				+
			
 
				+            /**
			
 
				+            * Defines the _SortColumnAction class.
			
 
				+            *
			
 
				+            * It deals with the undo\redo for sort columns of the flexsheet.
			
 
				+            */
			
 
				+            var _SortColumnAction = (function (_super) {
			
 
				+                __extends(_SortColumnAction, _super);
			
 
				+                /**
			
 
				+                * Initializes a new instance of a @see:_CellMergeAction class.
			
 
				+                *
			
 
				+                * @param owener The @see: FlexSheet control that the _CellMergeAction works for.
			
 
				+                */
			
 
				+                function _SortColumnAction(owner) {
			
 
				+                    var rowIndex, colIndex, columns = [], rows = [];
			
 
				+
			
 
				+                    _super.call(this, owner);
			
 
				+
			
 
				+                    if (!owner.itemsSource) {
			
 
				+                        for (rowIndex = 0; rowIndex < owner.rows.length; rowIndex++) {
			
 
				+                            rows.push(owner.rows[rowIndex]);
			
 
				+                        }
			
 
				+                        for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+                            columns.push(owner.columns[colIndex]);
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    this._oldValue = {
			
 
				+                        sortList: owner.sortManager._committedList.slice(),
			
 
				+                        rows: rows,
			
 
				+                        columns: columns
			
 
				+                    };
			
 
				+                }
			
 
				+                /**
			
 
				+                * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _SortColumnAction.prototype.undo = function () {
			
 
				+                    var rowIndex, colIndex;
			
 
				+
			
 
				+                    this._owner.sortManager.sorts.sourceCollection = this._oldValue.sortList.slice();
			
 
				+                    this._owner.sortManager.commitSort(false);
			
 
				+                    this._owner.sortManager.refresh();
			
 
				+                    if (!this._owner.itemsSource) {
			
 
				+                        this._owner.rows.clear();
			
 
				+                        this._owner.columns.clear();
			
 
				+                        this._owner.selectedSheet.dataGrid.rows.clear();
			
 
				+                        this._owner.selectedSheet.dataGrid.columns.clear();
			
 
				+                        for (rowIndex = 0; rowIndex < this._oldValue.rows.length; rowIndex++) {
			
 
				+                            this._owner.rows.push(this._oldValue.rows[rowIndex]);
			
 
				+
			
 
				+                            // Synch the rows of the datagrid for current sheet.
			
 
				+                            this._owner.selectedSheet.dataGrid.rows.push(this._oldValue.rows[rowIndex]);
			
 
				+                        }
			
 
				+                        for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+                            this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+
			
 
				+                            // Synch the columns of the datagrid for current sheet.
			
 
				+                            this._owner.selectedSheet.dataGrid.columns.push(this._oldValue.columns[colIndex]);
			
 
				+                        }
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _SortColumnAction.prototype.redo = function () {
			
 
				+                    var rowIndex, colIndex;
			
 
				+
			
 
				+                    this._owner.sortManager.sorts.sourceCollection = this._newValue.sortList.slice();
			
 
				+                    this._owner.sortManager.commitSort(false);
			
 
				+                    this._owner.sortManager.refresh();
			
 
				+                    if (!this._owner.itemsSource) {
			
 
				+                        this._owner.rows.clear();
			
 
				+                        this._owner.columns.clear();
			
 
				+                        this._owner.selectedSheet.dataGrid.rows.clear();
			
 
				+                        this._owner.selectedSheet.dataGrid.columns.clear();
			
 
				+                        for (rowIndex = 0; rowIndex < this._newValue.rows.length; rowIndex++) {
			
 
				+                            this._owner.rows.push(this._newValue.rows[rowIndex]);
			
 
				+
			
 
				+                            // Synch the rows of the datagrid for current sheet.
			
 
				+                            this._owner.selectedSheet.dataGrid.rows.push(this._newValue.rows[rowIndex]);
			
 
				+                        }
			
 
				+                        for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+                            this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+
			
 
				+                            // Synch the columns of the datagrid for current sheet.
			
 
				+                            this._owner.selectedSheet.dataGrid.columns.push(this._newValue.columns[colIndex]);
			
 
				+                        }
			
 
				+                    }
			
 
				+                };
			
 
				+
			
 
				+                /**
			
 
				+                * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+                */
			
 
				+                _SortColumnAction.prototype.saveNewState = function () {
			
 
				+                    var rowIndex, colIndex, columns = [], rows = [];
			
 
				+
			
 
				+                    if (!this._owner.itemsSource) {
			
 
				+                        for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+                            rows.push(this._owner.rows[rowIndex]);
			
 
				+                        }
			
 
				+                        for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+                            columns.push(this._owner.columns[colIndex]);
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    this._newValue = {
			
 
				+                        sortList: this._owner.sortManager._committedList.slice(),
			
 
				+                        rows: rows,
			
 
				+                        columns: columns
			
 
				+                    };
			
 
				+
			
 
				+                    return true;
			
 
				+                };
			
 
				+                return _SortColumnAction;
			
 
				+            })(_UndoableAction);
			
 
				+            sheet._SortColumnAction = _SortColumnAction;
			
 
				+        })(grid.sheet || (grid.sheet = {}));
			
 
				+        var sheet = grid.sheet;
			
 
				+    })(wijmo.grid || (wijmo.grid = {}));
			
 
				+    var grid = wijmo.grid;
			
 
				+})(wijmo || (wijmo = {}));
			
 
				+//# sourceMappingURL=_UndoableAction.js.map
			
--- a/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.js.map
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.js.map
--- a/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.ts
+++ b/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.ts
@@ -0,0 +1,723 @@
 
				+module wijmo.grid.sheet {
			
 
				+	'use strict';
			
 
				+
			
 
				+	/**
			
 
				+	 * Base class for Flexsheet undo/redo actions.
			
 
				+	 */
			
 
				+	export class _UndoableAction {
			
 
				+		_owner: FlexSheet;
			
 
				+		private _sheetIndex: number;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_UndoableAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _UndoableAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			this._owner = owner;
			
 
				+			this._sheetIndex = owner.selectedSheetIndex;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Gets the index of the sheet that the undoable action wokrs for.
			
 
				+		 */
			
 
				+		get sheetIndex(): number {
			
 
				+			return this._sheetIndex;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Excutes undo of the undoable action
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			throw 'This abstract method must be overrided.';
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Excutes redo of the undoable action
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			throw 'This abstract method must be overrided.';
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Saves the current flexsheet state.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			throw 'This abstract method must be overrided.';
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _EditAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for editing value of the flexsheet cells.
			
 
				+	 */
			
 
				+	export class _EditAction extends _UndoableAction {
			
 
				+		private _selection: CellRange;
			
 
				+		private _oldValue: any;
			
 
				+		private _newValue: any;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_EditAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _EditAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			super(owner);
			
 
				+
			
 
				+			this._selection = owner.selection;
			
 
				+			this._oldValue = owner.getCellData(this._selection.topRow, this._selection.leftCol, !!owner.columns[this._selection.leftCol].dataMap);
			
 
				+			this._oldValue = this._oldValue != undefined ? this._oldValue : '';
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			this._owner.setCellData(this._selection.topRow, this._selection.leftCol, this._oldValue);
			
 
				+			this._owner.select(this._selection);
			
 
				+			this._owner.refresh(false);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			this._owner.setCellData(this._selection.topRow, this._selection.leftCol, this._newValue);
			
 
				+			this._owner.select(this._selection);
			
 
				+			this._owner.refresh(false);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			var currentCol = this._owner.columns[this._selection.leftCol];
			
 
				+
			
 
				+			if (!currentCol) {
			
 
				+				return false;
			
 
				+			}
			
 
				+
			
 
				+			this._newValue = this._owner.getCellData(this._selection.topRow, this._selection.leftCol, !!this._owner.columns[this._selection.leftCol].dataMap);
			
 
				+			this._newValue = this._newValue != undefined ? this._newValue : '';
			
 
				+
			
 
				+			return this._newValue !== this._oldValue;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _ColumnResizeAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for resize the column of the flexsheet.
			
 
				+	 */
			
 
				+	export class _ColumnResizeAction extends _UndoableAction {
			
 
				+		private _colIndex: number;
			
 
				+		private _oldColWidth: number;
			
 
				+		private _newColWidth: number;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_ColumnResizeAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _ColumnResizeAction works for.
			
 
				+		 * @param colIndex it indicates which column is resizing.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet, colIndex: number) {
			
 
				+			super(owner);
			
 
				+
			
 
				+			this._colIndex = colIndex;
			
 
				+			this._oldColWidth = (<Column>owner.columns[colIndex]).width;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			(<Column>this._owner.columns[this._colIndex]).width = this._oldColWidth;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			(<Column>this._owner.columns[this._colIndex]).width = this._newColWidth;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			this._newColWidth = (<Column>this._owner.columns[this._colIndex]).width;
			
 
				+			if (this._oldColWidth === this._newColWidth) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _RowResizeAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for resize the row of the flexsheet.
			
 
				+	 */
			
 
				+	export class _RowResizeAction extends _UndoableAction {
			
 
				+		private _rowIndex: number;
			
 
				+		private _oldRowHeight: number;
			
 
				+		private _newRowHeight: number;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_RowResizeAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _RowResizeAction works for.
			
 
				+		 * @param rowIndex it indicates which row is resizing.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet, rowIndex: number) {
			
 
				+			super(owner);
			
 
				+
			
 
				+			this._rowIndex = rowIndex;
			
 
				+			this._oldRowHeight = (<Row>owner.rows[rowIndex]).height;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			(<Row>this._owner.rows[this._rowIndex]).height = this._oldRowHeight;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			(<Row>this._owner.rows[this._rowIndex]).height = this._newRowHeight;
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			this._newRowHeight = (<Row>this._owner.rows[this._rowIndex]).height
			
 
				+			if (this._oldRowHeight === this._newRowHeight) {
			
 
				+				return false;
			
 
				+			}
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _InsertDeleteColumnAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for insert or delete column of the flexsheet.
			
 
				+	 */
			
 
				+	export class _InsertDeleteColumnAction extends _UndoableAction {
			
 
				+		private _oldValue: IInsertDeleteColumnActionValue;
			
 
				+		private _newValue: IInsertDeleteColumnActionValue;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_InsertDeleteColumnAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _InsertDeleteColumnAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			var colIndex: number,
			
 
				+				columns = [];
			
 
				+
			
 
				+			super(owner);
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+				columns.push(owner.columns[colIndex]);
			
 
				+			}
			
 
				+
			
 
				+			this._oldValue = {
			
 
				+				columns: columns,
			
 
				+				sortList: owner.sortManager._committedList.slice(),
			
 
				+				styledCells: JSON.parse(JSON.stringify(owner.styledCells)),
			
 
				+				mergedCells: owner._cloneMergedCells()
			
 
				+			};
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			var colIndex: number;
			
 
				+
			
 
				+			this._owner.columns.clear();
			
 
				+			this._owner.styledCells = undefined;
			
 
				+			this._owner.mergedRange = undefined;
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+				this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+			}
			
 
				+			this._owner.styledCells = this._oldValue.styledCells;
			
 
				+			this._owner.mergedRange = this._oldValue.mergedCells;
			
 
				+			// Synch with current sheet.
			
 
				+			this._owner._copyTo(this._owner.selectedSheet);
			
 
				+			this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+			this._owner.sortManager.sorts.sourceCollection = this._oldValue.sortList.slice();
			
 
				+			this._owner.sortManager.commitSort(false);
			
 
				+			this._owner.sortManager.refresh();
			
 
				+
			
 
				+			this._owner.onColumnChanged();
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			var colIndex: number;
			
 
				+
			
 
				+			this._owner.columns.clear();
			
 
				+			this._owner.styledCells = undefined;
			
 
				+			this._owner.mergedRange = undefined;
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+				this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+			}
			
 
				+			this._owner.styledCells = this._newValue.styledCells;
			
 
				+			this._owner.mergedRange = this._newValue.mergedCells;
			
 
				+			// Synch with current sheet.
			
 
				+			this._owner._copyTo(this._owner.selectedSheet);
			
 
				+			this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+			this._owner.sortManager.sorts.sourceCollection = this._newValue.sortList.slice();
			
 
				+			this._owner.sortManager.commitSort(false);
			
 
				+			this._owner.sortManager.refresh();
			
 
				+
			
 
				+			this._owner.onColumnChanged();
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			var colIndex: number,
			
 
				+				columns = [];
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+				columns.push(this._owner.columns[colIndex]);
			
 
				+			}
			
 
				+
			
 
				+			this._newValue = {
			
 
				+				columns: columns,
			
 
				+				sortList: this._owner.sortManager._committedList.slice(),
			
 
				+				styledCells: JSON.parse(JSON.stringify(this._owner.styledCells)),
			
 
				+				mergedCells: this._owner._cloneMergedCells()
			
 
				+			};
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _InsertDeleteRowAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for insert or delete row of the flexsheet.
			
 
				+	 */
			
 
				+	export class _InsertDeleteRowAction extends _UndoableAction {
			
 
				+		private _oldValue: IInsertDeleteRowActionValue;
			
 
				+		private _newValue: IInsertDeleteRowActionValue;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_InsertDeleteRowAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _InsertDeleteRowAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				rows = [],
			
 
				+				columns = [];
			
 
				+
			
 
				+			super(owner);
			
 
				+
			
 
				+			for (rowIndex = 0; rowIndex < owner.rows.length; rowIndex++) {
			
 
				+				rows.push(owner.rows[rowIndex]);
			
 
				+			}
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+				columns.push(owner.columns[colIndex]);
			
 
				+			}
			
 
				+
			
 
				+			this._oldValue = {
			
 
				+				rows: rows,
			
 
				+				columns: columns,
			
 
				+				itemsSource: owner.itemsSource ? owner.itemsSource.slice() : undefined,
			
 
				+				styledCells: JSON.parse(JSON.stringify(owner.styledCells)),
			
 
				+				mergedCells: owner._cloneMergedCells()
			
 
				+			};
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				processingRow: Row,
			
 
				+				dataSourceBinding = !!this._oldValue.itemsSource;
			
 
				+
			
 
				+			this._owner.finishEditing();
			
 
				+			this._owner.columns.clear();
			
 
				+			this._owner.rows.clear();
			
 
				+			this._owner.styledCells = undefined;
			
 
				+			this._owner.mergedRange = undefined;
			
 
				+
			
 
				+			if (dataSourceBinding) {
			
 
				+				this._owner.autoGenerateColumns = false;
			
 
				+				this._owner.itemsSource = this._oldValue.itemsSource.slice();
			
 
				+			} 
			
 
				+			for (rowIndex = 0; rowIndex < this._oldValue.rows.length; rowIndex++) {
			
 
				+				processingRow = this._oldValue.rows[rowIndex];
			
 
				+				if (dataSourceBinding) {
			
 
				+					if (!processingRow.dataItem && !(processingRow instanceof HeaderRow)) {
			
 
				+						this._owner.rows.splice(rowIndex, 0, processingRow);
			
 
				+					}
			
 
				+				} else {
			
 
				+					this._owner.rows.push(processingRow);
			
 
				+				}
			
 
				+			}
			
 
				+			
			
 
				+			for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+				this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+			}
			
 
				+			this._owner.styledCells = this._oldValue.styledCells;
			
 
				+			this._owner.mergedRange = this._oldValue.mergedCells;
			
 
				+			// Synch with current sheet.
			
 
				+			this._owner._copyTo(this._owner.selectedSheet);
			
 
				+			this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				processingRow: Row,
			
 
				+				dataSourceBinding = !!this._newValue.itemsSource;
			
 
				+
			
 
				+			this._owner.finishEditing();
			
 
				+			this._owner.columns.clear();
			
 
				+			this._owner.rows.clear();
			
 
				+			this._owner.styledCells = undefined;
			
 
				+			this._owner.mergedRange = undefined;
			
 
				+
			
 
				+			if (dataSourceBinding) {
			
 
				+				this._owner.autoGenerateColumns = false;
			
 
				+				this._owner.itemsSource = this._newValue.itemsSource.slice();
			
 
				+			} 
			
 
				+			for (rowIndex = 0; rowIndex < this._newValue.rows.length; rowIndex++) {
			
 
				+				processingRow = this._newValue.rows[rowIndex];
			
 
				+				if (dataSourceBinding) {
			
 
				+					if (!processingRow.dataItem && !(processingRow instanceof HeaderRow)) {
			
 
				+						this._owner.rows.splice(rowIndex, 0, processingRow);
			
 
				+					}
			
 
				+				} else {
			
 
				+					this._owner.rows.push(processingRow);
			
 
				+				}
			
 
				+			}
			
 
				+			for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+				this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+			}
			
 
				+			this._owner.styledCells = this._newValue.styledCells;
			
 
				+			this._owner.mergedRange = this._newValue.mergedCells;
			
 
				+			// Synch with current sheet.
			
 
				+			this._owner._copyTo(this._owner.selectedSheet);
			
 
				+			this._owner._copyFrom(this._owner.selectedSheet);
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				rows = [],
			
 
				+				columns = [];
			
 
				+
			
 
				+			for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+				rows.push(this._owner.rows[rowIndex]);
			
 
				+			}
			
 
				+
			
 
				+			for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+				columns.push(this._owner.columns[colIndex]);
			
 
				+			}
			
 
				+
			
 
				+			this._newValue = {
			
 
				+				rows: rows,
			
 
				+				columns: columns,
			
 
				+				itemsSource: this._owner.itemsSource ? this._owner.itemsSource.slice() : undefined,
			
 
				+				styledCells: JSON.parse(JSON.stringify(this._owner.styledCells)),
			
 
				+				mergedCells: this._owner._cloneMergedCells()
			
 
				+			};
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _CellStyleAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for applying style for the cells of the flexsheet.
			
 
				+	 */
			
 
				+	export class _CellStyleAction extends _UndoableAction {
			
 
				+		private _oldStyledCells: any;
			
 
				+		private _newStyledCells: any;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_CellStyleAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _CellStyleAction works for.
			
 
				+		 * @param styledCells Current styled cells of the @see: FlexSheet control.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet, styledCells?: any) {
			
 
				+			super(owner);
			
 
				+
			
 
				+			this._oldStyledCells = styledCells ? JSON.parse(JSON.stringify(styledCells)) : JSON.parse(JSON.stringify(owner.styledCells));
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			this._owner.styledCells = JSON.parse(JSON.stringify(this._oldStyledCells));
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.styledCells = this._owner.styledCells;
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			this._owner.styledCells = JSON.parse(JSON.stringify(this._newStyledCells));
			
 
				+			// Synch the cell style for current sheet.
			
 
				+			this._owner.selectedSheet.styledCells = this._owner.styledCells;
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].styledCells = this._owner.styledCells;
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			this._newStyledCells = JSON.parse(JSON.stringify(this._owner.styledCells));
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _CellMergeAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for merging the cells of the flexsheet.
			
 
				+	 */
			
 
				+	export class _CellMergeAction extends _UndoableAction {
			
 
				+		private _oldMergedCells: any;
			
 
				+		private _newMergedCells: any;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_CellMergeAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _CellMergeAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			super(owner);
			
 
				+
			
 
				+			this._oldMergedCells = owner._cloneMergedCells();
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			this._owner.mergedRange = this._oldMergedCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.mergedRange = this._owner.mergedRange;
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			this._owner.mergedRange = this._newMergedCells;
			
 
				+			// Synch the merged range for current sheet.
			
 
				+			this._owner.selectedSheet.mergedRange = this._owner.mergedRange;
			
 
				+			this._owner.selectedSheet.dataGrid['wj_sheetInfo'].mergedRange = this._owner.mergedRange;
			
 
				+			this._owner.refresh(true);
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			this._newMergedCells = this._owner._cloneMergedCells();
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	/**
			
 
				+	 * Defines the _SortColumnAction class.
			
 
				+	 *
			
 
				+	 * It deals with the undo\redo for sort columns of the flexsheet.
			
 
				+	 */
			
 
				+	export class _SortColumnAction extends _UndoableAction {
			
 
				+		private _oldValue: ISortColumnActionValue;
			
 
				+		private _newValue: ISortColumnActionValue;
			
 
				+
			
 
				+		/**
			
 
				+		 * Initializes a new instance of a @see:_CellMergeAction class.
			
 
				+		 *
			
 
				+		 * @param owener The @see: FlexSheet control that the _CellMergeAction works for.
			
 
				+		 */
			
 
				+		constructor(owner: FlexSheet) {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				columns: Column[] = [],
			
 
				+				rows: Row[] = [];
			
 
				+
			
 
				+			super(owner);
			
 
				+
			
 
				+			if (!owner.itemsSource) {
			
 
				+				for (rowIndex = 0; rowIndex < owner.rows.length; rowIndex++) {
			
 
				+					rows.push(owner.rows[rowIndex]);
			
 
				+				}
			
 
				+				for (colIndex = 0; colIndex < owner.columns.length; colIndex++) {
			
 
				+					columns.push(owner.columns[colIndex]);
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			this._oldValue = {
			
 
				+				sortList: owner.sortManager._committedList.slice(),
			
 
				+				rows: rows,
			
 
				+				columns: columns
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the undo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		undo() {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number;
			
 
				+
			
 
				+			this._owner.sortManager.sorts.sourceCollection = this._oldValue.sortList.slice();
			
 
				+			this._owner.sortManager.commitSort(false);
			
 
				+			this._owner.sortManager.refresh();
			
 
				+			if (!this._owner.itemsSource) {
			
 
				+				this._owner.rows.clear();
			
 
				+				this._owner.columns.clear();
			
 
				+				this._owner.selectedSheet.dataGrid.rows.clear();
			
 
				+				this._owner.selectedSheet.dataGrid.columns.clear();
			
 
				+				for (rowIndex = 0; rowIndex < this._oldValue.rows.length; rowIndex++) {
			
 
				+					this._owner.rows.push(this._oldValue.rows[rowIndex]);
			
 
				+					// Synch the rows of the datagrid for current sheet.
			
 
				+					this._owner.selectedSheet.dataGrid.rows.push(this._oldValue.rows[rowIndex]);
			
 
				+				}
			
 
				+				for (colIndex = 0; colIndex < this._oldValue.columns.length; colIndex++) {
			
 
				+					this._owner.columns.push(this._oldValue.columns[colIndex]);
			
 
				+					// Synch the columns of the datagrid for current sheet.
			
 
				+					this._owner.selectedSheet.dataGrid.columns.push(this._oldValue.columns[colIndex]);
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the redo method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		redo() {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number;
			
 
				+
			
 
				+			this._owner.sortManager.sorts.sourceCollection = this._newValue.sortList.slice();
			
 
				+			this._owner.sortManager.commitSort(false);
			
 
				+			this._owner.sortManager.refresh();
			
 
				+			if (!this._owner.itemsSource) {
			
 
				+				this._owner.rows.clear();
			
 
				+				this._owner.columns.clear();
			
 
				+				this._owner.selectedSheet.dataGrid.rows.clear();
			
 
				+				this._owner.selectedSheet.dataGrid.columns.clear();
			
 
				+				for (rowIndex = 0; rowIndex < this._newValue.rows.length; rowIndex++) {
			
 
				+					this._owner.rows.push(this._newValue.rows[rowIndex]);
			
 
				+					// Synch the rows of the datagrid for current sheet.
			
 
				+					this._owner.selectedSheet.dataGrid.rows.push(this._newValue.rows[rowIndex]);
			
 
				+				}
			
 
				+				for (colIndex = 0; colIndex < this._newValue.columns.length; colIndex++) {
			
 
				+					this._owner.columns.push(this._newValue.columns[colIndex]);
			
 
				+					// Synch the columns of the datagrid for current sheet.
			
 
				+					this._owner.selectedSheet.dataGrid.columns.push(this._newValue.columns[colIndex]);
			
 
				+				}
			
 
				+			}
			
 
				+		}
			
 
				+
			
 
				+		/**
			
 
				+		 * Overrides the saveNewState method of its base class @see:_UndoableAction.
			
 
				+		 */
			
 
				+		saveNewState(): boolean {
			
 
				+			var rowIndex: number,
			
 
				+				colIndex: number,
			
 
				+				columns: Column[] = [],
			
 
				+				rows: Row[] = [];
			
 
				+
			
 
				+			if (!this._owner.itemsSource) {
			
 
				+				for (rowIndex = 0; rowIndex < this._owner.rows.length; rowIndex++) {
			
 
				+					rows.push(this._owner.rows[rowIndex]);
			
 
				+				}
			
 
				+				for (colIndex = 0; colIndex < this._owner.columns.length; colIndex++) {
			
 
				+					columns.push(this._owner.columns[colIndex]);
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			this._newValue = {
			
 
				+				sortList: this._owner.sortManager._committedList.slice(),
			
 
				+				rows: rows,
			
 
				+				columns: columns
			
 
				+			}
			
 
				+
			
 
				+			return true;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	interface IInsertDeleteColumnActionValue {
			
 
				+		columns: Column[];
			
 
				+		sortList: any[];
			
 
				+		styledCells: any;
			
 
				+		mergedCells: any;
			
 
				+	}
			
 
				+
			
 
				+	interface IInsertDeleteRowActionValue {
			
 
				+		rows: Row[];
			
 
				+		columns: Column[];
			
 
				+		itemsSource: any;
			
 
				+		styledCells: any;
			
 
				+		mergedCells: any;
			
 
				+	}
			
 
				+
			
 
				+	interface ISortColumnActionValue {
			
 
				+		sortList: any[];
			
 
				+		columns: Column[];
			
 
				+		rows: Row[];
			
 
				+	}
			
 
				+}
			
--- a/src/scripts/wijmo/wijmo.input.min.js
+++ b/src/scripts/wijmo/wijmo.input.min.js
--- a/src/scripts/wijmo/wijmo.min.js
+++ b/src/scripts/wijmo/wijmo.min.js
--- a/src/spreadjs/css/gc.spread.sheets.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.10.0.1.css
--- a/src/spreadjs/css/gc.spread.sheets.excel2013darkGray.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.excel2013darkGray.10.0.1.css
@@ -0,0 +1,855 @@
 
				+/*-----common css start-----*/
			
 
				+.gc-theme-version {
			
 
				+    position: absolute;
			
 
				+    z-index: 2013;
			
 
				+}
			
 
				+.gc-grayArea {
			
 
				+    background-color: #dedede;
			
 
				+}
			
 
				+.gc-corner-hover {
			
 
				+    background-color: #dedede;
			
 
				+}
			
 
				+.gc-corner-selected {
			
 
				+    background-color: #dedede;
			
 
				+}
			
 
				+.gc-corner-normal {
			
 
				+    background-color: #dedede;
			
 
				+}
			
 
				+.gc-corner-triangle-normal {
			
 
				+    background-color: #b3b3b3;
			
 
				+    background-image: -webkit-linear-gradient(top, #b3b3b3, #b3b3b3); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #b3b3b3, #b3b3b3); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #b3b3b3, #b3b3b3); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-corner-triangle-hover {
			
 
				+    background-color: #9e9e9e;
			
 
				+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-corner-triangle-selected {
			
 
				+    background-color: #217346;
			
 
				+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-columnHeader-normal {
			
 
				+    color: black;
			
 
				+    background-image: none;
			
 
				+    background-color: #dedede;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-hover {
			
 
				+    color: black;
			
 
				+    background-image: none;
			
 
				+    background-color: #9fd5b7;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d3f0e0;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #bdbdbd;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-normal {
			
 
				+    color: black;
			
 
				+    background-color: #dedede;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-hover {
			
 
				+    color: black;
			
 
				+    background-color: #9fd5b7;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-color: #bdbdbd;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-horizontal-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #dedede;
			
 
				+    border-top: 1px solid #999999;
			
 
				+    height: 18px;
			
 
				+    padding: 4px 0px 5px 0px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-vertical-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #dedede;
			
 
				+    border-left: 1px solid #999999;
			
 
				+    width: 18px;
			
 
				+    padding: 0px 5px 0px 4px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-footer-corner {
			
 
				+    background-color: #dedede;
			
 
				+}
			
 
				+.gc-selection {
			
 
				+    background-color: rgba(20, 20, 20, 0.2);
			
 
				+    border-color: #217346;
			
 
				+    color: rgba(240,240,240,0.7);
			
 
				+}
			
 
				+.gc-drag-indicator {
			
 
				+    border-color: #217346;
			
 
				+}
			
 
				+.gc-gridlineColor {
			
 
				+    border-color: #d4d4d4;
			
 
				+}
			
 
				+.gc-group {
			
 
				+    background-color: #dedede;
			
 
				+    color: #999999;
			
 
				+}
			
 
				+.gc-group-box {
			
 
				+    background-color: #dedede;
			
 
				+    color: #464646;
			
 
				+    border-color: #828790;
			
 
				+}
			
 
				+
			
 
				+.gc-tabStripNewTab-highlight {
			
 
				+    border-color: #525252;
			
 
				+}
			
 
				+.gc-tabStripNewTab-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-tabStripBackground {
			
 
				+    background-image: -webkit-linear-gradient(top, #dedede, #dedede); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #dedede, #dedede); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #dedede, #dedede); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #dedede, #dedede); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #dedede, #dedede); /* Standard syntax; must be last */
			
 
				+    background-color: #dedede;
			
 
				+    border-color: #999999;
			
 
				+}
			
 
				+.gc-tabStripResizeBarInner {
			
 
				+    color: #5e5e5e;
			
 
				+}
			
 
				+.gc-navMoreButton-highlight {
			
 
				+    border-color: #5e5e5e;
			
 
				+}
			
 
				+.gc-navMoreButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-highlight {
			
 
				+    border-color: #525252;
			
 
				+}
			
 
				+.gc-navButton-normal {
			
 
				+    border-color: #9e9e9e;
			
 
				+}
			
 
				+.gc-tab-normal {
			
 
				+    color: #262626;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-hover {
			
 
				+    color: #252627;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-active {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-rowHeaderFill {
			
 
				+    background-color: #e4ecf7;
			
 
				+}
			
 
				+.gc-colHeaderFill {
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
			
 
				+    background-color: #D2DBEB;
			
 
				+}
			
 
				+
			
 
				+.gc-gradientButton {
			
 
				+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
			
 
				+}
			
 
				+
			
 
				+.gc-sheetTabEditor::-ms-clear {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-layout-table {
			
 
				+    font-size:12px;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-first-column {
			
 
				+    width:21px;
			
 
				+    border-right:1px solid #CCC;
			
 
				+    text-align:right;
			
 
				+    padding-top:7px;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-last-column {
			
 
				+    width:18px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-sort-desc-container {
			
 
				+    border-bottom:1px solid #CCC;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-wrapper {
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-filter-dialog-style {
			
 
				+    background:#fcfdfd;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+    font-size:12px;
			
 
				+    border:1px solid #a7abb0;
			
 
				+}
			
 
				+
			
 
				+.gc-search-outer-div {
			
 
				+    border: none;
			
 
				+    margin:4px 0px 0px 4px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+div.gc-search-outer-div input::-ms-clear{
			
 
				+   display:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterSearch {
			
 
				+    width:165px;
			
 
				+    height:21px;
			
 
				+    border:1px solid #ababab;
			
 
				+    margin-left:7px;
			
 
				+    margin-top:4px;
			
 
				+    margin-bottom: 0px;
			
 
				+    padding: 0;
			
 
				+    font-size: 1em;
			
 
				+    background-color:white;
			
 
				+    color:black;
			
 
				+    float:none;
			
 
				+}
			
 
				+#gc-filterSearch:hover,
			
 
				+#gc-filterSearch:active{
			
 
				+    background-color:white;
			
 
				+}
			
 
				+
			
 
				+.gc-check-uncheck-all {
			
 
				+    float:left;
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-check-image,
			
 
				+.gc-fill-type-item .gc-check-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-uncheck-image,
			
 
				+.gc-fill-type-item .gc-uncheck-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-check-image,
			
 
				+.gc-uncheck-image {
			
 
				+    background-position:center;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-check-outerDiv {
			
 
				+    height:18px;
			
 
				+    margin-top:4px;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check-style {
			
 
				+    color:#1e395b;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check:hover {
			
 
				+    text-decoration:underline;
			
 
				+}
			
 
				+#gc-sortASC:hover,
			
 
				+#gc-sortASC:active {
			
 
				+    border-color: #e3e3e3;
			
 
				+    outline: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+            box-shadow: none;  
			
 
				+}
			
 
				+.gc-filter-sort {
			
 
				+    border:1px solid transparent;
			
 
				+    font-weight:normal;
			
 
				+    color:#222222;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-hover {
			
 
				+    border-radius: 3px;
			
 
				+    outline:none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item {
			
 
				+    position: relative;
			
 
				+    cursor: default;
			
 
				+    font-weight:normal;
			
 
				+    border-style: solid;
			
 
				+    border-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-container {
			
 
				+    border:1px solid #a7abb0;
			
 
				+    border-radius:3px;
			
 
				+    margin:4px 0px 4px 4px;
			
 
				+    overflow:hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-input {
			
 
				+    float: left;
			
 
				+    clear: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-text {
			
 
				+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
			
 
				+    font-size: 12px;
			
 
				+    margin: 2px;
			
 
				+    white-space:nowrap;
			
 
				+    word-wrap:normal;
			
 
				+    float: left;
			
 
				+    clear: right;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button {
			
 
				+    width:90px;
			
 
				+    height:27px;
			
 
				+    border-radius:3px;
			
 
				+    margin:2px 1px 5px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-disable {
			
 
				+    opacity:.35;
			
 
				+    background-image:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterOK {
			
 
				+    margin-left: 13px;
			
 
				+    margin-bottom: 5px;
			
 
				+    float: left;
			
 
				+}
			
 
				+#gc-filterCancel {
			
 
				+    margin-bottom: 5px;
			
 
				+    float: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-default {
			
 
				+    border:1px solid #acacac;
			
 
				+    border-radius: 0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-hover {
			
 
				+    border:1px solid #7eb4ea;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
			
 
				+    color: black;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-active {
			
 
				+    border:1px solid #569de5;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-hover {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-default {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#1e395b;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-hover {
			
 
				+    border:1px solid #86bfa0;
			
 
				+    background-color: #d3f0e0;    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-default {
			
 
				+    border:1px solid #ababab;
			
 
				+    background: white;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-hover {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color: white;    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-active {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color:#9fd5b7;    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#262626;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-menu-item-input {
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    margin:1px;
			
 
				+    float:left;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-menu-item-text {
			
 
				+    font-size:12px;
			
 
				+    font-weight:normal;
			
 
				+    display:inline-block;
			
 
				+    float:left;
			
 
				+    padding-top:2px;
			
 
				+    font-family:Arial;
			
 
				+}
			
 
				+.gc-fill-menu-container {
			
 
				+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
			
 
				+    cursor:default;
			
 
				+}
			
 
				+
			
 
				+.gc-toolstrip-default {
			
 
				+    background: white;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+.gc-toolstrip-button-style:active,
			
 
				+.gc-toolstrip-button-style {
			
 
				+    color: black;
			
 
				+    background:white;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-tab-tip-span{
			
 
				+     background:#D6E6F9;
			
 
				+     color:black;
			
 
				+     border:1px solid #D6E6F9;
			
 
				+     font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+.gc-spread-toolTip {
			
 
				+    border: 1px solid #bebebe;
			
 
				+    border-radius: 0px;
			
 
				+    background-color: white;    background-image: none;
			
 
				+    font-weight: normal;
			
 
				+    color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-no-user-select {
			
 
				+    -webkit-user-select: none;
			
 
				+    -khtml-user-select: none;
			
 
				+    -moz-user-select: none;
			
 
				+    -o-user-select: none;
			
 
				+    -ms-user-select: none;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+/*-----common css end-----*/
			
 
				+
			
 
				+/*-----formula textbox start-----*/
			
 
				+/* function autocomplete */
			
 
				+/* function autocomplete */
			
 
				+.gcsj-func-ac-popup {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+    background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,0.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row {
			
 
				+    margin: 0;
			
 
				+    cursor: default;
			
 
				+    padding: 2px 10px;
			
 
				+    color: #666666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-name {
			
 
				+     color: #222;
			
 
				+     font-size: 13px;
			
 
				+     font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+     margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-description {
			
 
				+    color: #666;
			
 
				+    display: none;
			
 
				+    font-size: 11px;
			
 
				+    margin: -2px 0;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active {
			
 
				+	background-color: #f5f5f5;
			
 
				+	color: #000;
			
 
				+	border-top: 1px solid #ebebeb;
			
 
				+	border-bottom: 1px solid #ebebeb;
			
 
				+	padding: 1px 10px
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active .gcsj-func-ac-row-description {
			
 
				+    display:block;
			
 
				+}
			
 
				+
			
 
				+/*  function help */
			
 
				+.gcsj-func-help-popup {
			
 
				+    background-color:#fff;
			
 
				+    border: 1px solid rgba(0,0,0,0.2);
			
 
				+    color: #222;
			
 
				+    font-size: 11px;
			
 
				+    word-wrap: break-word;
			
 
				+    position: absolute;
			
 
				+    width: 320px;
			
 
				+    z-index: 2001;
			
 
				+
			
 
				+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-title {
			
 
				+    background-color: #f5f5f5;
			
 
				+    color: #222;
			
 
				+    font-size: 13px;
			
 
				+    padding: 1px 0 1px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-body {
			
 
				+    border-top: 1px solid #ebebeb;
			
 
				+    font-family: arial, sans-serif;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-content {
			
 
				+    padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section {
			
 
				+    padding: 5px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-title {
			
 
				+    font-size: 11px;
			
 
				+    color: #666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-content {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula {
			
 
				+    font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+    padding: 1px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula-name {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter {
			
 
				+    padding-left:1px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-paren {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-active {
			
 
				+    background-color: #feb;
			
 
				+}
			
 
				+
			
 
				+/* color text */
			
 
				+.gcsj-func-color-content {
			
 
				+    white-space: pre-wrap;
			
 
				+}
			
 
				+/*-----formula textbox end-----*/
			
 
				+
			
 
				+/*-----floatingobject start-----*/
			
 
				+.gc-floatingobject-selected{
			
 
				+    border:1px solid #939393;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-unselected{
			
 
				+    background-color: transparent;
			
 
				+    border:1px solid transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-background-cover{
			
 
				+    -webkit-background-size: cover; /* For WebKit*/
			
 
				+    -moz-background-size: cover;    /* Mozilla*/
			
 
				+    -o-background-size: cover;      /* Opera*/
			
 
				+    background-size: cover;         /* Generic*/
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-div{
			
 
				+    position: absolute;
			
 
				+    border:1px solid black;
			
 
				+}
			
 
				+.gc-floatingobject-resize-indicator {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-select{
			
 
				+    background-color:white;
			
 
				+    border-radius:2px;
			
 
				+    -moz-border-radius:1px;
			
 
				+    border:1px solid #939393;
			
 
				+    z-index:100;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-unSelect{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-absolute{
			
 
				+    position: absolute;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-content-container {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+/*-----floatingobject end-----*/
			
 
				+
			
 
				+/*-----scrollbar start-----*/
			
 
				+/*scrollbar*/
			
 
				+.gc-scroll-container{
			
 
				+    background-color: #bababa;
			
 
				+    -moz-box-shadow: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+    box-shadow: none;
			
 
				+}
			
 
				+.gc-scroll-corner-all {
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+.gc-scroll-arrow{
			
 
				+    background-color: white;
			
 
				+    border-style:solid;
			
 
				+    border-color: #ababab;
			
 
				+    background-image: none;
			
 
				+    border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowUp{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
			
 
				+    
			
 
				+}
			
 
				+.gc-scroll-arrowUp {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowDown {
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowDown {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowLeft{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowLeft {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowRight{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-scroll-arrowRight {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-vertical {
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-vertical {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-horizontal {
			
 
				+    text-indent: 0;
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-horizontal {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scrollbar-wrapper {
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background:  white;
			
 
				+    -moz-border-radius: 0px;
			
 
				+    -webkit-border-radius: 0px;
			
 
				+    border-radius: 0px;
			
 
				+}
			
 
				+.gc-scroll-arrow-hover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+.gc-scrollbar-stateHover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow:active,
			
 
				+.gc-scroll-bar:active,
			
 
				+.gc-scrollbar-stateActive {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: #e1e1e1;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+/*-----scrollbar end-----*/
			
 
				+
			
--- a/src/spreadjs/css/gc.spread.sheets.excel2013lightGray.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.excel2013lightGray.10.0.1.css
@@ -0,0 +1,857 @@
 
				+/*-----common css start-----*/
			
 
				+.gc-theme-version {
			
 
				+    position: absolute;
			
 
				+    z-index: 2013;
			
 
				+}
			
 
				+.gc-grayArea {
			
 
				+    background-color: #f1f1f1;
			
 
				+}
			
 
				+.gc-corner-hover {
			
 
				+    background-color: #f1f1f1;
			
 
				+}
			
 
				+.gc-corner-selected {
			
 
				+    background-color: #f1f1f1;
			
 
				+}
			
 
				+.gc-corner-normal {
			
 
				+    background-color: #f1f1f1;
			
 
				+}
			
 
				+.gc-corner-triangle-normal {
			
 
				+    background-color: #c6c6c6;
			
 
				+    background-image: -webkit-linear-gradient(top, #c6c6c6, #c6c6c6); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #c6c6c6, #c6c6c6); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #c6c6c6, #c6c6c6); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-hover {
			
 
				+    background-color: #9e9e9e;
			
 
				+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-selected {
			
 
				+    background-color: #217346;
			
 
				+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+}
			
 
				+.gc-columnHeader-normal {
			
 
				+    color: #262626;
			
 
				+    background-image: none;
			
 
				+    background-color: #f1f1f1;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-hover {
			
 
				+    color: #262626;
			
 
				+    background-image: none;
			
 
				+    background-color: #9fd5b7;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d3f0e0;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d4d4d4;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #dbdbdb !important;
			
 
				+    border-right-color: #b7b7b7 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-normal {
			
 
				+    color: #262626;
			
 
				+    background-color: #f1f1f1;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-hover {
			
 
				+    color: #262626;
			
 
				+    background-color: #9fd5b7;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-color: #d4d4d4;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #dbdbdb !important;
			
 
				+    border-bottom-color: #b7b7b7 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-horizontal-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #f1f1f1;
			
 
				+    border-top: 1px solid #ababab;
			
 
				+    height: 18px;
			
 
				+    padding: 4px 0px 5px 0px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-vertical-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #f1f1f1;
			
 
				+    border-left: 1px solid #ababab;
			
 
				+    width: 18px;
			
 
				+    padding: 0px 5px 0px 4px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-footer-corner {
			
 
				+    background-color: #f1f1f1;
			
 
				+}
			
 
				+.gc-selection {
			
 
				+    background-color: rgba(20, 20, 20, 0.2);
			
 
				+    border-color: #217346;
			
 
				+    color: rgba(240,240,240,0.7);
			
 
				+}
			
 
				+.gc-drag-indicator {
			
 
				+    border-color: #217346;
			
 
				+}
			
 
				+.gc-gridlineColor {
			
 
				+    border-color: #d4d4d4;
			
 
				+}
			
 
				+.gc-group {
			
 
				+    background-color:#f1f1f1;
			
 
				+    color: #ababab;
			
 
				+}
			
 
				+.gc-group-box {
			
 
				+    background-color:#f1f1f1;
			
 
				+    color: #606060;
			
 
				+    border-color: #828790;
			
 
				+}
			
 
				+
			
 
				+.gc-tabStripNewTab-highlight {
			
 
				+    border-color: #5e5e5e;
			
 
				+}
			
 
				+.gc-tabStripNewTab-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-tabStripBackground {
			
 
				+    background-image: -webkit-linear-gradient(top, #f1f1f1, #f1f1f1); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f1f1f1, #f1f1f1); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f1f1f1, #f1f1f1); /* Standard syntax; must be last */
			
 
				+    background-color: #f1f1f1;
			
 
				+    border-color: #ababab;
			
 
				+}
			
 
				+.gc-tabStripResizeBarInner {
			
 
				+    color: #5e5e5e;
			
 
				+}
			
 
				+.gc-navMoreButton-highlight {
			
 
				+    border-color: #5e5e5e;
			
 
				+}
			
 
				+.gc-navMoreButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-highlight {
			
 
				+    border-color: #005a2b;
			
 
				+}
			
 
				+.gc-navButton-normal {
			
 
				+    border-color: #ababab;
			
 
				+}
			
 
				+.gc-tab-normal {
			
 
				+    color: #444444;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-hover {
			
 
				+    color: #252627;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-active {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-rowHeaderFill {
			
 
				+    background-color: #e4ecf7;
			
 
				+}
			
 
				+.gc-colHeaderFill {
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
			
 
				+    background-color: #D2DBEB;
			
 
				+}
			
 
				+
			
 
				+.gc-gradientButton {
			
 
				+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
			
 
				+}
			
 
				+
			
 
				+.gc-sheetTabEditor::-ms-clear {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-layout-table {
			
 
				+    font-size:12px;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-first-column {
			
 
				+    width:21px;
			
 
				+    border-right:1px solid #CCC;
			
 
				+    text-align:right;
			
 
				+    padding-top:7px;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-last-column {
			
 
				+    width:18px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-sort-desc-container {
			
 
				+    border-bottom:1px solid #CCC;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-wrapper {
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-filter-dialog-style {
			
 
				+    background:#fcfdfd;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+    font-size:12px;
			
 
				+    border:1px solid #a7abb0;
			
 
				+}
			
 
				+
			
 
				+.gc-search-outer-div {
			
 
				+    border: none;
			
 
				+    margin:4px 0px 0px 4px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+div.gc-search-outer-div input::-ms-clear{
			
 
				+   display:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterSearch {
			
 
				+    width:165px;
			
 
				+    height:21px;
			
 
				+    border:1px solid #ababab;
			
 
				+    margin-left:7px;
			
 
				+    margin-top:4px;
			
 
				+    margin-bottom: 0px;
			
 
				+    padding: 0;
			
 
				+    font-size: 1em;
			
 
				+    background-color:white;
			
 
				+    color:black;
			
 
				+    float:none;
			
 
				+}
			
 
				+#gc-filterSearch:hover,
			
 
				+#gc-filterSearch:active{
			
 
				+    background-color:white;
			
 
				+}
			
 
				+
			
 
				+.gc-check-uncheck-all {
			
 
				+    float:left;
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-check-image,
			
 
				+.gc-fill-type-item .gc-check-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-uncheck-image,
			
 
				+.gc-fill-type-item .gc-uncheck-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-check-image,
			
 
				+.gc-uncheck-image {
			
 
				+    background-position:center;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-check-outerDiv {
			
 
				+    height:18px;
			
 
				+    margin-top:4px;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check-style {
			
 
				+    color:#1e395b;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check:hover {
			
 
				+    text-decoration:underline;
			
 
				+}
			
 
				+#gc-sortASC:hover,
			
 
				+#gc-sortASC:active {
			
 
				+    border-color: #e3e3e3;
			
 
				+    outline: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+            box-shadow: none;  
			
 
				+}
			
 
				+.gc-filter-sort {
			
 
				+    border:1px solid transparent;
			
 
				+    font-weight:normal;
			
 
				+    color:#222222;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-hover {
			
 
				+    border-radius: 0px;
			
 
				+    outline:none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item {
			
 
				+    position: relative;
			
 
				+    cursor: default;
			
 
				+    font-weight:normal;
			
 
				+    border-style: solid;
			
 
				+    border-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-container {
			
 
				+    border:1px solid #a7abb0;
			
 
				+    border-radius:3px;
			
 
				+    margin:4px 0px 4px 4px;
			
 
				+    overflow:hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-input {
			
 
				+    float: left;
			
 
				+    clear: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-text {
			
 
				+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
			
 
				+    font-size: 12px;
			
 
				+    margin: 2px;
			
 
				+    white-space:nowrap;
			
 
				+    word-wrap:normal;
			
 
				+    float: left;
			
 
				+    clear: right;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button {
			
 
				+    width:90px;
			
 
				+    height:27px;
			
 
				+    margin:2px 1px 5px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-disable {
			
 
				+    opacity:.35;
			
 
				+    background-image:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterOK {
			
 
				+    margin-left:13px;
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+#gc-filterCancel {
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-default {
			
 
				+    border:1px solid #acacac;
			
 
				+    border-radius: 0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-hover {
			
 
				+    border:1px solid #7eb4ea;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
			
 
				+    color: black;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-active {
			
 
				+    border:1px solid #569de5;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #ffe475;
			
 
				+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-hover {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-default {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#1e395b;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-hover {
			
 
				+    border:1px solid #86bfa0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-default {
			
 
				+    border:1px solid #ababab;
			
 
				+    background: white;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-hover {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-active {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color:#9fd5b7;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#262626;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-menu-item-input {
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    margin:1px;
			
 
				+    float:left;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-menu-item-text {
			
 
				+    font-size:12px;
			
 
				+    font-weight:normal;
			
 
				+    display:inline-block;
			
 
				+    float:left;
			
 
				+    padding-top:2px;
			
 
				+    font-family:Arial;
			
 
				+}
			
 
				+.gc-fill-menu-container {
			
 
				+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
			
 
				+    cursor:default;
			
 
				+}
			
 
				+
			
 
				+.gc-toolstrip-default {
			
 
				+    background: white;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+.gc-toolstrip-button-style:active,
			
 
				+.gc-toolstrip-button-style {
			
 
				+    color: black;
			
 
				+    background:white;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-tab-tip-span{
			
 
				+     background:#D6E6F9;
			
 
				+     color:black;
			
 
				+     border:1px solid #D6E6F9;
			
 
				+     font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+.gc-spread-toolTip {
			
 
				+    border: 1px solid #bebebe;
			
 
				+    border-radius: 0px;
			
 
				+    background-color: white;    background-image: none;
			
 
				+    font-weight: normal;
			
 
				+    color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-no-user-select {
			
 
				+    -webkit-user-select: none;
			
 
				+    -khtml-user-select: none;
			
 
				+    -moz-user-select: none;
			
 
				+    -o-user-select: none;
			
 
				+    -ms-user-select: none;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+/*-----common css end-----*/
			
 
				+
			
 
				+/*-----formula textbox start-----*/
			
 
				+/* function autocomplete */
			
 
				+.gcsj-func-ac-popup {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+    background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,0.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row {
			
 
				+    margin: 0;
			
 
				+    cursor: default;
			
 
				+    padding: 2px 10px;
			
 
				+    color: #666666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-name {
			
 
				+     color: #222;
			
 
				+     font-size: 13px;
			
 
				+     font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+     margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-description {
			
 
				+    color: #666;
			
 
				+    display: none;
			
 
				+    font-size: 11px;
			
 
				+    margin: -2px 0;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active {
			
 
				+	background-color: #f5f5f5;
			
 
				+	color: #000;
			
 
				+	border-top: 1px solid #ebebeb;
			
 
				+	border-bottom: 1px solid #ebebeb;
			
 
				+	padding: 1px 10px
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active .gcsj-func-ac-row-description {
			
 
				+    display:block;
			
 
				+}
			
 
				+
			
 
				+/*  function help */
			
 
				+.gcsj-func-help-popup {
			
 
				+    background-color:#fff;
			
 
				+    border: 1px solid rgba(0,0,0,0.2);
			
 
				+    color: #222;
			
 
				+    font-size: 11px;
			
 
				+    word-wrap: break-word;
			
 
				+    position: absolute;
			
 
				+    width: 320px;
			
 
				+    z-index: 2001;
			
 
				+
			
 
				+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-title {
			
 
				+    background-color: #f5f5f5;
			
 
				+    color: #222;
			
 
				+    font-size: 13px;
			
 
				+    padding: 1px 0 1px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-body {
			
 
				+    border-top: 1px solid #ebebeb;
			
 
				+    font-family: arial, sans-serif;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-content {
			
 
				+    padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section {
			
 
				+    padding: 5px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-title {
			
 
				+    font-size: 11px;
			
 
				+    color: #666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-content {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula {
			
 
				+    font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+    padding: 1px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula-name {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter {
			
 
				+    padding-left:1px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-paren {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-active {
			
 
				+    background-color: #feb;
			
 
				+}
			
 
				+
			
 
				+/* color text */
			
 
				+.gcsj-func-color-content {
			
 
				+    white-space: pre-wrap;
			
 
				+}
			
 
				+/*-----formula textbox end-----*/
			
 
				+
			
 
				+/*-----floatingobject start-----*/
			
 
				+.gc-floatingobject-selected{
			
 
				+    border:1px solid #939393;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-unselected{
			
 
				+    background-color: transparent;
			
 
				+    border:1px solid transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-background-cover{
			
 
				+    -webkit-background-size: cover; /* For WebKit*/
			
 
				+    -moz-background-size: cover;    /* Mozilla*/
			
 
				+    -o-background-size: cover;      /* Opera*/
			
 
				+    background-size: cover;         /* Generic*/
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-div{
			
 
				+    position: absolute;
			
 
				+    border:1px solid black;
			
 
				+}
			
 
				+.gc-floatingobject-resize-indicator {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-select{
			
 
				+    background-color:white;
			
 
				+    border-radius:2px;
			
 
				+    -moz-border-radius:1px;
			
 
				+    border:1px solid #939393;
			
 
				+    z-index:100;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-unSelect{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-absolute{
			
 
				+    position: absolute;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-content-container {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+/*-----floatingobject end-----*/
			
 
				+
			
 
				+/*-----scrollbar start-----*/
			
 
				+/*scrollbar*/
			
 
				+.gc-scroll-container{
			
 
				+    background-color: #d9d9d9;
			
 
				+    -moz-box-shadow: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+    box-shadow: none;
			
 
				+}
			
 
				+.gc-scroll-corner-all {
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+.gc-scroll-arrow{
			
 
				+    background-color: white;
			
 
				+    border-style:solid;
			
 
				+    border-color: #ababab;
			
 
				+    background-image: none;
			
 
				+    border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowUp{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
			
 
				+    
			
 
				+}
			
 
				+.gc-scroll-arrowUp {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowDown {
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowDown {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowLeft{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowLeft {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowRight{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-scroll-arrowRight {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-vertical {
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-vertical {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-horizontal {
			
 
				+    text-indent: 0;
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-horizontal {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scrollbar-wrapper {
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background:  white;
			
 
				+    -moz-border-radius: 0px;
			
 
				+    -webkit-border-radius: 0px;
			
 
				+    border-radius: 0px;
			
 
				+}
			
 
				+.gc-scroll-arrow-hover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+.gc-scrollbar-stateHover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow:active,
			
 
				+.gc-scroll-bar:active,
			
 
				+.gc-scrollbar-stateActive {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: #e1e1e1;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+/*-----scrollbar end-----*/
			
 
				+
			
--- a/src/spreadjs/css/gc.spread.sheets.excel2013white.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.excel2013white.10.0.1.css
@@ -0,0 +1,850 @@
 
				+/*-----common css start-----*/
			
 
				+.gc-theme-version {
			
 
				+    position: absolute;
			
 
				+    z-index: 2013;
			
 
				+}
			
 
				+.gc-grayArea {
			
 
				+    background-color: white;
			
 
				+}
			
 
				+.gc-corner-hover {
			
 
				+    background-color: white;
			
 
				+}
			
 
				+.gc-corner-selected {
			
 
				+    background-color: white;
			
 
				+}
			
 
				+.gc-corner-normal {
			
 
				+    background-color: white;
			
 
				+}
			
 
				+.gc-corner-triangle-normal {
			
 
				+    background-color: #dfdfdf;
			
 
				+    background-image: -webkit-linear-gradient(top, #dfdfdf, #dfdfdf); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #dfdfdf, #dfdfdf); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #dfdfdf, #dfdfdf); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-hover {
			
 
				+    background-color: #9e9e9e;
			
 
				+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-selected {
			
 
				+    background-color: #217346;
			
 
				+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+}
			
 
				+.gc-columnHeader-normal {
			
 
				+    color: #444444;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-hover {
			
 
				+    color: #444444;
			
 
				+    background-image: none;
			
 
				+    background-color: #9fd5b7;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d3f0e0;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-columnHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #e1e1e1;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #efefef !important;
			
 
				+    border-right-color: #d5ded5 !important;
			
 
				+    border-bottom-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-normal {
			
 
				+    color: #444444;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-hover {
			
 
				+    color: #444444;
			
 
				+    background-color: #9fd5b7;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-rowHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-color: #e1e1e1;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #efefef !important;
			
 
				+    border-bottom-color: #d5ded5 !important;
			
 
				+    border-right-color: #ababab !important;
			
 
				+}
			
 
				+.gc-horizontal-scrollbar {
			
 
				+    background-color: #f6f6f6;
			
 
				+    border-top-color: #ababab;
			
 
				+}
			
 
				+.gc-vertical-scrollbar {
			
 
				+    background-color: #f6f6f6;
			
 
				+    border-left-color: #ababab;
			
 
				+}
			
 
				+.gc-footer-corner {
			
 
				+    background-color: #f6f6f6;
			
 
				+}
			
 
				+.gc-selection {
			
 
				+    background-color: rgba(20, 20, 20, 0.2);
			
 
				+    border-color: #217346;
			
 
				+    color: rgba(240,240,240,0.7);
			
 
				+}
			
 
				+.gc-drag-indicator {
			
 
				+    border-color: #217346;
			
 
				+}
			
 
				+.gc-gridlineColor {
			
 
				+    border-color: #d4d4d4;
			
 
				+}
			
 
				+.gc-group {
			
 
				+    background-color: white;
			
 
				+    color: #ababab;
			
 
				+}
			
 
				+.gc-group-box {
			
 
				+    background-color: white;
			
 
				+    color: #666666;
			
 
				+    border-color: #828790;
			
 
				+}
			
 
				+
			
 
				+.gc-tabStripNewTab-highlight {
			
 
				+    border-color: #777777;
			
 
				+}
			
 
				+.gc-tabStripNewTab-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-tabStripBackground {
			
 
				+    background-image: -webkit-linear-gradient(top, #f6f6f6, #f6f6f6); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f6f6f6, #f6f6f6); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f6f6f6, #f6f6f6); /* Standard syntax; must be last */
			
 
				+    background-color: #f6f6f6;
			
 
				+    border-color: #ababab;
			
 
				+}
			
 
				+.gc-tabStripResizeBarInner {
			
 
				+    color: #b3b3b3;
			
 
				+}
			
 
				+.gc-navMoreButton-highlight {
			
 
				+    border-color: #0a6332;
			
 
				+}
			
 
				+.gc-navMoreButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-highlight {
			
 
				+    border-color: #0a6332;
			
 
				+}
			
 
				+.gc-navButton-normal {
			
 
				+    border-color: #c6c6c6;
			
 
				+}
			
 
				+.gc-tab-normal {
			
 
				+    color: #444444;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-hover {
			
 
				+    color: #252627;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-active {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #ababab;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-rowHeaderFill {
			
 
				+    background-color: #e4ecf7;
			
 
				+}
			
 
				+.gc-colHeaderFill {
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
			
 
				+    background-color: #D2DBEB;
			
 
				+}
			
 
				+
			
 
				+.gc-gradientButton {
			
 
				+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
			
 
				+}
			
 
				+
			
 
				+.gc-sheetTabEditor::-ms-clear {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-layout-table {
			
 
				+    font-size:12px;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-first-column {
			
 
				+    width:21px;
			
 
				+    border-right:1px solid #CCC;
			
 
				+    text-align:right;
			
 
				+    padding-top:7px;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-last-column {
			
 
				+    width:18px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-sort-desc-container {
			
 
				+    border-bottom:1px solid #CCC;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-wrapper {
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-filter-dialog-style {
			
 
				+    background:#fcfdfd;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+    font-size:12px;
			
 
				+    border:1px solid #a7abb0;
			
 
				+}
			
 
				+
			
 
				+.gc-search-outer-div {
			
 
				+    border: none;
			
 
				+    margin:4px 0px 0px 4px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+div.gc-search-outer-div input::-ms-clear{
			
 
				+   display:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterSearch {
			
 
				+    width:165px;
			
 
				+    height:21px;
			
 
				+    border:1px solid #ababab;
			
 
				+    margin-left:7px;
			
 
				+    margin-top:4px;
			
 
				+    margin-bottom: 0px;
			
 
				+    padding: 0;
			
 
				+    font-size: 1em;
			
 
				+    background-color:white;
			
 
				+    color:black;
			
 
				+    float:none;
			
 
				+}
			
 
				+#gc-filterSearch:hover,
			
 
				+#gc-filterSearch:active{
			
 
				+    background-color:white;
			
 
				+}
			
 
				+
			
 
				+.gc-check-uncheck-all {
			
 
				+    float:left;
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-check-image,
			
 
				+.gc-fill-type-item .gc-check-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-uncheck-image,
			
 
				+.gc-fill-type-item .gc-uncheck-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-check-image,
			
 
				+.gc-uncheck-image {
			
 
				+    background-position:center;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-check-outerDiv {
			
 
				+    height:18px;
			
 
				+    margin-top:4px;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check-style {
			
 
				+    color:#1e395b;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check:hover {
			
 
				+    text-decoration:underline;
			
 
				+}
			
 
				+#gc-sortASC:hover,
			
 
				+#gc-sortASC:active {
			
 
				+    border-color: #e3e3e3;
			
 
				+    outline: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+            box-shadow: none;  
			
 
				+}
			
 
				+.gc-filter-sort {
			
 
				+    border:1px solid transparent;
			
 
				+    font-weight:normal;
			
 
				+    color:#222222;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-hover {
			
 
				+    border-radius: 0px;
			
 
				+    outline:none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item {
			
 
				+    position: relative;
			
 
				+    cursor: default;
			
 
				+    font-weight:normal;
			
 
				+    border-style: solid;
			
 
				+    border-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-container {
			
 
				+    border:1px solid #a7abb0;
			
 
				+    border-radius:3px;
			
 
				+    margin:4px 0px 4px 4px;
			
 
				+    overflow:hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-input {
			
 
				+    float: left;
			
 
				+    clear: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-text {
			
 
				+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
			
 
				+    font-size: 12px;
			
 
				+    margin: 2px;
			
 
				+    white-space:nowrap;
			
 
				+    word-wrap:normal;
			
 
				+    float: left;
			
 
				+    clear: right;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button {
			
 
				+    width:90px;
			
 
				+    height:27px;
			
 
				+    margin:2px 1px 5px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-disable {
			
 
				+    opacity:.35;
			
 
				+    background-image:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterOK {
			
 
				+    margin-left:13px;
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+#gc-filterCancel {
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-default {
			
 
				+    border:1px solid #acacac;
			
 
				+    border-radius: 0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-hover {
			
 
				+    border:1px solid #7eb4ea;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
			
 
				+    color: black;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-active {
			
 
				+    border:1px solid #569de5;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #ffe475;
			
 
				+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-hover {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-default {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#1e395b;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-hover {
			
 
				+    border:1px solid #86bfa0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-default {
			
 
				+    border:1px solid #ababab;
			
 
				+    background: white;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-hover {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-active {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color:#9fd5b7;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#262626;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-menu-item-input {
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    margin:1px;
			
 
				+    float:left;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-menu-item-text {
			
 
				+    font-size:12px;
			
 
				+    font-weight:normal;
			
 
				+    display:inline-block;
			
 
				+    float:left;
			
 
				+    padding-top:2px;
			
 
				+    font-family:Arial;
			
 
				+}
			
 
				+.gc-fill-menu-container {
			
 
				+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
			
 
				+    cursor:default;
			
 
				+}
			
 
				+
			
 
				+.gc-toolstrip-default {
			
 
				+    background: white;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+.gc-toolstrip-button-style:active,
			
 
				+.gc-toolstrip-button-style {
			
 
				+    color: black;
			
 
				+    background:white;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-tab-tip-span{
			
 
				+     background:#D6E6F9;
			
 
				+     color:black;
			
 
				+     border:1px solid #D6E6F9;
			
 
				+     font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+.gc-spread-toolTip {
			
 
				+    border: 1px solid #bebebe;
			
 
				+    border-radius: 0px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight: normal;
			
 
				+    color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-no-user-select {
			
 
				+    -webkit-user-select: none;
			
 
				+    -khtml-user-select: none;
			
 
				+    -moz-user-select: none;
			
 
				+    -o-user-select: none;
			
 
				+    -ms-user-select: none;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+/*-----common css end-----*/
			
 
				+
			
 
				+/*-----formula textbox start-----*/
			
 
				+/* function autocomplete */
			
 
				+.gcsj-func-ac-popup {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+    background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,0.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row {
			
 
				+    margin: 0;
			
 
				+    cursor: default;
			
 
				+    padding: 2px 10px;
			
 
				+    color: #666666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-name {
			
 
				+     color: #222;
			
 
				+     font-size: 13px;
			
 
				+     font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+     margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-description {
			
 
				+    color: #666;
			
 
				+    display: none;
			
 
				+    font-size: 11px;
			
 
				+    margin: -2px 0;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active {
			
 
				+	background-color: #f5f5f5;
			
 
				+	color: #000;
			
 
				+	border-top: 1px solid #ebebeb;
			
 
				+	border-bottom: 1px solid #ebebeb;
			
 
				+	padding: 1px 10px
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active .gcsj-func-ac-row-description {
			
 
				+    display:block;
			
 
				+}
			
 
				+
			
 
				+/*  function help */
			
 
				+.gcsj-func-help-popup {
			
 
				+    background-color:#fff;
			
 
				+    border: 1px solid rgba(0,0,0,0.2);
			
 
				+    color: #222;
			
 
				+    font-size: 11px;
			
 
				+    word-wrap: break-word;
			
 
				+    position: absolute;
			
 
				+    width: 320px;
			
 
				+    z-index: 2001;
			
 
				+
			
 
				+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-title {
			
 
				+    background-color: #f5f5f5;
			
 
				+    color: #222;
			
 
				+    font-size: 13px;
			
 
				+    padding: 1px 0 1px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-body {
			
 
				+    border-top: 1px solid #ebebeb;
			
 
				+    font-family: arial, sans-serif;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-content {
			
 
				+    padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section {
			
 
				+    padding: 5px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-title {
			
 
				+    font-size: 11px;
			
 
				+    color: #666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-content {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula {
			
 
				+    font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+    padding: 1px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula-name {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter {
			
 
				+    padding-left:1px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-paren {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-active {
			
 
				+    background-color: #feb;
			
 
				+}
			
 
				+
			
 
				+/* color text */
			
 
				+.gcsj-func-color-content {
			
 
				+    white-space: pre-wrap;
			
 
				+}
			
 
				+/*-----formula textbox end-----*/
			
 
				+
			
 
				+/*-----floatingobject start-----*/
			
 
				+.gc-floatingobject-selected{
			
 
				+    border:1px solid #939393;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-unselected{
			
 
				+    background-color: transparent;
			
 
				+    border:1px solid transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-background-cover{
			
 
				+    -webkit-background-size: cover; /* For WebKit*/
			
 
				+    -moz-background-size: cover;    /* Mozilla*/
			
 
				+    -o-background-size: cover;      /* Opera*/
			
 
				+    background-size: cover;         /* Generic*/
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-div{
			
 
				+    position: absolute;
			
 
				+    border:1px solid black;
			
 
				+}
			
 
				+.gc-floatingobject-resize-indicator {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-select{
			
 
				+    background-color:white;
			
 
				+    border-radius:2px;
			
 
				+    -moz-border-radius:1px;
			
 
				+    border:1px solid #939393;
			
 
				+    z-index:100;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-unSelect{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-absolute{
			
 
				+    position: absolute;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-content-container {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+/*-----floatingobject end-----*/
			
 
				+
			
 
				+/*-----scrollbar start-----*/
			
 
				+/*scrollbar*/
			
 
				+.gc-scroll-container{
			
 
				+    background-color: #eaeaea;
			
 
				+    -moz-box-shadow: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+    box-shadow: none;
			
 
				+}
			
 
				+.gc-scroll-corner-all {
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+.gc-scroll-arrow{
			
 
				+    background-color: white;
			
 
				+    border-style:solid;
			
 
				+    border-color: #ababab;
			
 
				+    background-image: none;
			
 
				+    border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowUp{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
			
 
				+    
			
 
				+}
			
 
				+.gc-scroll-arrowUp {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowDown {
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowDown {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowLeft{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowLeft {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowRight{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-scroll-arrowRight {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-vertical {
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-vertical {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-horizontal {
			
 
				+    text-indent: 0;
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-horizontal {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scrollbar-wrapper {
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background:  white;
			
 
				+    -moz-border-radius: 0px;
			
 
				+    -webkit-border-radius: 0px;
			
 
				+    border-radius: 0px;
			
 
				+}
			
 
				+.gc-scroll-arrow-hover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+.gc-scrollbar-stateHover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background: #f0f0f0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow:active,
			
 
				+.gc-scroll-bar:active,
			
 
				+.gc-scrollbar-stateActive {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: #f0f0f0;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+/*-----scrollbar end-----*/
			
 
				+
			
--- a/src/spreadjs/css/gc.spread.sheets.excel2016colorful.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.excel2016colorful.10.0.1.css
@@ -0,0 +1,857 @@
 
				+/*-----common css start-----*/
			
 
				+.gc-theme-version {
			
 
				+    position: absolute;
			
 
				+    z-index: 2016;
			
 
				+}
			
 
				+.gc-grayArea {
			
 
				+    background-color: #e6e6e6;
			
 
				+}
			
 
				+.gc-corner-hover {
			
 
				+    background-color: #e6e6e6;
			
 
				+}
			
 
				+.gc-corner-selected {
			
 
				+    background-color: #e6e6e6;
			
 
				+}
			
 
				+.gc-corner-normal {
			
 
				+    background-color: #e6e6e6;
			
 
				+}
			
 
				+.gc-corner-triangle-normal {
			
 
				+    background-color: #b4b4b4;
			
 
				+    background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #b4b4b4, #b4b4b4); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #b4b4b4, #b4b4b4); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d6d6d6 !important;
			
 
				+    border-right-color: #9b9b9b !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-corner-triangle-hover {
			
 
				+    background-color: #9e9e9e;
			
 
				+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d6d6d6 !important;
			
 
				+    border-right-color: #9b9b9b !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-corner-triangle-selected {
			
 
				+    background-color: #217346;
			
 
				+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d6d6d6 !important;
			
 
				+    border-right-color: #9b9b9b !important;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+}
			
 
				+.gc-columnHeader-normal {
			
 
				+    color: black;
			
 
				+    background-image: none;
			
 
				+    background-color: #e6e6e6;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-hover {
			
 
				+    color: black;
			
 
				+    background-image: none;
			
 
				+    background-color: #9fd5b7;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d3f0e0;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: #d2d2d2;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #d2d2d2 !important;
			
 
				+    border-right-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-normal {
			
 
				+    color: black;
			
 
				+    background-color: #e6e6e6;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-hover {
			
 
				+    color: black;
			
 
				+    background-color: #9fd5b7;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-selected {
			
 
				+    color: #217346;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-highlight {
			
 
				+    color: #217346;
			
 
				+    background-color: #d2d2d2;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #9c9c9c !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-horizontal-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #e6e6e6;
			
 
				+    border-top: 1px solid #999999;
			
 
				+    height: 18px;
			
 
				+    padding: 4px 0px 5px 0px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-vertical-scrollbar {
			
 
				+    box-sizing:content-box;
			
 
				+    background: #e6e6e6;
			
 
				+    border-left: 1px solid #999999;
			
 
				+    width: 18px;
			
 
				+    padding: 0px 5px 0px 4px;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.gc-footer-corner {
			
 
				+    background-color: #e6e6e6;
			
 
				+}
			
 
				+.gc-selection {
			
 
				+    background-color: rgba(20, 20, 20, 0.2);
			
 
				+    border-color: #217346;
			
 
				+    color: rgba(240,240,240,0.7);
			
 
				+}
			
 
				+.gc-drag-indicator {
			
 
				+    border-color: #217346;
			
 
				+}
			
 
				+.gc-gridlineColor {
			
 
				+    border-color: #d4d4d4;
			
 
				+}
			
 
				+.gc-group {
			
 
				+    background-color: #e6e6e6;
			
 
				+    color: #999999;
			
 
				+}
			
 
				+.gc-group-box {
			
 
				+    background-color: #e4e4e4;
			
 
				+    color: #646464;
			
 
				+    border-color: #828790;
			
 
				+}
			
 
				+
			
 
				+.gc-tabStripNewTab-highlight {
			
 
				+    border-color: #777777;
			
 
				+}
			
 
				+.gc-tabStripNewTab-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-tabStripBackground {
			
 
				+    background-image: -webkit-linear-gradient(top, #e6e6e6, #e6e6e6); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #e6e6e6, #e6e6e6); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #e6e6e6, #e6e6e6); /* Standard syntax; must be last */
			
 
				+    background-color: #e6e6e6;
			
 
				+    border-color: #999999;
			
 
				+}
			
 
				+.gc-tabStripResizeBarInner {
			
 
				+    color: #b3b3b3;
			
 
				+}
			
 
				+.gc-navMoreButton-highlight {
			
 
				+    border-color: #0a6332;
			
 
				+}
			
 
				+.gc-navMoreButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-hover {
			
 
				+    border-color: #439467;
			
 
				+}
			
 
				+.gc-navButton-highlight {
			
 
				+    border-color: #0a6332;
			
 
				+}
			
 
				+.gc-navButton-normal {
			
 
				+    border-color: #c6c6c6;
			
 
				+}
			
 
				+.gc-tab-normal {
			
 
				+    color: #444444;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-hover {
			
 
				+    color: #252627;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-active {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-rowHeaderFill {
			
 
				+    background-color: #e4ecf7;
			
 
				+}
			
 
				+.gc-colHeaderFill {
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
			
 
				+    background-color: #D2DBEB;
			
 
				+}
			
 
				+
			
 
				+.gc-gradientButton {
			
 
				+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
			
 
				+}
			
 
				+
			
 
				+.gc-sheetTabEditor::-ms-clear {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-layout-table {
			
 
				+    font-size:12px;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-first-column {
			
 
				+    width:21px;
			
 
				+    border-right:1px solid #CCC;
			
 
				+    text-align:right;
			
 
				+    padding-top:7px;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-last-column {
			
 
				+    width:18px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-sort-desc-container {
			
 
				+    border-bottom:1px solid #CCC;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-wrapper {
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-filter-dialog-style {
			
 
				+    background:#ffffff;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+    font-size:12px;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+
			
 
				+.gc-search-outer-div {
			
 
				+    border: none;
			
 
				+    margin:4px 0px 0px 4px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+div.gc-search-outer-div input::-ms-clear{
			
 
				+   display:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterSearch {
			
 
				+    width:165px;
			
 
				+    height:21px;
			
 
				+    border:1px solid #ababab;
			
 
				+    margin-left:7px;
			
 
				+    margin-top:4px;
			
 
				+    margin-bottom: 0px;
			
 
				+    padding: 0;
			
 
				+    font-size: 1em;
			
 
				+    background-color:white;
			
 
				+    color:black;
			
 
				+    float:none;
			
 
				+}
			
 
				+#gc-filterSearch:hover,
			
 
				+#gc-filterSearch:active{
			
 
				+    background-color:white;
			
 
				+}
			
 
				+
			
 
				+.gc-check-uncheck-all {
			
 
				+    float:left;
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-check-image,
			
 
				+.gc-fill-type-item .gc-check-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-uncheck-image,
			
 
				+.gc-fill-type-item .gc-uncheck-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-check-image,
			
 
				+.gc-uncheck-image {
			
 
				+    background-position:center;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-check-outerDiv {
			
 
				+    height:18px;
			
 
				+    margin-top:4px;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check-style {
			
 
				+    color:#1e395b;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check:hover {
			
 
				+    text-decoration:underline;
			
 
				+}
			
 
				+#gc-sortASC:hover,
			
 
				+#gc-sortASC:active {
			
 
				+    border-color: #e3e3e3;
			
 
				+    outline: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+            box-shadow: none;  
			
 
				+}
			
 
				+.gc-filter-sort {
			
 
				+    border:1px solid transparent;
			
 
				+    font-weight:normal;
			
 
				+    color:#222222;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-hover {
			
 
				+    border-radius: 0px;
			
 
				+    outline:none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item {
			
 
				+    position: relative;
			
 
				+    cursor: default;
			
 
				+    font-weight:normal;
			
 
				+    border-style: solid;
			
 
				+    border-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-container {
			
 
				+    border:1px solid #a7abb0;
			
 
				+    border-radius:3px;
			
 
				+    margin:4px 0px 4px 4px;
			
 
				+    overflow:hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-input {
			
 
				+    float: left;
			
 
				+    clear: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-text {
			
 
				+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
			
 
				+    font-size: 12px;
			
 
				+    margin: 2px;
			
 
				+    white-space:nowrap;
			
 
				+    word-wrap:normal;
			
 
				+    float: left;
			
 
				+    clear: right;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button {
			
 
				+    width:90px;
			
 
				+    height:27px;
			
 
				+    border-radius:3px;
			
 
				+    margin:2px 1px 5px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-disable {
			
 
				+    opacity:.35;
			
 
				+    background-image:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterOK {
			
 
				+    margin-left:13px;
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+#gc-filterCancel {
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-default {
			
 
				+    border:1px solid #acacac;
			
 
				+    border-radius: 0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-hover {
			
 
				+    border:1px solid #7eb4ea;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
			
 
				+    color: black;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-active {
			
 
				+    border:1px solid #569de5;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-hover {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: #c5c5c5;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-default {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#1e395b;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-hover {
			
 
				+    border:1px solid #86bfa0;
			
 
				+    background-color: #d3f0e0;    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-default {
			
 
				+    border:1px solid #ababab;
			
 
				+    background: white;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-hover {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color: white;    
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-active {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color:#9fd5b7;    
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#262626;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-menu-item-input {
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    margin:1px;
			
 
				+    float:left;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-menu-item-text {
			
 
				+    font-size:12px;
			
 
				+    font-weight:normal;
			
 
				+    display:inline-block;
			
 
				+    float:left;
			
 
				+    padding-top:2px;
			
 
				+    font-family:Arial;
			
 
				+}
			
 
				+.gc-fill-menu-container {
			
 
				+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
			
 
				+    cursor:default;
			
 
				+}
			
 
				+
			
 
				+.gc-toolstrip-default {
			
 
				+    background: white;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+.gc-toolstrip-button-style:active,
			
 
				+.gc-toolstrip-button-style {
			
 
				+    color: black;
			
 
				+    background:white;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-tab-tip-span{
			
 
				+     background:#D6E6F9;
			
 
				+     color:black;
			
 
				+     border:1px solid #D6E6F9;
			
 
				+     font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+.gc-spread-toolTip {
			
 
				+    border: 1px solid #bebebe;
			
 
				+    border-radius: 0px;
			
 
				+    background-color: white;    background-image: none;
			
 
				+    font-weight: normal;
			
 
				+    color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-no-user-select {
			
 
				+    -webkit-user-select: none;
			
 
				+    -khtml-user-select: none;
			
 
				+    -moz-user-select: none;
			
 
				+    -o-user-select: none;
			
 
				+    -ms-user-select: none;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+/*-----common css end-----*/
			
 
				+
			
 
				+/*-----formula textbox start-----*/
			
 
				+/* function autocomplete */
			
 
				+/* function autocomplete */
			
 
				+.gcsj-func-ac-popup {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+    background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,0.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row {
			
 
				+    margin: 0;
			
 
				+    cursor: default;
			
 
				+    padding: 2px 10px;
			
 
				+    color: #666666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-name {
			
 
				+     color: #222;
			
 
				+     font-size: 13px;
			
 
				+     font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+     margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-description {
			
 
				+    color: #666;
			
 
				+    display: none;
			
 
				+    font-size: 11px;
			
 
				+    margin: -2px 0;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active {
			
 
				+	background-color: #f5f5f5;
			
 
				+	color: #000;
			
 
				+	border-top: 1px solid #ebebeb;
			
 
				+	border-bottom: 1px solid #ebebeb;
			
 
				+	padding: 1px 10px
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active .gcsj-func-ac-row-description {
			
 
				+    display:block;
			
 
				+}
			
 
				+
			
 
				+/*  function help */
			
 
				+.gcsj-func-help-popup {
			
 
				+    background-color:#fff;
			
 
				+    border: 1px solid rgba(0,0,0,0.2);
			
 
				+    color: #222;
			
 
				+    font-size: 11px;
			
 
				+    word-wrap: break-word;
			
 
				+    position: absolute;
			
 
				+    width: 320px;
			
 
				+    z-index: 2001;
			
 
				+
			
 
				+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-title {
			
 
				+    background-color: #f5f5f5;
			
 
				+    color: #222;
			
 
				+    font-size: 13px;
			
 
				+    padding: 1px 0 1px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-body {
			
 
				+    border-top: 1px solid #ebebeb;
			
 
				+    font-family: arial, sans-serif;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-content {
			
 
				+    padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section {
			
 
				+    padding: 5px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-title {
			
 
				+    font-size: 11px;
			
 
				+    color: #666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-content {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula {
			
 
				+    font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+    padding: 1px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula-name {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter {
			
 
				+    padding-left:1px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-paren {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-active {
			
 
				+    background-color: #feb;
			
 
				+}
			
 
				+
			
 
				+/* color text */
			
 
				+.gcsj-func-color-content {
			
 
				+    white-space: pre-wrap;
			
 
				+}
			
 
				+/*-----formula textbox end-----*/
			
 
				+
			
 
				+/*-----floatingobject start-----*/
			
 
				+.gc-floatingobject-selected{
			
 
				+    border:1px solid #939393;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-unselected{
			
 
				+    background-color: transparent;
			
 
				+    border:1px solid transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-background-cover{
			
 
				+    -webkit-background-size: cover; /* For WebKit*/
			
 
				+    -moz-background-size: cover;    /* Mozilla*/
			
 
				+    -o-background-size: cover;      /* Opera*/
			
 
				+    background-size: cover;         /* Generic*/
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-div{
			
 
				+    position: absolute;
			
 
				+    border:1px solid black;
			
 
				+}
			
 
				+.gc-floatingobject-resize-indicator {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-select{
			
 
				+    background-color:white;
			
 
				+    border-radius:2px;
			
 
				+    -moz-border-radius:1px;
			
 
				+    border:1px solid #939393;
			
 
				+    z-index:100;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-unSelect{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-absolute{
			
 
				+    position: absolute;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-content-container {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+/*-----floatingobject end-----*/
			
 
				+
			
 
				+/*-----scrollbar start-----*/
			
 
				+/*scrollbar*/
			
 
				+.gc-scroll-container{
			
 
				+    background-color: #dbdbdb;
			
 
				+    -moz-box-shadow: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+    box-shadow: none;
			
 
				+}
			
 
				+.gc-scroll-corner-all {
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+.gc-scroll-arrow{
			
 
				+    background-color: white;
			
 
				+    border-style:solid;
			
 
				+    border-color: #ababab;
			
 
				+    background-image: none;
			
 
				+    border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowUp{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
			
 
				+    
			
 
				+}
			
 
				+.gc-scroll-arrowUp {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowDown {
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowDown {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowLeft{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowLeft {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowRight{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-scroll-arrowRight {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-vertical {
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-vertical {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-horizontal {
			
 
				+    text-indent: 0;
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-horizontal {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scrollbar-wrapper {
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background:  white;
			
 
				+    -moz-border-radius: 0px;
			
 
				+    -webkit-border-radius: 0px;
			
 
				+    border-radius: 0px;
			
 
				+}
			
 
				+.gc-scroll-arrow-hover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: white;
			
 
				+}
			
 
				+.gc-scrollbar-stateHover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#ababab;
			
 
				+    background: #f0f0f0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow:active,
			
 
				+.gc-scroll-bar:active,
			
 
				+.gc-scrollbar-stateActive {
			
 
				+    border-style:solid;
			
 
				+    border-color:#777777;
			
 
				+    background: #f0f0f0;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+/*-----scrollbar end-----*/
			
 
				+
			
--- a/src/spreadjs/css/gc.spread.sheets.excel2016darkGray.10.0.1.css
+++ b/src/spreadjs/css/gc.spread.sheets.excel2016darkGray.10.0.1.css
@@ -0,0 +1,850 @@
 
				+/*-----common css start-----*/
			
 
				+.gc-theme-version {
			
 
				+    position: absolute;
			
 
				+    z-index: 2016;
			
 
				+}
			
 
				+.gc-grayArea {
			
 
				+    background-color: #6a6a6a;
			
 
				+}
			
 
				+.gc-corner-hover {
			
 
				+    background-color: #6a6a6a;
			
 
				+}
			
 
				+.gc-corner-selected {
			
 
				+    background-color: #6a6a6a;
			
 
				+}
			
 
				+.gc-corner-normal {
			
 
				+    background-color: #6a6a6a;
			
 
				+}
			
 
				+.gc-corner-triangle-normal {
			
 
				+    background-color: #f0f0f0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #f0f0f0); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #f0f0f0); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #999999 !important;
			
 
				+    border-right-color: #d3d3d3 !important;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-hover {
			
 
				+    background-color: #ffffff;
			
 
				+    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ffffff, #ffffff); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ffffff, #ffffff); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ffffff, #ffffff); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ffffff, #ffffff); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #999999 !important;
			
 
				+    border-right-color: #d3d3d3 !important;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+}
			
 
				+.gc-corner-triangle-selected {
			
 
				+    background-color: #217346;
			
 
				+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #999999 !important;
			
 
				+    border-right-color: #d3d3d3 !important;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+}
			
 
				+.gc-columnHeader-normal {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: #6a6a6a;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #9c9c9c !important;
			
 
				+    border-right-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-hover {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: #0a6332;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #9c9c9c !important;
			
 
				+    border-right-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-selected {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: #217346;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #9c9c9c !important;
			
 
				+    border-right-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-columnHeader-highlight {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: #262626;
			
 
				+    border-style:solid;
			
 
				+    border-left-color: #9c9c9c !important;
			
 
				+    border-right-color: #d2d2d2 !important;
			
 
				+    border-bottom-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-normal {
			
 
				+    color: #ffffff;
			
 
				+    background-color: #6a6a6a;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-hover {
			
 
				+    color: #ffffff;
			
 
				+    background-color: #0a6332;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-selected {
			
 
				+    color: #ffffff;
			
 
				+    background-color: #217346;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-rowHeader-highlight {
			
 
				+    color: #ffffff;
			
 
				+    background-color: #262626;
			
 
				+    background-image: none;
			
 
				+    border-style:solid;
			
 
				+    border-top-color: #9c9c9c !important;
			
 
				+    border-bottom-color: #d2d2d2 !important;
			
 
				+    border-right-color: #999999 !important;
			
 
				+}
			
 
				+.gc-horizontal-scrollbar {
			
 
				+    background-color: #6a6a6a;
			
 
				+    border-top-color: #999999;
			
 
				+}
			
 
				+.gc-vertical-scrollbar {
			
 
				+    background-color: #6a6a6a;
			
 
				+    border-left-color: #999999;
			
 
				+}
			
 
				+.gc-footer-corner {
			
 
				+    background-color: #6a6a6a;
			
 
				+}
			
 
				+.gc-selection {
			
 
				+    background-color: rgba(20, 20, 20, 0.2);
			
 
				+    border-color: #217346;
			
 
				+    color: rgba(240,240,240,0.7);
			
 
				+}
			
 
				+.gc-drag-indicator {
			
 
				+    border-color: #217346;
			
 
				+}
			
 
				+.gc-gridlineColor {
			
 
				+    border-color: #d4d4d4;
			
 
				+}
			
 
				+.gc-group {
			
 
				+    background-color: #6a6a6a;
			
 
				+    color: #999999;
			
 
				+}
			
 
				+.gc-group-box {
			
 
				+    background-color: #e4e4e4;
			
 
				+    color: #646464;
			
 
				+    border-color: #828790;
			
 
				+}
			
 
				+
			
 
				+.gc-tabStripNewTab-highlight {
			
 
				+    border-color: #f0f0f0;
			
 
				+}
			
 
				+.gc-tabStripNewTab-hover {
			
 
				+    border-color: #86bfa0;
			
 
				+}
			
 
				+.gc-tabStripBackground {
			
 
				+    background-image: -webkit-linear-gradient(top, #6a6a6a, #6a6a6a); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #6a6a6a, #6a6a6a); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #6a6a6a, #6a6a6a); /* Standard syntax; must be last */
			
 
				+    background-color: #6a6a6a;
			
 
				+    border-color: #999999;
			
 
				+}
			
 
				+.gc-tabStripResizeBarInner {
			
 
				+    color: #f0f0f0;
			
 
				+}
			
 
				+.gc-navMoreButton-highlight {
			
 
				+    border-color: #f0f0f0;
			
 
				+}
			
 
				+.gc-navMoreButton-hover {
			
 
				+    border-color: #86bfa0;
			
 
				+}
			
 
				+.gc-navButton-hover {
			
 
				+    border-color: #86bfa0;
			
 
				+}
			
 
				+.gc-navButton-highlight {
			
 
				+    border-color: #f0f0f0;
			
 
				+}
			
 
				+.gc-navButton-normal {
			
 
				+    border-color: #a3a3a3;
			
 
				+}
			
 
				+.gc-tab-normal {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-hover {
			
 
				+    color: #ffffff;
			
 
				+    background-image: none;
			
 
				+    background-color: transparent;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+.gc-tab-active {
			
 
				+    color: #217346;
			
 
				+    background-image: none;
			
 
				+    background-color: white;
			
 
				+    border-style: solid;
			
 
				+    border-left-color: #999999;
			
 
				+    border-bottom-color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-rowHeaderFill {
			
 
				+    background-color: #e4ecf7;
			
 
				+}
			
 
				+.gc-colHeaderFill {
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
			
 
				+    background-color: #D2DBEB;
			
 
				+}
			
 
				+
			
 
				+.gc-gradientButton {
			
 
				+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
			
 
				+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
			
 
				+}
			
 
				+
			
 
				+.gc-sheetTabEditor::-ms-clear {
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-layout-table {
			
 
				+    font-size:12px;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-first-column {
			
 
				+    width:21px;
			
 
				+    border-right:1px solid #CCC;
			
 
				+    text-align:right;
			
 
				+    padding-top:7px;
			
 
				+}
			
 
				+
			
 
				+.gc-layout-table-last-column {
			
 
				+    width:18px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-sort-desc-container {
			
 
				+    border-bottom:1px solid #CCC;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-wrapper {
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-filter-dialog-style {
			
 
				+    background:#f0f0f0;
			
 
				+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
			
 
				+    font-size:12px;
			
 
				+    border:1px solid #acacac;
			
 
				+}
			
 
				+
			
 
				+.gc-search-outer-div {
			
 
				+    border: none;
			
 
				+    margin:4px 0px 0px 4px;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+div.gc-search-outer-div input::-ms-clear{
			
 
				+   display:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterSearch {
			
 
				+    width:165px;
			
 
				+    height:21px;
			
 
				+    border:1px solid #ababab;
			
 
				+    margin-left:7px;
			
 
				+    margin-top:4px;
			
 
				+    margin-bottom: 0px;
			
 
				+    padding: 0;
			
 
				+    font-size: 1em;
			
 
				+    background-color:white;
			
 
				+    color:black;
			
 
				+    float:none;
			
 
				+}
			
 
				+#gc-filterSearch:hover,
			
 
				+#gc-filterSearch:active{
			
 
				+    background-color:white;
			
 
				+}
			
 
				+
			
 
				+.gc-check-uncheck-all {
			
 
				+    float:left;
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-check-image,
			
 
				+.gc-fill-type-item .gc-check-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-filter-check-outerDiv .gc-uncheck-image,
			
 
				+.gc-fill-type-item .gc-uncheck-image {
			
 
				+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-check-image,
			
 
				+.gc-uncheck-image {
			
 
				+    background-position:center;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-check-outerDiv {
			
 
				+    height:18px;
			
 
				+    margin-top:4px;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check-style {
			
 
				+    color:#1e395b;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+a.gc-filter-check:hover {
			
 
				+    text-decoration:underline;
			
 
				+}
			
 
				+#gc-sortASC:hover,
			
 
				+#gc-sortASC:active {
			
 
				+    border-color: #e3e3e3;
			
 
				+    outline: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+            box-shadow: none;  
			
 
				+}
			
 
				+.gc-filter-sort {
			
 
				+    border:1px solid transparent;
			
 
				+    font-weight:normal;
			
 
				+    color:#222222;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-hover {
			
 
				+    border-radius: 0px;
			
 
				+    outline:none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item {
			
 
				+    position: relative;
			
 
				+    cursor: default;
			
 
				+    font-weight:normal;
			
 
				+    border-style: solid;
			
 
				+    border-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-container {
			
 
				+    border:1px solid #a7abb0;
			
 
				+    border-radius:3px;
			
 
				+    margin:4px 0px 4px 4px;
			
 
				+    overflow:hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-input {
			
 
				+    float: left;
			
 
				+    clear: left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-text {
			
 
				+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
			
 
				+    font-size: 12px;
			
 
				+    margin: 2px;
			
 
				+    white-space:nowrap;
			
 
				+    word-wrap:normal;
			
 
				+    float: left;
			
 
				+    clear: right;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button {
			
 
				+    width:90px;
			
 
				+    height:27px;
			
 
				+    margin:2px 1px 5px;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-disable {
			
 
				+    opacity:.35;
			
 
				+    background-image:none;
			
 
				+}
			
 
				+
			
 
				+#gc-filterOK {
			
 
				+    margin-left:13px;
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+#gc-filterCancel {
			
 
				+    margin-bottom:5px;
			
 
				+    float:left;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-default {
			
 
				+    border:1px solid #acacac;
			
 
				+    border-radius: 0;
			
 
				+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-hover {
			
 
				+    border:1px solid #7eb4ea;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
			
 
				+    color: black;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+    cursor:pointer;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-button-active {
			
 
				+    border:1px solid #569de5;
			
 
				+    border-radius: 0;
			
 
				+    background-color: #ffe475;
			
 
				+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
			
 
				+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
			
 
				+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
			
 
				+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
			
 
				+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
			
 
				+    font-weight:normal;
			
 
				+    color: black;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-filter-item-hover {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: #969696;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-default {
			
 
				+    border:1px solid transparent;
			
 
				+    background-color: white;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#1e395b;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smartMenu-item-hover {
			
 
				+    border:1px solid #86bfa0;
			
 
				+    background-color: #d3f0e0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-default {
			
 
				+    border:1px solid #ababab;
			
 
				+    background: #f0f0f0;
			
 
				+    color:#1e395b;
			
 
				+    font-weight:normal;
			
 
				+    border-radius:0;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-hover {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color: #f0f0f0;
			
 
				+    background-image: none;
			
 
				+    color:#1d5987;
			
 
				+    font-weight:normal;
			
 
				+    text-shadow:none;
			
 
				+}
			
 
				+
			
 
				+.gc-smart-tag-active {
			
 
				+    border:1px solid #9fd5b7;
			
 
				+    background-color:#9fd5b7;
			
 
				+    background-image: none;
			
 
				+    font-weight:normal;
			
 
				+    color:#262626;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.gc-menu-item-input {
			
 
				+    width:16px;
			
 
				+    height:16px;
			
 
				+    margin:1px;
			
 
				+    float:left;
			
 
				+    display:inline-block;
			
 
				+}
			
 
				+.gc-menu-item-text {
			
 
				+    font-size:12px;
			
 
				+    font-weight:normal;
			
 
				+    display:inline-block;
			
 
				+    float:left;
			
 
				+    padding-top:2px;
			
 
				+    font-family:Arial;
			
 
				+}
			
 
				+.gc-fill-menu-container {
			
 
				+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
			
 
				+    cursor:default;
			
 
				+}
			
 
				+
			
 
				+.gc-toolstrip-default {
			
 
				+    background: white;
			
 
				+    border:1px solid #c6c6c6;
			
 
				+}
			
 
				+.gc-toolstrip-button-style:active,
			
 
				+.gc-toolstrip-button-style {
			
 
				+    color: black;
			
 
				+    background:white;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+
			
 
				+.gc-tab-tip-span{
			
 
				+     background:#D6E6F9;
			
 
				+     color:black;
			
 
				+     border:1px solid #D6E6F9;
			
 
				+     font-weight:normal;
			
 
				+}
			
 
				+
			
 
				+.gc-spread-toolTip {
			
 
				+    border: 1px solid #bebebe;
			
 
				+    border-radius: 0px;
			
 
				+    background-color: #f0f0f0;
			
 
				+    background-image: none;
			
 
				+    font-weight: normal;
			
 
				+    color: #217346;
			
 
				+}
			
 
				+
			
 
				+.gc-no-user-select {
			
 
				+    -webkit-user-select: none;
			
 
				+    -khtml-user-select: none;
			
 
				+    -moz-user-select: none;
			
 
				+    -o-user-select: none;
			
 
				+    -ms-user-select: none;
			
 
				+    user-select: none;
			
 
				+}
			
 
				+/*-----common css end-----*/
			
 
				+
			
 
				+/*-----formula textbox start-----*/
			
 
				+/* function autocomplete */
			
 
				+.gcsj-func-ac-popup {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+    background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,0.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row {
			
 
				+    margin: 0;
			
 
				+    cursor: default;
			
 
				+    padding: 2px 10px;
			
 
				+    color: #666666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-name {
			
 
				+     color: #222;
			
 
				+     font-size: 13px;
			
 
				+     font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+     margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-ac-row-description {
			
 
				+    color: #666;
			
 
				+    display: none;
			
 
				+    font-size: 11px;
			
 
				+    margin: -2px 0;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active {
			
 
				+	background-color: #f5f5f5;
			
 
				+	color: #000;
			
 
				+	border-top: 1px solid #ebebeb;
			
 
				+	border-bottom: 1px solid #ebebeb;
			
 
				+	padding: 1px 10px
			
 
				+}
			
 
				+
			
 
				+.gcsj-ac-row-active .gcsj-func-ac-row-description {
			
 
				+    display:block;
			
 
				+}
			
 
				+
			
 
				+/*  function help */
			
 
				+.gcsj-func-help-popup {
			
 
				+    background-color:#fff;
			
 
				+    border: 1px solid rgba(0,0,0,0.2);
			
 
				+    color: #222;
			
 
				+    font-size: 11px;
			
 
				+    word-wrap: break-word;
			
 
				+    position: absolute;
			
 
				+    width: 320px;
			
 
				+    z-index: 2001;
			
 
				+
			
 
				+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-title {
			
 
				+    background-color: #f5f5f5;
			
 
				+    color: #222;
			
 
				+    font-size: 13px;
			
 
				+    padding: 1px 0 1px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-body {
			
 
				+    border-top: 1px solid #ebebeb;
			
 
				+    font-family: arial, sans-serif;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-content {
			
 
				+    padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section {
			
 
				+    padding: 5px 10px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-title {
			
 
				+    font-size: 11px;
			
 
				+    color: #666;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-section-content {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula {
			
 
				+    font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+    padding: 1px 0;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-formula-name {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter {
			
 
				+    padding-left:1px;
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-paren {
			
 
				+}
			
 
				+
			
 
				+.gcsj-func-help-paramter-active {
			
 
				+    background-color: #feb;
			
 
				+}
			
 
				+
			
 
				+/* color text */
			
 
				+.gcsj-func-color-content {
			
 
				+    white-space: pre-wrap;
			
 
				+}
			
 
				+/*-----formula textbox end-----*/
			
 
				+
			
 
				+/*-----floatingobject start-----*/
			
 
				+.gc-floatingobject-selected{
			
 
				+    border:1px solid #939393;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-unselected{
			
 
				+    background-color: transparent;
			
 
				+    border:1px solid transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-background-cover{
			
 
				+    -webkit-background-size: cover; /* For WebKit*/
			
 
				+    -moz-background-size: cover;    /* Mozilla*/
			
 
				+    -o-background-size: cover;      /* Opera*/
			
 
				+    background-size: cover;         /* Generic*/
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-container{
			
 
				+    position: absolute;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-moving-div{
			
 
				+    position: absolute;
			
 
				+    border:1px solid black;
			
 
				+}
			
 
				+.gc-floatingobject-resize-indicator {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-select{
			
 
				+    background-color:white;
			
 
				+    border-radius:2px;
			
 
				+    -moz-border-radius:1px;
			
 
				+    border:1px solid #939393;
			
 
				+    z-index:100;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-resize-indicator-unSelect{
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-absolute{
			
 
				+    position: absolute;
			
 
				+}
			
 
				+
			
 
				+.gc-floatingobject-content-container {
			
 
				+    box-sizing:content-box;
			
 
				+}
			
 
				+/*-----floatingobject end-----*/
			
 
				+
			
 
				+/*-----scrollbar start-----*/
			
 
				+/*scrollbar*/
			
 
				+.gc-scroll-container{
			
 
				+    background-color: #575757;
			
 
				+    -moz-box-shadow: none;
			
 
				+    -webkit-box-shadow: none;
			
 
				+    box-shadow: none;
			
 
				+}
			
 
				+.gc-scroll-corner-all {
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+.gc-scroll-arrow{
			
 
				+    background-color: #999999;
			
 
				+    border-style:solid;
			
 
				+    border-color: #3b3b3b;
			
 
				+    background-image: none;
			
 
				+    border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowUp{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
			
 
				+    
			
 
				+}
			
 
				+.gc-scroll-arrowUp {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowDown {
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowDown {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowLeft{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
			
 
				+}
			
 
				+.gc-scroll-arrowLeft {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow .gc-scroll-arrowRight{
			
 
				+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
			
 
				+}
			
 
				+.gc-scroll-arrowRight {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-vertical {
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-vertical {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar .gc-scrollbar-horizontal {
			
 
				+    text-indent: 0;
			
 
				+    background-image: none;
			
 
				+    background-repeat: no-repeat;
			
 
				+}
			
 
				+.gc-scrollbar-horizontal {
			
 
				+    background-position: center;
			
 
				+}
			
 
				+
			
 
				+.gc-scrollbar-wrapper {
			
 
				+    background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-bar {
			
 
				+    border-style:solid;
			
 
				+    border-color:#3b3b3b;
			
 
				+    background: #999999;
			
 
				+    -moz-border-radius: 0px;
			
 
				+    -webkit-border-radius: 0px;
			
 
				+    border-radius: 0px;
			
 
				+}
			
 
				+.gc-scroll-arrow-hover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#101010;
			
 
				+    background: #b3b3b3;
			
 
				+}
			
 
				+.gc-scrollbar-stateHover {
			
 
				+    border-style:solid;
			
 
				+    border-color:#101010;
			
 
				+    background: #b3b3b3;
			
 
				+}
			
 
				+
			
 
				+.gc-scroll-arrow:active,
			
 
				+.gc-scroll-bar:active,
			
 
				+.gc-scrollbar-stateActive {
			
 
				+    border-style:solid;
			
 
				+    border-color:#101010;
			
 
				+    background: #c4c4c4;
			
 
				+    -webkit-box-shadow: none;
			
 
				+          box-shadow: none;
			
 
				+}
			
 
				+/*-----scrollbar end-----*/
			
 
				+
			
--- a/src/spreadjs/scripts/gc.spread.sheets.all.10.0.1.min.js
+++ b/src/spreadjs/scripts/gc.spread.sheets.all.10.0.1.min.js
--- a/src/standalone.html
+++ b/src/standalone.html
@@ -0,0 +1,78 @@
 
				+<!DOCTYPE html>
			
 
				+<html xmlns="http://www.w3.org/1999/xhtml">
			
 
				+<head>
			
 
				+	<meta charset="utf-8">
			
 
				+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+	<title>Standalone Flexsheet</title>
			
 
				+	<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+
			
 
				+	<!-- jQuery -->
			
 
				+	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			
 
				+
			
 
				+	<!-- Bootstrap -->
			
 
				+	<!-- Latest compiled and minified CSS -->
			
 
				+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
			
 
				+	<!-- Latest compiled and minified JavaScript -->
			
 
				+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
			
 
				+
			
 
				+	<!--jszip library -->
			
 
				+	<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js"></script>
			
 
				+
			
 
				+	<!-- Wijmo -->
			
 
				+	<script src="/src/scripts/wijmo/wijmo.min.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.min.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.filter.min.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.detail.min.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.input.min.js" type="text/javascript"></script>
			
 
				+	<link href="/src/styles/wijmo.min.css" rel="stylesheet" />
			
 
				+
			
 
				+	<!-- FlexSheet -->
			
 
				+	<!-- app scripts and styles -->
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/ScrollBar.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/Sheet.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/ExcelRow.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/TabHolder.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/ExcelCellFactory.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/FlexSheet.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/SortManager.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/ContextMenu.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/_CalcEngine.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/_Expression.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/UndoableStack.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/wijmo/wijmo.grid.sheet/_UndoableAction.js" type="text/javascript"></script>
			
 
				+
			
 
				+	<!-- app scripts and styles -->
			
 
				+	<link rel="stylesheet" href="/src/styles/app.css" type="text/css" />
			
 
				+	<script src="/src/scripts/app.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/c1xlsx.js" type="text/javascript"></script>
			
 
				+	<script src="/src/scripts/ExcelConverter/ExcelConverter.js" type="text/javascript"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+	<div class="header visible-xs visible-sm">
			
 
				+		<div class="container">
			
 
				+			<h1>FlexSheet / Stand-alone Sheet</h1>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div class="header hidden-xs hidden-sm">
			
 
				+		<div class="container">
			
 
				+			<img src="/src/resources/wijmo5.png" />
			
 
				+			<h1>FlexSheet / Stand-alone Sheet</h1>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div class="container">
			
 
				+		<div class="row">
			
 
				+			<div class="col-md-12 col-xs-12">
			
 
				+				<div class="form-inline well well-lg">
			
 
				+					<input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
			
 
				+					<button id="import" class="btn btn-default">Load</button>
			
 
				+					<a download="standaloneFlexsheet.xlsx" href="" class="btn btn-default" id="export">Save</a>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<!-- the grid -->
			
 
				+		<div class="row">
			
 
				+			<div id="flexsheet"></div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -0,0 +1,253 @@
 
				+body {
			
 
				+	background-color: #f8f8f8;
			
 
				+	font-family: -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
			
 
				+	-webkit-touch-callout: none;
			
 
				+	-webkit-user-select: none; 
			
 
				+}
			
 
				+
			
 
				+h1, h2, h3, h4, h5, h6 {
			
 
				+	font-family: -apple-system-font, 'Segoe UI Light', 'Segoe UI', 'Roboto', sans-serif;
			
 
				+	font-weight: 300;
			
 
				+}
			
 
				+
			
 
				+.header {
			
 
				+	background-color: #283442;
			
 
				+	margin-bottom: 14px;
			
 
				+	padding: 12px 0px;
			
 
				+	color: #c9d8ea;
			
 
				+}
			
 
				+
			
 
				+	.header h1 {
			
 
				+		font-size: 40px;
			
 
				+		line-height: 1;
			
 
				+		color: #fff;
			
 
				+	}
			
 
				+
			
 
				+	.header img {
			
 
				+		float: left;
			
 
				+		margin: 0 10px 5px 0;
			
 
				+	}
			
 
				+
			
 
				+
			
 
				+h2 a:hover {
			
 
				+	text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+.header-row {
			
 
				+	background-color: #4800ff !important;
			
 
				+	color: #ff6a00;
			
 
				+}
			
 
				+
			
 
				+.wj-content {
			
 
				+	outline: none;
			
 
				+	border-color: #ccc;
			
 
				+	-webkit-border-radius: 0;
			
 
				+	-moz-border-radius: 0;
			
 
				+	border-radius: 0;
			
 
				+}
			
 
				+
			
 
				+.wj-flexsheet-formula-list {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+	background: #fff;
			
 
				+	border: 1px solid rgba(0,0,0,.2);
			
 
				+	font-family: arial,sans-serif;
			
 
				+	font-size: 12px;
			
 
				+	line-height: 22px;
			
 
				+	position: absolute;
			
 
				+	width: 300px;
			
 
				+	z-index: 2001;
			
 
				+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
			
 
				+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.2);
			
 
				+	box-shadow: 0 2px 4px rgba(0,0,0,.2);
			
 
				+}
			
 
				+
			
 
				+.wj-flexsheet-formula-name {
			
 
				+	color: #222;
			
 
				+	font-size: 13px;
			
 
				+	font-family: inconsolata,monospace,arial,sans,sans-serif;
			
 
				+	margin: -2px 0;
			
 
				+}
			
 
				+
			
 
				+.wj-flexsheet-formula-description {
			
 
				+	color: #666;
			
 
				+	display: block;
			
 
				+	font-size: 11px;
			
 
				+	margin: -2px 0;
			
 
				+	overflow: hidden;
			
 
				+	text-overflow: ellipsis;
			
 
				+	white-space: nowrap;
			
 
				+}
			
 
				+
			
 
				+div[wj-filter] {
			
 
				+	/* Hides filter icons in column headers */
			
 
				+	display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * the sheet style setting
			
 
				+ */
			
 
				+
			
 
				+div[wj-part='tabHolder'] {
			
 
				+	background: #b8b8b8;
			
 
				+}
			
 
				+
			
 
				+span.sheeticon {
			
 
				+	width: 35px;
			
 
				+	height: 16px;
			
 
				+	display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.sheeticon.glyphicon {
			
 
				+	font-size: 10px;
			
 
				+}
			
 
				+
			
 
				+div.sheetpage {
			
 
				+	padding-top: 1px;
			
 
				+}
			
 
				+
			
 
				+	div.sheetpage > button {
			
 
				+		padding: 0px;
			
 
				+		padding-top: 1px;
			
 
				+		border-radius: 0;
			
 
				+		border: 0;
			
 
				+		background-color: #e4e5e8;
			
 
				+		color: #727275;
			
 
				+	}
			
 
				+
			
 
				+		div.sheetpage > button:hover {
			
 
				+			background-color: #dee0e3;
			
 
				+		}
			
 
				+
			
 
				+.sheettab ul {
			
 
				+	display: inline-block;
			
 
				+	margin: 0px;
			
 
				+	padding: 0px;
			
 
				+	float: left;
			
 
				+}
			
 
				+
			
 
				+	.sheettab ul li {
			
 
				+		float: left;
			
 
				+		display: block;
			
 
				+		padding-right: 20px;
			
 
				+		padding-left: 20px;
			
 
				+		cursor: pointer;
			
 
				+		margin-top: 1px;
			
 
				+		border-left: 1px solid #b8b8b8;
			
 
				+		min-height: 20px;
			
 
				+		background-color: #d2d3d8;
			
 
				+		text-align: center;
			
 
				+		padding-top: 2px;
			
 
				+		font-size: 11px;
			
 
				+		color: #727275;
			
 
				+	}
			
 
				+
			
 
				+		.sheettab ul li.active {
			
 
				+			border-top-color: transparent;
			
 
				+			background-color: white;
			
 
				+			cursor: default;
			
 
				+			height: 100%;
			
 
				+			margin-top: 1px;
			
 
				+			border-left: 1px solid #b8b8b8;
			
 
				+			font-weight: bold;
			
 
				+		}
			
 
				+
			
 
				+		.sheettab ul li.hidden {
			
 
				+			display: none;
			
 
				+		}
			
 
				+
			
 
				+		.sheettab ul li:not(.active):hover,
			
 
				+		.sheettab ul li:not(.hidden):hover {
			
 
				+			background-color: #aabcd6;
			
 
				+			color: #fff;
			
 
				+			cursor: pointer;
			
 
				+		}
			
 
				+
			
 
				+		.sheettab ul li.newsheet:hover {
			
 
				+			background-color: #477ebb;
			
 
				+		}
			
 
				+
			
 
				+.newsheet {
			
 
				+	padding: 0;
			
 
				+	width: 32px;
			
 
				+	height: 20px;
			
 
				+	font-size: 11px;
			
 
				+	text-align: center;
			
 
				+	background-color: #668eb9;
			
 
				+	color: #fff;
			
 
				+}
			
 
				+
			
 
				+	.newsheet .glyphicon {
			
 
				+		padding: 0;
			
 
				+		vertical-align: middle;
			
 
				+	}
			
 
				+
			
 
				+div.sheet > div {
			
 
				+	display: block;
			
 
				+	float: left;
			
 
				+}
			
 
				+
			
 
				+div.borderspace {
			
 
				+	float: left;
			
 
				+	border-top: 1px solid #0094ff;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * the style of FlexSheet
			
 
				+ */
			
 
				+div.wj-header > div.dropdown {
			
 
				+	visibility: hidden;
			
 
				+	float: right;
			
 
				+}
			
 
				+
			
 
				+div.wj-header:hover > div.dropdown {
			
 
				+	visibility: visible;
			
 
				+}
			
 
				+
			
 
				+div.dropdown:hover {
			
 
				+	background-color: #ccffff;
			
 
				+}
			
 
				+
			
 
				+.wj-flexgrid {
			
 
				+	background-color: #a9a9a9;
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+}
			
 
				+
			
 
				+.wj-btn-default {
			
 
				+	color: #333;
			
 
				+	background-color: #fff;
			
 
				+	border-color: #ccc;
			
 
				+}
			
 
				+
			
 
				+	.wj-btn-default:hover {
			
 
				+		/* Hover on 'default' button */
			
 
				+		background-color: #ebebeb;
			
 
				+	}
			
 
				+
			
 
				+	.wj-btn-default:focus {
			
 
				+		background-color: #fff;
			
 
				+	}
			
 
				+
			
 
				+
			
 
				+.contextMenu {
			
 
				+	background-color: #fff;
			
 
				+	border: thin solid #808080;
			
 
				+	cursor: default;
			
 
				+}
			
 
				+
			
 
				+.contextMenuItem {
			
 
				+	padding: 3px 10px;
			
 
				+}
			
 
				+
			
 
				+	.contextMenuItem:hover {
			
 
				+		background-color: #0085c7;
			
 
				+		color: #fff;
			
 
				+	}
			
 
				+
			
 
				+#flexsheet {
			
 
				+	height: 600px;
			
 
				+	border: 2px solid #e0e0e0;
			
 
				+	margin: 6px;
			
 
				+}
			
--- a/src/styles/wijmo.min.css
+++ b/src/styles/wijmo.min.css