Format Cells

FlexSheet allows the format to be set for each cell. The format includes the data format of the cell value (Date/Number format), font style, fill color and horizontal alignment.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import * as sheet from '@grapecity/wijmo.grid.sheet'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let fonts = [ { name: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { name: 'Arial Black', value: '"Arial Black", Gadget, sans-serif' }, { name: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { name: 'Courier New', value: '"Courier New", Courier, monospace' }, { name: 'Georgia', value: 'Georgia, serif' }, { name: 'Impact', value: 'Impact, Charcoal, sans-serif' }, { name: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' }, { name: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif' }, { name: 'Palatino Linotype', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif' }, { name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' }, { name: 'Segoe UI', value: '"Segoe UI", "Roboto", sans-serif' }, { name: 'Times New Roman', value: '"Times New Roman", Times, serif' }, { name: 'Trebuchet MS', value: '"Trebuchet MS", Helvetica, sans-serif' }, { name: 'Verdana', value: 'Verdana, Geneva, sans-serif' } ]; // let fontSizeList = [ { name: '8', value: '8px' }, { name: '9', value: '9px' }, { name: '10', value: '10px' }, { name: '11', value: '11px' }, { name: '12', value: '12px' }, { name: '14', value: '14px' }, { name: '16', value: '16px' }, { name: '18', value: '18px' }, { name: '20', value: '20px' }, { name: '22', value: '22px' }, { name: '24', value: '24px' } ]; // let updatingSelection = false; let applyFillColor = false; let selectionFormatState = {}; let flexSheet = new sheet.FlexSheet('#formatSheet'); let inputColor = new input.ColorPicker('#inputColor'); // let formatMenu = new input.Menu('#formatMenu', { selectedIndex: 0, selectedIndexChanged: (sender) => { if (sender.selectedIndex >= 0) { updateMenuHeader(sender, 'Format'); flexSheet.applyCellsStyle({ format: sender.selectedValue }); } } }); updateMenuHeader(formatMenu, 'Format'); // let cboFontName = new input.ComboBox('#fonts', { itemsSource: fonts, displayMemberPath: 'name', selectedValuePath: 'value', isEditable: false }); // let cboFontSize = new input.ComboBox('#fontSize', { itemsSource: fontSizeList, selectedIndex: 5, displayMemberPath: 'name', selectedValuePath: 'value', isEditable: false }); // flexSheet.addUnboundSheet('Number', 20, 8); flexSheet.addUnboundSheet('Date', 20, 8); flexSheet.deferUpdate(() => { for (let sheetIdx = flexSheet.sheets.length - 1; sheetIdx >= 0; sheetIdx--) { flexSheet.selectedSheetIndex = sheetIdx; let sheetName = flexSheet.selectedSheet.name; // for (let colIdx = 0; colIdx < flexSheet.columns.length; colIdx++) { for (let rowIdx = 0; rowIdx < flexSheet.rows.length; rowIdx++) { if (sheetName === 'Number') { flexSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { let date = new Date(2018, colIdx, rowIdx + 1); flexSheet.setCellData(rowIdx, colIdx, date); } } } } flexSheet.selectedSheetIndex = 0; setTimeout(() => updateSelection(flexSheet.selection), 100); }); // flexSheet.selectionChanged.addHandler((sender, args) => { updateSelection(args.range); }); // // Hide the color picker control when it lost the focus. let blurEvt = /firefox/i.test(window.navigator.userAgent) ? 'blur' : 'focusout'; inputColor.hostElement.addEventListener(blurEvt, () => { setTimeout(() => { if (!inputColor.containsFocus()) { applyFillColor = false; inputColor.hostElement.style.display = 'none'; } }, 0); }); // // Initialize the value changed event handler for the color picker control. inputColor.valueChanged.addHandler(() => { if (applyFillColor) { flexSheet.applyCellsStyle({ backgroundColor: inputColor.value }); } else { flexSheet.applyCellsStyle({ color: inputColor.value }); } }); // cboFontName.selectedIndexChanged.addHandler(() => { // apply the font family for the selected cells if (!updatingSelection) { flexSheet.applyCellsStyle({ fontFamily: cboFontName.selectedItem.value }); } }); // cboFontSize.selectedIndexChanged.addHandler(() => { // apply the font size for the selected cells if (!updatingSelection) { flexSheet.applyCellsStyle({ fontSize: cboFontSize.selectedItem.value }); } }); // onClick('applyCellTextLeftAlign', () => applyCellTextAlign('left')); onClick('applyCellTextCenterAlign', () => applyCellTextAlign('center')); onClick('applyCellTextRightAlign', () => applyCellTextAlign('right')); // onClick('applyBoldStyle', e => { flexSheet.applyCellsStyle({ fontWeight: selectionFormatState.isBold ? 'none' : 'bold' }); selectionFormatState.isBold = !selectionFormatState.isBold; // if (selectionFormatState.isBold) { wijmo.addClass(e.target, 'active'); } else { wijmo.removeClass(e.target, 'active'); } }); // onClick('applyUnderlineStyle', e => { flexSheet.applyCellsStyle({ textDecoration: selectionFormatState.isUnderline ? 'none' : 'underline' }); selectionFormatState.isUnderline = !selectionFormatState.isUnderline; // if (selectionFormatState.isUnderline) { wijmo.addClass(e.target, 'active'); } else { wijmo.removeClass(e.target, 'active'); } }); // onClick('applyItalicStyle', e => { flexSheet.applyCellsStyle({ fontStyle: selectionFormatState.isItalic ? 'none' : 'italic' }); selectionFormatState.isItalic = !selectionFormatState.isItalic; // if (selectionFormatState.isItalic) { wijmo.addClass(e.target, 'active'); } else { wijmo.removeClass(e.target, 'active'); } }); // onClick('foreColor', (e) => showColorPicker(e, false)); onClick('fillColor', (e) => showColorPicker(e, true)); // // apply the text alignment for the selected cells function applyCellTextAlign(textAlign) { flexSheet.applyCellsStyle({ textAlign: textAlign }); selectionFormatState.textAlign = textAlign; updateTextAlignState(textAlign); } // // show the color picker control. function showColorPicker(e, isFillColor) { let offset = cumulativeOffset(e.target), he = inputColor.hostElement; // he.style.display = 'inline'; he.style.left = offset.left + 'px'; he.style.top = (offset.top - he.clientHeight - 5) + 'px'; he.focus(); // applyFillColor = isFillColor; } // // Update the selection object of the scope. function updateSelection(sel) { let rCnt = flexSheet.rows.length, cCnt = flexSheet.columns.length; // updatingSelection = true; // if (sel.row > -1 && sel.col > -1 && rCnt > 0 && cCnt > 0 && sel.col < cCnt && sel.col2 < cCnt && sel.row < rCnt && sel.row2 < rCnt) { let cellContent = flexSheet.getCellData(sel.row, sel.col, false), cellStyle = flexSheet.selectedSheet.getCellStyle(sel.row, sel.col), cellFormat = ''; // if (cellStyle) { cboFontName.selectedIndex = checkFontfamily(cellStyle.fontFamily); cboFontSize.selectedIndex = checkFontSize(cellStyle.fontSize); cellFormat = cellStyle.format; } else { cboFontName.selectedIndex = 0; cboFontSize.selectedIndex = 5; } // if (!cellFormat) { if (wijmo.isInt(cellContent)) { cellFormat = '0'; } else if (wijmo.isNumber(cellContent)) { cellFormat = 'n2'; } else if (wijmo.isDate(cellContent)) { cellFormat = 'd'; } } // formatMenu.selectedValue = cellFormat; // selectionFormatState = flexSheet.getSelectionFormatState(); updateStyleButtonState(); } // updatingSelection = false; } // function updateStyleButtonState() { let boldBtn = document.querySelector('#applyBoldStyle'), underlineBtn = document.querySelector('#applyUnderlineStyle'), italicBtn = document.querySelector('#applyItalicStyle'); // if (selectionFormatState.isBold) { wijmo.addClass(boldBtn, 'active'); } else { wijmo.removeClass(boldBtn, 'active'); } // if (selectionFormatState.isUnderline) { wijmo.addClass(underlineBtn, 'active'); } else { wijmo.removeClass(underlineBtn, 'active'); } // if (selectionFormatState.isItalic) { wijmo.addClass(italicBtn, 'active'); } else { wijmo.removeClass(italicBtn, 'active'); } // updateTextAlignState(selectionFormatState.textAlign); } // function updateTextAlignState(textAlign) { let leftBtn = document.querySelector('#applyCellTextLeftAlign'), centerBtn = document.querySelector('#applyCellTextCenterAlign'), rightBtn = document.querySelector('#applyCellTextRightAlign'); // wijmo.removeClass(leftBtn, 'active'); wijmo.removeClass(centerBtn, 'active'); wijmo.removeClass(rightBtn, 'active'); // switch (textAlign) { case 'left': wijmo.addClass(leftBtn, 'active'); break; case 'center': wijmo.addClass(centerBtn, 'active'); break; case 'right': wijmo.addClass(rightBtn, 'active'); break; } } // // check font family for the font name combobox of the ribbon. function checkFontfamily(value) { if (!value) { return 0; } // for (let fontIndex = 0; fontIndex < fonts.length; fontIndex++) { let font = fonts[fontIndex]; if (font.name === value || font.value === value) { return fontIndex; } } // return 0; } // // check font size for the font size combobox of the ribbon. function checkFontSize(value) { if (value == null) { return 5; } // for (let index = 0; index < fontSizeList.length; index++) { let size = fontSizeList[index]; if (size.value === value || size.name === value) { return index; } } // return 5; } // // Get the absolute position of the dom element. function cumulativeOffset(element) { let top = 0, left = 0, scrollTop = 0, scrollLeft = 0; // do { top += element.offsetTop || 0; left += element.offsetLeft || 0; scrollTop += element.scrollTop || 0; scrollLeft += element.scrollLeft || 0; element = element.offsetParent; } while (element && !(element instanceof HTMLBodyElement)); // scrollTop += document.body.scrollTop || document.documentElement.scrollTop; scrollLeft += document.body.scrollLeft || document.documentElement.scrollLeft; // return { top: top - scrollTop, left: left - scrollLeft }; } // function onClick(id, fn) { document.querySelector('#' + id).addEventListener('click', fn); } // function updateMenuHeader(menu, header) { menu.header = header + ': <b>' + menu.text + '</b>'; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet Formatting Cells</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="formatSheet"></div> <div id="inputColor" style="display:none;position:fixed;z-index:100"></div> <div class="well well-lg"> <div> <select id="formatMenu"> <option value="0">Decimal Format</option> <option value="n2">Number Format</option> <option value="p2">Percentage Format</option> <option value="c2">Currency Format</option> <option></option> <option value="d">Short Date</option> <option value="D">Long Date</option> <option value="f">Full Date/TIme (short time)</option> <option value="F">Full Date/TIme (long time)</option> </select> </div> <div> Font: <div id="fonts" style="width: 120px"></div> <div id="fontSize" style="width: 80px"></div> <div class="btn-group"> <button id="applyBoldStyle" type="button" class="btn btn-default">Bold</button> <button id="applyItalicStyle" type="button" class="btn btn-default">Italic</button> <button id="applyUnderlineStyle" type="button" class="btn btn-default">Underline</button> </div> </div> <div> Color: <div class="btn-group"> <button id="foreColor" type="button" class="btn btn-default">Fore Color</button> <button id="fillColor" type="button" class="btn btn-default">Fill Color</button> </div> Alignment: <div class="btn-group"> <button id="applyCellTextLeftAlign" type="button" class="btn btn-default">Left</button> <button id="applyCellTextCenterAlign" type="button" class="btn btn-default">Center</button> <button id="applyCellTextRightAlign" type="button" class="btn btn-default">Right</button> </div> </div> </div> </div> </body> </html> .wj-flexsheet { height: 400px; margin: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGridSheetModule } from '@grapecity/wijmo.angular2.grid.sheet'; import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import * as grid from '@grapecity/wijmo.grid'; import * as sheet from '@grapecity/wijmo.grid.sheet'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('flex') flex: sheet.FlexSheet; @ViewChild('cboFontName') cboFontName: input.ComboBox; @ViewChild('cboFontSize') cboFontSize: input.ComboBox; @ViewChild('cboTableStyles') cboTableStyles: input.ComboBox; @ViewChild('colorPicker') colorPicker: input.ColorPicker; fonts = [ { name: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { name: 'Arial Black', value: '"Arial Black", Gadget, sans-serif' }, { name: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { name: 'Courier New', value: '"Courier New", Courier, monospace' }, { name: 'Georgia', value: 'Georgia, serif' }, { name: 'Impact', value: 'Impact, Charcoal, sans-serif' }, { name: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' }, { name: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif' }, { name: 'Palatino Linotype', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif' }, { name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' }, { name: 'Segoe UI', value: '"Segoe UI", "Roboto", sans-serif' }, { name: 'Times New Roman', value: '"Times New Roman", Times, serif' }, { name: 'Trebuchet MS', value: '"Trebuchet MS", Helvetica, sans-serif' }, { name: 'Verdana', value: 'Verdana, Geneva, sans-serif' } ]; fontSizeList = [ { name: '8', value: '8px' }, { name: '9', value: '9px' }, { name: '10', value: '10px' }, { name: '11', value: '11px' }, { name: '12', value: '12px' }, { name: '14', value: '14px' }, { name: '16', value: '16px' }, { name: '18', value: '18px' }, { name: '20', value: '20px' }, { name: '22', value: '22px' }, { name: '24', value: '24px' } ]; selectionFormatState: sheet.IFormatState = {}; private _updatingSelection = false; private _applyFillColor = false; private _format = ''; // Gets or sets _format for the formatSheet. get format(): string { return this._format; } set format(value: string) { if (this._format !== value) { this._format = value; if (!this._updatingSelection) { this.flex.applyCellsStyle({ format: this._format }); } } } initializeFlexSheet(flex: sheet.FlexSheet) { flex.deferUpdate(() => { for (let sheetIdx = 0; sheetIdx < flex.sheets.length; sheetIdx++) { flex.selectedSheetIndex = sheetIdx; let sheetName = flex.selectedSheet.name; for (let colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (let rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { if (sheetName === 'Number') { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { let date = new Date(2015, colIdx, rowIdx + 1); flex.setCellData(rowIdx, colIdx, date); } } } } flex.selectedSheetIndex = 0; setTimeout(() => this._updateSelection(flex, flex.selection), 100); }); flex.selectionChanged.addHandler((sender: sheet.FlexSheet, args: grid.CellRangeEventArgs) => { this._updateSelection(flex, args.range); }); } fontChanged(sender: input.ComboBox) { if (sender.selectedItem && !this._updatingSelection) { this.flex.applyCellsStyle({ fontFamily: sender.selectedItem.value }); } } fontSizeChanged(sender: input.ComboBox) { if (sender.selectedItem && !this._updatingSelection) { this.flex.applyCellsStyle({ fontSize: sender.selectedItem.value }); } } colorPickerInit(colorPicker: input.ColorPicker) { // if the browser is Firefox, we should bind the blur event. (TFS #124387) // if the browser is IE, we should bind the focusout event. (TFS #124500) let blurEvt = /firefox/i.test(window.navigator.userAgent) ? 'blur' : 'focusout'; // Hide the color picker control when it lost the focus. colorPicker.hostElement.addEventListener(blurEvt, () => { setTimeout(() => { if (!colorPicker.containsFocus()) { this._applyFillColor = false; colorPicker.hostElement.style.display = 'none'; } }, 0); }); // Initialize the value changed event handler for the color picker control. colorPicker.valueChanged.addHandler(() => { if (this._applyFillColor) { this.flex.applyCellsStyle({ backgroundColor: colorPicker.value }); } else { this.flex.applyCellsStyle({ color: colorPicker.value }); } }); } // apply the text alignment for the selected cells applyCellTextAlign(textAlign: string) { this.flex.applyCellsStyle({ textAlign: textAlign }); this.selectionFormatState.textAlign = textAlign; } // apply the bold font weight for the selected cells applyBoldStyle() { this.flex.applyCellsStyle({ fontWeight: this.selectionFormatState.isBold ? 'none' : 'bold' }); this.selectionFormatState.isBold = !this.selectionFormatState.isBold; } // apply the underline text decoration for the selected cells applyUnderlineStyle() { this.flex.applyCellsStyle({ textDecoration: this.selectionFormatState.isUnderline ? 'none' : 'underline' }); this.selectionFormatState.isUnderline = !this.selectionFormatState.isUnderline; } // apply the italic font style for the selected cells applyItalicStyle() { this.flex.applyCellsStyle({ fontStyle: this.selectionFormatState.isItalic ? 'none' : 'italic' }); this.selectionFormatState.isItalic = !this.selectionFormatState.isItalic; } // show the color picker control showColorPicker(e: MouseEvent, isFillColor: boolean) { let offset = this._cumulativeOffset(<HTMLElement>e.target), he = this.colorPicker.hostElement; he.style.display = 'inline'; he.style.left = offset.left + 'px'; he.style.top = (offset.top - he.clientHeight - 5) + 'px'; he.focus(); this._applyFillColor = isFillColor; }; // Update the selection object of the scope. private _updateSelection(fs: sheet.FlexSheet, sel: grid.CellRange) { let rCnt = fs.rows.length, cCnt = fs.columns.length; this._updatingSelection = true; if (sel.row > -1 && sel.col > -1 && rCnt > 0 && cCnt > 0 && sel.col < cCnt && sel.col2 < cCnt && sel.row < rCnt && sel.row2 < rCnt) { let cellContent = fs.getCellData(sel.row, sel.col, false), cellStyle = fs.selectedSheet.getCellStyle(sel.row, sel.col), cellFormat: string; if (cellStyle) { this.cboFontName.selectedIndex = this._checkFontfamily(cellStyle.fontFamily); this.cboFontSize.selectedIndex = this._checkFontSize(cellStyle.fontSize); cellFormat = cellStyle.format; } else { this.cboFontName.selectedIndex = 0; this.cboFontSize.selectedIndex = 5; } if (!!cellFormat) { this.format = cellFormat; } else { if (wijmo.isInt(cellContent)) { this.format = '0'; } else if (wijmo.isNumber(cellContent)) { this.format = 'n2'; } else if (wijmo.isDate(cellContent)) { this.format = 'd'; } } this.selectionFormatState = fs.getSelectionFormatState(); } this._updatingSelection = false; } // check font family for the font name combobox of the ribbon. private _checkFontfamily(value: string) { let fonts = this.fonts; if (!value) { return 0; } for (let fontIndex = 0; fontIndex < fonts.length; fontIndex++) { let font = fonts[fontIndex]; if (font.name === value || font.value === value) { return fontIndex; } } return 0; } // check font size for the font size combobox of the ribbon. private _checkFontSize(value: string) { let sizeList = this.fontSizeList; if (value == null) { return 5; } for (let index = 0; index < sizeList.length; index++) { let size = sizeList[index]; if (size.value === value || size.name === value) { return index; } } return 5; } // Get the absolute position of the dom element. private _cumulativeOffset(element: HTMLElement) { let top = 0, left = 0, scrollTop = 0, scrollLeft = 0; do { top += element.offsetTop || 0; left += element.offsetLeft || 0; scrollTop += element.scrollTop || 0; scrollLeft += element.scrollLeft || 0; element = <HTMLElement>element.offsetParent; } while (element && !(element instanceof HTMLBodyElement)); scrollTop += document.body.scrollTop || document.documentElement.scrollTop; scrollLeft += document.body.scrollLeft || document.documentElement.scrollLeft; return { top: top - scrollTop, left: left - scrollLeft }; } } @NgModule({ imports: [WjGridSheetModule, WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet Formatting Cells</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet #flex (initialized)="initializeFlexSheet(flex)"> <wj-sheet name="Number" [rowCount]="20" [columnCount]="8"></wj-sheet> <wj-sheet name="Date" [rowCount]="20" [columnCount]="8"></wj-sheet> </wj-flex-sheet> <wj-color-picker #colorPicker style="display:none;position:fixed;z-index:100" (initialized)="colorPickerInit(colorPicker)"></wj-color-picker> <div class="well well-lg"> <div> <wj-menu header="Format" [(value)]="format"> <wj-menu-item value="0">Decimal Format</wj-menu-item> <wj-menu-item value="n2">Number Format</wj-menu-item> <wj-menu-item value="p">Percentage Format</wj-menu-item> <wj-menu-item value="c2">Currency Format</wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item value="d">Short Date</wj-menu-item> <wj-menu-item value="D">Long Date</wj-menu-item> <wj-menu-item value="f">Full Date/TIme (short time)</wj-menu-item> <wj-menu-item value="F">Full Date/TIme (long time)</wj-menu-item> </wj-menu> </div> <div> Font: <wj-combo-box #cboFontName style="width:120px" [itemsSource]="fonts" [selectedIndex]="0" [displayMemberPath]="'name'" [selectedValuePath]="'value'" [isEditable]="false" (selectedIndexChanged)="fontChanged(cboFontName)"> </wj-combo-box> <wj-combo-box #cboFontSize style="width:80px" [itemsSource]="fontSizeList" [selectedIndex]="5" [displayMemberPath]="'name'" [selectedValuePath]="'value'" [isEditable]="false" (selectedIndexChanged)="fontSizeChanged(cboFontSize)"> </wj-combo-box> <div class="btn-group"> <button type="button" class="btn btn-default {{selectionFormatState.isBold ? 'active' : ''}}" (click)="applyBoldStyle()">Bold</button> <button type="button" class="btn btn-default {{selectionFormatState.isItalic ? 'active' : ''}}" (click)="applyItalicStyle()">Italic</button> <button type="button" class="btn btn-default {{selectionFormatState.isUnderline ? 'active' : ''}}" (click)="applyUnderlineStyle()">Underline</button> </div> </div> <div> Color: <div class="btn-group"> <button type="button" class="btn btn-default" (click)="showColorPicker($event, false)">Fore Color</button> <button type="button" class="btn btn-default" (click)="showColorPicker($event, true)">Fill Color</button> </div> Alignment: <div class="btn-group"> <button type="button" class="btn btn-default {{selectionFormatState.textAlign === 'left' ? 'active' : ''}}" (click)="applyCellTextAlign('left')">Left</button> <button type="button" class="btn btn-default {{selectionFormatState.textAlign === 'center' ? 'active' : ''}}" (click)="applyCellTextAlign('center')">Center</button> <button type="button" class="btn btn-default {{selectionFormatState.textAlign === 'right' ? 'active' : ''}}" (click)="applyCellTextAlign('right')">Right</button> </div> </div> </div> </div> .wj-flexsheet { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet :initialized="initializeFlexSheet"> <wj-sheet name="Number" :rowCount="20" :columnCount="8"></wj-sheet> <wj-sheet name="Date" :rowCount="20" :columnCount="8"></wj-sheet> </wj-flex-sheet> <wj-color-picker style="display:none;position:fixed;z-index:100" :initialized="colorPickerInit"> </wj-color-picker> <div class="well well-lg"> <wj-menu :header="'Format'" :value="format" :itemClicked="formatChanged"> <wj-menu-item :value="'0'">Decimal Format</wj-menu-item> <wj-menu-item :value="'n2'">Number Format</wj-menu-item> <wj-menu-item :value="'p'">Percentage Format</wj-menu-item> <wj-menu-item :value="'c2'">Currency Format</wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item :value="'d'">Short Date</wj-menu-item> <wj-menu-item :value="'D'">Long Date</wj-menu-item> <wj-menu-item :value="'f'">Full Date/TIme (short time)</wj-menu-item> <wj-menu-item :value="'F'">Full Date/TIme (long time)</wj-menu-item> </wj-menu> <div>Font: <wj-combo-box style="width:120px" :itemsSource="fonts" :selectedIndex="fontIdx" displayMemberPath="name" selectedValuePath="value" :isEditable="false" :selectedIndexChanged="fontChanged"> </wj-combo-box> <wj-combo-box style="width:80px" :itemsSource="fontSizeList" :selectedIndex="fontSizeIdx" displayMemberPath="name" selectedValuePath="value" :isEditable="false" :selectedIndexChanged="fontSizeChanged"> </wj-combo-box> <div class="btn-group"> <button type="button" v-bind:class="['btn btn-default', { active: isBold }]" @click="applyBoldStyle()"> Bold</button> <button type="button" v-bind:class="['btn btn-default', { active: isItalic }]" @click="applyItalicStyle()"> Italic</button> <button type="button" v-bind:class="['btn btn-default', { active: isUnderline }]" @click="applyUnderlineStyle()"> Underline</button> </div> </div> <div>Color: <div class="btn-group"> <button type="button" class="btn btn-default" @click="showColorPicker($event, false)"> Fore Color</button> <button type="button" class="btn btn-default" @click="showColorPicker($event, true)"> Fill Color</button> </div>Alignment: <div class="btn-group"> <button type="button" v-bind:class="['btn btn-default', { active: textAlign == 'left' }]" @click="applyCellTextAlign('left')"> Left</button> <button type="button" v-bind:class="['btn btn-default', { active: textAlign == 'center' }]" @click="applyCellTextAlign('center')"> Center</button> <button type="button" v-bind:class="['btn btn-default', { active: textAlign == 'right' }]" @click="applyCellTextAlign('right')"> Right</button> </div> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.grid.sheet'; let App = Vue.extend({ name: 'app', data: function() { return { fonts: [ { name: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { name: 'Arial Black', value: '"Arial Black", Gadget, sans-serif' }, { name: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { name: 'Courier New', value: '"Courier New", Courier, monospace' }, { name: 'Georgia', value: 'Georgia, serif' }, { name: 'Impact', value: 'Impact, Charcoal, sans-serif' }, { name: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' }, { name: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif' }, { name: 'Palatino Linotype', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif' }, { name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' }, { name: 'Segoe UI', value: '"Segoe UI", "Roboto", sans-serif' }, { name: 'Times New Roman', value: '"Times New Roman", Times, serif' }, { name: 'Trebuchet MS', value: '"Trebuchet MS", Helvetica, sans-serif' }, { name: 'Verdana', value: 'Verdana, Geneva, sans-serif' } ], fontSizeList: [ { name: '8', value: '8px' }, { name: '9', value: '9px' }, { name: '10', value: '10px' }, { name: '11', value: '11px' }, { name: '12', value: '12px' }, { name: '14', value: '14px' }, { name: '16', value: '16px' }, { name: '18', value: '18px' }, { name: '20', value: '20px' }, { name: '22', value: '22px' }, { name: '24', value: '24px' } ], format: '0', fontIdx: 0, fontSizeIdx: 5, isBold: false, isItalic: false, isUnderline: false, textAlign: 'left', _updatingSelection: false, _applyFillColor: false, flex: {}, colorPicker: {}, }; }, methods: { initializeFlexSheet(flex) { flex.deferUpdate(() => { for (let sheetIdx = 0; sheetIdx < flex.sheets.length; sheetIdx++) { flex.selectedSheetIndex = sheetIdx; let sheetName = flex.selectedSheet.name; for (let colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (let rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { if (sheetName === 'Number') { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { let date = new Date(2015, colIdx, rowIdx + 1); flex.setCellData(rowIdx, colIdx, date); } } } } flex.selectedSheetIndex = 0; setTimeout(() => this._updateSelection(flex, flex.selection), 100); }); flex.selectionChanged.addHandler((sender, args) => { this._updateSelection(flex, args.range); }); this.flex = flex; }, fontChanged(sender) { if (sender.selectedItem && !this._updatingSelection) { this.flex.applyCellsStyle({ fontFamily: sender.selectedItem.value }); } }, fontSizeChanged(sender) { if (sender.selectedItem && !this._updatingSelection) { this.flex.applyCellsStyle({ fontSize: sender.selectedItem.value }); } }, colorPickerInit(colorPicker) { // if the browser is firefox, we should bind the blur event. (TFS #124387) // if the browser is IE, we should bind the focusout event. (TFS #124500) let blurEvt = /firefox/i.test(window.navigator.userAgent) ? 'blur' : 'focusout'; // Hide the color picker control when it lost the focus. colorPicker.hostElement.addEventListener(blurEvt, () => { setTimeout(() => { if (!colorPicker.containsFocus()) { this._applyFillColor = false; colorPicker.hostElement.style.display = 'none'; } }, 0); }); // Initialize the value changed event handler for the color picker control. colorPicker.valueChanged.addHandler(() => { if (this._applyFillColor) { this.flex.applyCellsStyle({ backgroundColor: colorPicker.value }); } else { this.flex.applyCellsStyle({ color: colorPicker.value }); } }); this.colorPicker = colorPicker; }, formatChanged(sender) { if (sender.selectedIndex >= 0) { this.flex.applyCellsStyle({ format: sender.selectedValue }); } }, // apply the text alignment for the selected cells applyCellTextAlign(textAlign) { this.flex.applyCellsStyle({ textAlign: textAlign }); this.textAlign = textAlign; }, // apply the bold font weight for the selected cells applyBoldStyle() { this.flex.applyCellsStyle({ fontWeight: this.isBold ? 'none' : 'bold' }); this.isBold = !this.isBold; }, // apply the underline text decoration for the selected cells applyUnderlineStyle() { this.flex.applyCellsStyle({ textDecoration: this.isUnderline ? 'none' : 'underline' }); this.isUnderline = !this.isUnderline; }, // apply the italic font style for the selected cells applyItalicStyle() { this.flex.applyCellsStyle({ fontStyle: this.isItalic ? 'none' : 'italic' }); this.isItalic = !this.isItalic; }, // show the color picker control. showColorPicker(e, isFillColor) { let offset = this._cumulativeOffset(e.target), he = this.colorPicker.hostElement; he.style.display = 'inline'; he.style.left = offset.left + 'px'; he.style.top = offset.top - he.clientHeight - 5 + 'px'; he.focus(); this._applyFillColor = isFillColor; }, // Update the selection object of the scope. _updateSelection(flexSheet, sel) { let row = flexSheet.rows[sel.row], rCnt = flexSheet.rows.length, cCnt = flexSheet.columns.length, fontIdx = 0, fontSizeIdx = 5; this._updatingSelection = true; if (sel.row > -1 && sel.col > -1 && rCnt > 0 && cCnt > 0 && sel.col < cCnt && sel.col2 < cCnt && sel.row < rCnt && sel.row2 < rCnt) { let cellContent = flexSheet.getCellData(sel.row, sel.col, false), cellStyle = flexSheet.selectedSheet.getCellStyle(sel.row, sel.col), cellFormat = null; if (cellStyle) { fontIdx = this._checkFontfamily(cellStyle.fontFamily); fontSizeIdx = this._checkFontSize(cellStyle.fontSize); cellFormat = cellStyle.format; } let format; if (!!cellFormat) { format = cellFormat; } else { if (wijmo.isInt(cellContent)) { format = '0'; } else if (wijmo.isNumber(cellContent)) { format = 'n2'; } else if (wijmo.isDate(cellContent)) { format = 'd'; } } this.fontIdx = fontIdx; this.fontSizeIdx = fontSizeIdx; let state = flexSheet.getSelectionFormatState(); this.isBold = state.isBold; this.isItalic = state.isItalic; this.isUnderline = state.isUnderline; this.textAlign = state.textAlign; } this._updatingSelection = false; }, // check font family for the font name combobox of the ribbon. _checkFontfamily(fontFamily) { let fonts = this.fonts; if (!fontFamily) { return 0; } for (let fontIndex = 0; fontIndex < fonts.length; fontIndex++) { let font = fonts[fontIndex]; if (font.name === fontFamily || font.value === fontFamily) { return fontIndex; } } return 0; }, // check font size for the font size combobox of the ribbon. _checkFontSize(fontSize) { let sizeList = this.fontSizeList; if (fontSize == null) { return 5; } for (let index = 0; index < sizeList.length; index++) { let size = sizeList[index]; if (size.value === fontSize || size.name === fontSize) { return index; } } return 5; }, // Get the absolute position of the dom element. _cumulativeOffset(element) { let top = 0, left = 0, scrollTop = 0, scrollLeft = 0; do { top += element.offsetTop || 0; left += element.offsetLeft || 0; scrollTop += element.scrollTop || 0; scrollLeft += element.scrollLeft || 0; element = element.offsetParent; } while (element && !(element instanceof HTMLBodyElement)); scrollTop += document.body.scrollTop || document.documentElement.scrollTop; scrollLeft += document.body.scrollLeft || document.documentElement.scrollLeft; return { top: top - scrollTop, left: left - scrollLeft }; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/jszip/dist/jszip.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import * as wjGridSheet from '@grapecity/wijmo.react.grid.sheet'; // class App extends React.Component { // constructor(props) { super(props); this._applyFillColor = false; // this._fonts = [ { name: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { name: 'Arial Black', value: '"Arial Black", Gadget, sans-serif' }, { name: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { name: 'Courier New', value: '"Courier New", Courier, monospace' }, { name: 'Georgia', value: 'Georgia, serif' }, { name: 'Impact', value: 'Impact, Charcoal, sans-serif' }, { name: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' }, { name: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif' }, { name: 'Palatino Linotype', value: '"Palatino Linotype", "Book Antiqua", Palatino, serif' }, { name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' }, { name: 'Segoe UI', value: '"Segoe UI", "Roboto", sans-serif' }, { name: 'Times New Roman', value: '"Times New Roman", Times, serif' }, { name: 'Trebuchet MS', value: '"Trebuchet MS", Helvetica, sans-serif' }, { name: 'Verdana', value: 'Verdana, Geneva, sans-serif' } ]; // this._fontSizeList = [ { name: '8', value: '8px' }, { name: '9', value: '9px' }, { name: '10', value: '10px' }, { name: '11', value: '11px' }, { name: '12', value: '12px' }, { name: '14', value: '14px' }, { name: '16', value: '16px' }, { name: '18', value: '18px' }, { name: '20', value: '20px' }, { name: '22', value: '22px' }, { name: '24', value: '24px' } ]; this._updatingSelection = false; // this.state = { selectedValue: '0', fontIdx: 0, fontSizeIdx: 5, isBold: false, isItalic: false, isUnderline: false, textAlign: 'left' }; } // render() { return (<div className="container-fluid"> <wjGridSheet.FlexSheet initialized={this.initializeFlexSheet.bind(this)}> <wjGridSheet.Sheet name="Number" rowCount={20} columnCount={8}></wjGridSheet.Sheet> <wjGridSheet.Sheet name="Date" rowCount={20} columnCount={8}></wjGridSheet.Sheet> </wjGridSheet.FlexSheet> <wjInput.ColorPicker style={{ display: "none", position: "fixed", zIndex: 100 }} initialized={this.colorPickerInit.bind(this)}> </wjInput.ColorPicker> <div className="well well-lg"> <wjInput.Menu header='Format' value={this.state.selectedValue} itemClicked={this.formatChanged.bind(this)}> <wjInput.MenuItem value="0">Decimal Format</wjInput.MenuItem> <wjInput.MenuItem value="n2">Number Format</wjInput.MenuItem> <wjInput.MenuItem value="p">Percentage Format</wjInput.MenuItem> <wjInput.MenuItem value="c2">Currency Format</wjInput.MenuItem> <wjInput.MenuSeparator></wjInput.MenuSeparator> <wjInput.MenuItem value="d">Short Date</wjInput.MenuItem> <wjInput.MenuItem value="D">Long Date</wjInput.MenuItem> <wjInput.MenuItem value="f">Full Date/TIme (short time)</wjInput.MenuItem> <wjInput.MenuItem value="F">Full Date/TIme (long time)</wjInput.MenuItem> </wjInput.Menu> <div>Font: <wjInput.ComboBox style={{ width: "120px" }} itemsSource={this._fonts} selectedIndex={this.state.fontIdx} displayMemberPath="name" selectedValuePath="value" isEditable={false} selectedIndexChanged={this.fontChanged.bind(this)}> </wjInput.ComboBox> <wjInput.ComboBox style={{ width: "80px" }} itemsSource={this._fontSizeList} selectedIndex={this.state.fontSizeIdx} displayMemberPath="name" selectedValuePath="value" isEditable={false} selectedIndexChanged={this.fontSizeChanged.bind(this)}> </wjInput.ComboBox> <div className="btn-group"> <button type="button" className={`btn btn-default ${this.state.isBold ? 'active' : ''}`} onClick={this.applyBoldStyle.bind(this)}> Bold</button> <button type="button" className={`btn btn-default ${this.state.isItalic ? 'active' : ''}`} onClick={this.applyItalicStyle.bind(this)}> Italic</button> <button type="button" className={`btn btn-default ${this.state.isUnderline ? 'active' : ''}`} onClick={this.applyUnderlineStyle.bind(this)}> Underline</button> </div> </div> <div>Color: <div className="btn-group"> <button type="button" className="btn btn-default" onClick={(e) => this.showColorPicker(e, false)}> Fore Color</button> <button type="button" className="btn btn-default" onClick={(e) => this.showColorPicker(e, true)}> Fill Color</button> </div>Alignment: <div className="btn-group"> <button type="button" className={`btn btn-default ${this.state.textAlign == 'left' ? 'active' : ''}`} onClick={() => this.applyCellTextAlign("left")}> Left</button> <button type="button" className={`btn btn-default ${this.state.textAlign == 'center' ? 'active' : ''}`} onClick={() => this.applyCellTextAlign("center")}> Center</button> <button type="button" className={`btn btn-default ${this.state.textAlign == 'right' ? 'active' : ''}`} onClick={() => this.applyCellTextAlign("right")}> Right</button> </div> </div> </div> </div>); } // initializeFlexSheet(sender) { this._flex = sender; // sender.deferUpdate(() => { for (let sheetIdx = 0; sheetIdx < sender.sheets.length; sheetIdx++) { sender.selectedSheetIndex = sheetIdx; let sheetName = sender.selectedSheet.name; // for (let colIdx = 0; colIdx < sender.columns.length; colIdx++) { for (let rowIdx = 0; rowIdx < sender.rows.length; rowIdx++) { if (sheetName === 'Number') { sender.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { let date = new Date(2015, colIdx, rowIdx + 1); sender.setCellData(rowIdx, colIdx, date); } } } } // sender.selectedSheetIndex = 0; setTimeout(() => this._updateSelection(sender, sender.selection), 100); }); // sender.selectionChanged.addHandler((sender, args) => { this._updateSelection(sender, args.range); }); } // fontChanged(sender) { if (sender.selectedItem && !this._updatingSelection) { this._flex.applyCellsStyle({ fontFamily: sender.selectedItem.value }); } } // fontSizeChanged(sender) { if (sender.selectedItem && !this._updatingSelection) { this._flex.applyCellsStyle({ fontSize: sender.selectedItem.value }); } } // colorPickerInit(sender) { // if the browser is firefox, we should bind the blur event. (TFS #124387) // if the browser is IE, we should bind the focusout event. (TFS #124500) let blurEvt = /firefox/i.test(window.navigator.userAgent) ? 'blur' : 'focusout'; // Hide the color picker control when it lost the focus. sender.hostElement.addEventListener(blurEvt, () => { setTimeout(() => { if (!sender.containsFocus()) { this._updatingSelection = false; sender.hostElement.style.display = 'none'; } }, 0); }); // // Initialize the value changed event handler for the color picker control. sender.valueChanged.addHandler(() => { if (this._applyFillColor) { this._flex.applyCellsStyle({ backgroundColor: sender.value }); } else { this._flex.applyCellsStyle({ color: sender.value }); } }); // this._colorPicker = sender; } // formatChanged(sender) { if (sender.selectedValue) { this._flex.applyCellsStyle({ format: sender.selectedValue }); this.setState({ selectedValue: sender.selectedValue }); } } // // apply the text alignment for the selected cells applyCellTextAlign(value) { this._flex.applyCellsStyle({ textAlign: value }); this.setState({ textAlign: value }); } // // apply the bold font weight for the selected cells applyBoldStyle() { this._flex.applyCellsStyle({ fontWeight: this.state.isBold ? 'none' : 'bold' }); this.setState({ isBold: !this.state.isBold }); } // // apply the underline text decoration for the selected cells applyUnderlineStyle() { this._flex.applyCellsStyle({ textDecoration: this.state.isUnderline ? 'none' : 'underline' }); this.setState({ isUnderline: !this.state.isUnderline }); } // // apply the italic font style for the selected cells applyItalicStyle() { this._flex.applyCellsStyle({ fontStyle: this.state.isItalic ? 'none' : 'italic' }); this.setState({ isItalic: !this.state.isItalic }); } // // show the color picker control. showColorPicker(e, isFillColor) { let offset = this._cumulativeOffset(e.target); // let he = this._colorPicker.hostElement; he.style.display = 'inline'; he.style.left = offset.left + 'px'; he.style.top = offset.top - he.clientHeight - 5 + 'px'; he.focus(); // this._applyFillColor = isFillColor; } // // Update the selection object of the scope. _updateSelection(fs, sel) { let rCnt = fs.rows.length, cCnt = fs.columns.length, fontIdx = 0, fontSizeIdx = 5; // this._updatingSelection = true; // if (sel.row > -1 && sel.col > -1 && rCnt > 0 && cCnt > 0 && sel.col < cCnt && sel.col2 < cCnt && sel.row < rCnt && sel.row2 < rCnt) { let cellContent = fs.getCellData(sel.row, sel.col, false), cellStyle = fs.selectedSheet.getCellStyle(sel.row, sel.col), cellFormat; // if (cellStyle) { fontIdx = this._checkFontfamily(cellStyle.fontFamily); fontSizeIdx = this._checkFontSize(cellStyle.fontSize); cellFormat = cellStyle.format; } // let format; if (!!cellFormat) { format = cellFormat; } else { if (wijmo.isInt(cellContent)) { format = '0'; } else if (wijmo.isNumber(cellContent)) { format = 'n2'; } else if (wijmo.isDate(cellContent)) { format = 'd'; } } // let state = fs.getSelectionFormatState(); this.setState({ isBold: state.isBold, isItalic: state.isItalic, isUnderline: state.isUnderline, textAlign: state.textAlign, fontIdx: fontIdx, fontSizeIdx: fontSizeIdx }); } // this._updatingSelection = false; } // // check font family for the font name combobox of the ribbon. _checkFontfamily(value) { let fonts = this._fonts; // if (!value) { return 0; } // for (let fontIndex = 0; fontIndex < fonts.length; fontIndex++) { let font = fonts[fontIndex]; if (font.name === value || font.value === value) { return fontIndex; } } // return 0; } // // check font size for the font size combobox of the ribbon. _checkFontSize(value) { let sizeList = this._fontSizeList; // if (value == null) { return 5; } // for (let index = 0; index < sizeList.length; index++) { let size = sizeList[index]; if (size.value === value || size.name === value) { return index; } } // return 5; } // // Get the absolute position of the dom element. _cumulativeOffset(element) { let top = 0, left = 0, scrollTop = 0, scrollLeft = 0; // do { top += element.offsetTop || 0; left += element.offsetLeft || 0; scrollTop += element.scrollTop || 0; scrollLeft += element.scrollLeft || 0; element = element.offsetParent; } while (element && !(element instanceof HTMLBodyElement)); // scrollTop += document.body.scrollTop || document.documentElement.scrollTop; scrollLeft += document.body.scrollLeft || document.documentElement.scrollLeft; // return { top: top - scrollTop, left: left - scrollLeft }; } } // ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; }