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 wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjFlexSheet 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 formatSheet = new wjFlexSheet.FlexSheet('#formatSheet'); let inputColor = new wjInput.ColorPicker('#inputColor'); // let formatMenu = new wjInput.Menu('#formatMenu', { selectedIndex: 0, itemClicked: (sender) => { updateMenuHeader(sender, 'Format'); formatSheet.applyCellsStyle({ format: sender.selectedValue }); } }); updateMenuHeader(formatMenu, 'Format'); // let cboFontName = new wjInput.ComboBox('#fonts', { itemsSource: fonts, selectedIndex: 0, displayMemberPath: 'name', selectedValuePath: 'value', isEditable: false }); // let cboFontSize = new wjInput.ComboBox('#fontSize', { itemsSource: fontSizeList, selectedIndex: 0, displayMemberPath: 'name', selectedValuePath: 'value', isEditable: false }); // formatSheet.addUnboundSheet('Number', 20, 8); formatSheet.addUnboundSheet('Date', 20, 8); formatSheet.deferUpdate(() => { for (let sheetIdx = formatSheet.sheets.length - 1; sheetIdx >= 0; sheetIdx--) { formatSheet.selectedSheetIndex = sheetIdx; let sheetName = formatSheet.selectedSheet.name; for (let colIdx = 0; colIdx < formatSheet.columns.length; colIdx++) { for (let rowIdx = 0; rowIdx < formatSheet.rows.length; rowIdx++) { if (sheetName === 'Number') { formatSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { let date = new Date(2018, colIdx, rowIdx + 1); formatSheet.setCellData(rowIdx, colIdx, date); } } } } updateSelection(formatSheet.selection); }); formatSheet.selectionChanged.addHandler((sender, args) => { updateSelection(args.range); selectionFormatState = formatSheet.getSelectionFormatState(); updateStyleButtonState(); }); // let ua = window.navigator.userAgent, blurEvt = /firefox/i.test(ua) ? 'blur' : 'focusout'; // Hide the color picker control when it lost the focus. inputColor.hostElement.addEventListener(blurEvt, function () { 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) { formatSheet.applyCellsStyle({ backgroundColor: inputColor.value }); } else { formatSheet.applyCellsStyle({ color: inputColor.value }); } }); // cboFontName.selectedIndexChanged.addHandler(() => { // apply the font family for the selected cells if (!updatingSelection) { formatSheet.applyCellsStyle({ fontFamily: cboFontName.selectedItem.value }); } }); // cboFontSize.selectedIndexChanged.addHandler(() => { // apply the font size for the selected cells if (!updatingSelection) { formatSheet.applyCellsStyle({ fontSize: cboFontSize.selectedItem.value }); } }); // onClick('applyCellTextLeftAlign', () => applyCellTextAlign('left')); onClick('applyCellTextCenterAlign', () => applyCellTextAlign('center')); onClick('applyCellTextRightAlign', () => applyCellTextAlign('right')); // onClick('applyBoldStyle', e => { formatSheet.applyCellsStyle({ fontWeight: selectionFormatState.isBold ? 'none' : 'bold' }); selectionFormatState.isBold = !selectionFormatState.isBold; // if (selectionFormatState.isBold) { wjCore.addClass(e.target, 'active'); } else { wjCore.removeClass(e.target, 'active'); } }); // onClick('applyUnderlineStyle', e => { formatSheet.applyCellsStyle({ textDecoration: selectionFormatState.isUnderline ? 'none' : 'underline' }); selectionFormatState.isUnderline = !selectionFormatState.isUnderline; // if (selectionFormatState.isUnderline) { wjCore.addClass(e.target, 'active'); } else { wjCore.removeClass(e.target, 'active'); } }); // onClick('applyItalicStyle', e => { formatSheet.applyCellsStyle({ fontStyle: selectionFormatState.isItalic ? 'none' : 'italic' }); selectionFormatState.isItalic = !selectionFormatState.isItalic; // if (selectionFormatState.isItalic) { wjCore.addClass(e.target, 'active'); } else { wjCore.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) { formatSheet.applyCellsStyle({ textAlign: textAlign }); selectionFormatState.textAlign = textAlign; updateTextAlignState(textAlign); } // // show the color picker control. function showColorPicker(e, isFillColor) { let offset = cumulativeOffset(e.target); // inputColor.hostElement.style.display = 'inline'; inputColor.hostElement.style.left = offset.left + 'px'; inputColor.hostElement.style.top = (offset.top - inputColor.hostElement.clientHeight - 5) + 'px'; inputColor.hostElement.focus(); // applyFillColor = isFillColor; } // // Update the selection object of the scope. function updateSelection(sel) { let rowCnt = formatSheet.rows.length, colCnt = formatSheet.columns.length; // updatingSelection = true; // if (sel.row > -1 && sel.col > -1 && rowCnt > 0 && colCnt > 0 && sel.col < colCnt && sel.col2 < colCnt && sel.row < rowCnt && sel.row2 < rowCnt) { // let cellContent = formatSheet.getCellData(sel.row, sel.col, false), cellStyle = formatSheet.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 (wjCore.isInt(cellContent)) { cellFormat = '0'; } else if (wjCore.isNumber(cellContent)) { cellFormat = 'n2'; } else if (wjCore.isDate(cellContent)) { cellFormat = 'd'; } } // formatMenu.selectedValue = cellFormat; } // updatingSelection = false; } // function updateStyleButtonState() { let boldBtn = document.querySelector('#applyBoldStyle'), underlineBtn = document.querySelector('#applyUnderlineStyle'), italicBtn = document.querySelector('#applyItalicStyle'); // if (selectionFormatState.isBold) { wjCore.addClass(boldBtn, 'active'); } else { wjCore.removeClass(boldBtn, 'active'); } // if (selectionFormatState.isUnderline) { wjCore.addClass(underlineBtn, 'active'); } else { wjCore.removeClass(underlineBtn, 'active'); } // if (selectionFormatState.isItalic) { wjCore.addClass(italicBtn, 'active'); } else { wjCore.removeClass(italicBtn, 'active'); } // updateTextAlignState(selectionFormatState.textAlign); } // function updateTextAlignState(textAlign) { let leftBtn = document.querySelector('#applyCellTextLeftAlign'), centerBtn = document.querySelector('#applyCellTextCenterAlign'), rightBtn = document.querySelector('#applyCellTextRightAlign'); // wjCore.removeClass(leftBtn, 'active'); wjCore.removeClass(centerBtn, 'active'); wjCore.removeClass(rightBtn, 'active'); // switch (textAlign) { case 'left': wjCore.addClass(leftBtn, 'active'); break; case 'center': wjCore.addClass(centerBtn, 'active'); break; case 'right': wjCore.addClass(rightBtn, 'active'); break; } } // // check font family for the font name combobox of the ribbon. function checkFontfamily(fontFamily) { 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. function checkFontSize(fontSize) { if (fontSize == null) { return 5; } // for (let index = 0; index < fontSizeList.length; index++) { let size = fontSizeList[index]; // if (size.value === fontSize || size.name === fontSize) { 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 wjcCore from '@grapecity/wijmo'; import * as wjcInput from '@grapecity/wijmo.input'; import * as wjcGrid from '@grapecity/wijmo.grid'; import * as wjcSheet from '@grapecity/wijmo.grid.sheet'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { fonts: any[]; fontSizeList: any[]; selectionFormatState: wjcSheet.IFormatState; selection: any = { content: '', position: '', fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '8px' }; private _updatingSelection: boolean = false; private _applyFillColor: boolean = false; private _format: string = ''; @ViewChild('flex') flex: wjcSheet.FlexSheet; // references Combobox named 'cboFontName' in the view @ViewChild('cboFontName') cboFontName: wjcInput.ComboBox; // references Combobox named 'cboFontSize' in the view @ViewChild('cboFontSize') cboFontSize: wjcInput.ComboBox; // references Combobox named 'cboTableStyles' in the view @ViewChild('cboTableStyles') cboTableStyles: wjcInput.ComboBox; // references Combobox named 'cboFontSize' in the view @ViewChild('colorPicker') colorPicker: wjcInput.ColorPicker; // 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 }); } } } constructor() { 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.selectionFormatState = {}; } initializeFlexSheet(flex: wjcSheet.FlexSheet) { flex.deferUpdate(() => { let sheetIdx, sheetName, colIdx, rowIdx, date; for (sheetIdx = 0; sheetIdx < flex.sheets.length; sheetIdx++) { flex.selectedSheetIndex = sheetIdx; sheetName = flex.selectedSheet.name; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { if (sheetName === 'Number') { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { date = new Date(2015, colIdx, rowIdx + 1); flex.setCellData(rowIdx, colIdx, date); } } } } flex.selectedSheetIndex = 0; this._updateSelection(flex, flex.selection); }); flex.selectionChanged.addHandler((sender: any, args: wjcGrid.CellRangeEventArgs) => { this._updateSelection(flex, args.range); this.selectionFormatState = flex.getSelectionFormatState(); }); } cboFontNameInit(cboFontName: wjcInput.ComboBox) { if (cboFontName) { cboFontName.selectedIndexChanged.addHandler(() => { // apply the font family for the selected cells if (!this._updatingSelection) { this.flex.applyCellsStyle({ fontFamily: cboFontName.selectedItem.value }); } }); } } cboFontSizeInit(cboFontSize: wjcInput.ComboBox) { if (cboFontSize) { cboFontSize.selectedIndexChanged.addHandler(() => { // apply the font size for the selected cells if (!this._updatingSelection) { this.flex.applyCellsStyle({ fontSize: cboFontSize.selectedItem.value }); } }); } } colorPickerInit(colorPicker: wjcInput.ColorPicker) { let ua = window.navigator.userAgent, blurEvt: string; if (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) blurEvt = /firefox/i.test(ua) ? '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) { if (this.flex) { this.flex.applyCellsStyle({ textAlign: textAlign }); this.selectionFormatState.textAlign = textAlign; } } // apply the bold font weight for the selected cells applyBoldStyle() { if (this.flex) { 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() { if (this.flex) { 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() { if (this.flex) { 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(e.target); if (this.colorPicker) { this.colorPicker.hostElement.style.display = 'inline'; this.colorPicker.hostElement.style.left = offset.left + 'px'; this.colorPicker.hostElement.style.top = (offset.top - this.colorPicker.hostElement.clientHeight - 5) + 'px'; this.colorPicker.hostElement.focus(); } this._applyFillColor = isFillColor; }; // Update the selection object of the scope. private _updateSelection(flexSheet: wjcSheet.FlexSheet, sel: wjcGrid.CellRange) { let row = flexSheet.rows[sel.row], rowCnt = flexSheet.rows.length, colCnt = flexSheet.columns.length, r, c, cellStyle, cellContent, cellFormat; this._updatingSelection = true; if (sel.row > -1 && sel.col > -1 && rowCnt > 0 && colCnt > 0 && sel.col < colCnt && sel.col2 < colCnt && sel.row < rowCnt && sel.row2 < rowCnt) { r = sel.row >= rowCnt ? rowCnt - 1 : sel.row; c = sel.col >= colCnt ? colCnt - 1 : sel.col; cellContent = flexSheet.getCellData(sel.row, sel.col, false); cellStyle = flexSheet.selectedSheet.getCellStyle(sel.row, sel.col); 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 (wjcCore.isInt(cellContent)) { this.format = '0'; } else if (wjcCore.isNumber(cellContent)) { this.format = 'n2'; } else if (wjcCore.isDate(cellContent)) { this.format = 'd'; } } } this._updatingSelection = false; } // check font family for the font name combobox of the ribbon. private _checkFontfamily(fontFamily: string) { let fonts = this.fonts, fontIndex = 0, font; if (!fontFamily) { return fontIndex; } for (; fontIndex < fonts.length; fontIndex++) { font = fonts[fontIndex]; if (font.name === fontFamily || font.value === fontFamily) { return fontIndex; } } return 10; } // check font size for the font size combobox of the ribbon. private _checkFontSize(fontSize: string) { let sizeList = this.fontSizeList, index = 0, size; if (fontSize == null) { return 5; } for (; index < sizeList.length; index++) { size = sizeList[index]; if (size.value === fontSize || size.name === fontSize) { return index; } } return 5; } // Get the absolute position of the dom element. private _cumulativeOffset(element: any): any { 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 }; } } @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]="10" [displayMemberPath]="'name'" [selectedValuePath]="'value'" [isEditable]="false" (initialized)="cboFontNameInit(cboFontName)"> </wj-combo-box> <wj-combo-box #cboFontSize style="width:80px" [itemsSource]="fontSizeList" [selectedIndex]="5" [displayMemberPath]="'name'" [selectedValuePath]="'value'" [isEditable]="false" (initialized)="cboFontSizeInit(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: <b>' + selectedItem.header + '</b>'" :selectedItem="selectedItem" :value="format" :displayMemberPath="'header'" :selectedValuePath="'value'" :itemsSource="itemsSource" :itemClicked="itemClicked"> </wj-menu> <div>Font: <wj-combo-box style="width:120px" :itemsSource="fonts" :selectedIndex="10" :displayMemberPath="'name'" :selectedValuePath="'value'" :isEditable="false" :initialized="cboFontNameInit"> </wj-combo-box> <wj-combo-box style="width:80px" :itemsSource="fontSizeList" :selectedIndex="5" :displayMemberPath="'name'" :selectedValuePath="'value'" :isEditable="false" :initialized="cboFontSizeInit"> </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> </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" } ], itemsSource: [ { header: "Decimal Format", value: 0 }, { header: "Number Format", value: "n2" }, { header: "Percentage Format", value: "p2" }, { header: "Currency Format", value: "c2" }, { header: '<div class="wj-separator"></div>', value: "" }, { header: "Short Date", value: "d" }, { header: "Long Date", value: "D" }, { header: "Full Date/TIme (short time)", value: "f" }, { header: "Full Date/TIme (long time)", value: "F" } ], selection: { content: "", position: "", fontFamily: "Arial, Helvetica, sans-serif", fontSize: "8px" }, selectedItem: { header: "Decimal Format", value: 0 }, selectionFormatState: {}, _updatingSelection: false, _applyFillColor: false, _format: "0", flex: {}, cboFontName: {}, cboFontSize: {}, cboTableStyles: {}, colorPicker: {}, format: "" }; }, methods: { initializeFlexSheet: function(flex) { flex.deferUpdate(() => { let sheetIdx, sheetName, colIdx, rowIdx, date; for (sheetIdx = 0; sheetIdx < flex.sheets.length; sheetIdx++) { flex.selectedSheetIndex = sheetIdx; sheetName = flex.selectedSheet.name; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { if (sheetName === "Number") { flex.setCellData( rowIdx, colIdx, colIdx + rowIdx ); } else { date = new Date(2015, colIdx, rowIdx + 1); flex.setCellData(rowIdx, colIdx, date); } } } } flex.selectedSheetIndex = 0; this._updateSelection(flex, flex.selection); }); flex.selectionChanged.addHandler((sender, args) => { this._updateSelection(flex, args.range); this.selectionFormatState = flex.getSelectionFormatState(); }); this.flex = flex; }, cboFontNameInit: function(cboFontName) { if (cboFontName) { cboFontName.selectedIndexChanged.addHandler(() => { // apply the font family for the selected cells if (!this._updatingSelection) { this.flex.applyCellsStyle({ fontFamily: cboFontName.selectedItem.value }); } }); } this.cboFontName = cboFontName; }, cboFontSizeInit: function(cboFontSize) { if (cboFontSize) { cboFontSize.selectedIndexChanged.addHandler(() => { // apply the font size for the selected cells if (!this._updatingSelection) { this.flex.applyCellsStyle({ fontSize: cboFontSize.selectedItem.value }); } }); } this.cboFontSize = cboFontSize; }, colorPickerInit: function(colorPicker) { let ua = window.navigator.userAgent, blurEvt; if (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) blurEvt = /firefox/i.test(ua) ? "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; }, itemClicked: function(sender) { this.selectedItem = sender.selectedItem; this.flex.applyCellsStyle({ format: sender.selectedValue }); }, // apply the text alignment for the selected cells applyCellTextAlign: function(textAlign) { if (this.flex) { this.flex.applyCellsStyle({ textAlign: textAlign }); this.selectionFormatState.textAlign = textAlign; } }, // apply the bold font weight for the selected cells applyBoldStyle: function() { if (this.flex) { 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: function() { if (this.flex) { 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: function() { if (this.flex) { this.flex.applyCellsStyle({ fontStyle: this.selectionFormatState.isItalic ? "none" : "italic" }); this.selectionFormatState.isItalic = !this.selectionFormatState .isItalic; } }, // show the color picker control. showColorPicker: function(e, isFillColor) { let offset = this._cumulativeOffset(e.target); if (this.colorPicker) { this.colorPicker.hostElement.style.display = "inline"; this.colorPicker.hostElement.style.left = offset.left + "px"; this.colorPicker.hostElement.style.top = offset.top - this.colorPicker.hostElement.clientHeight - 5 + "px"; this.colorPicker.hostElement.focus(); } this._applyFillColor = isFillColor; }, // Update the selection object of the scope. _updateSelection: function(flexSheet, sel) { let row = flexSheet.rows[sel.row], rowCnt = flexSheet.rows.length, colCnt = flexSheet.columns.length, r, c, cellStyle, cellContent, cellFormat; this._updatingSelection = true; if ( sel.row > -1 && sel.col > -1 && rowCnt > 0 && colCnt > 0 && sel.col < colCnt && sel.col2 < colCnt && sel.row < rowCnt && sel.row2 < rowCnt ) { r = sel.row >= rowCnt ? rowCnt - 1 : sel.row; c = sel.col >= colCnt ? colCnt - 1 : sel.col; cellContent = flexSheet.getCellData(sel.row, sel.col, false); cellStyle = flexSheet.selectedSheet.getCellStyle( sel.row, sel.col ); 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._updatingSelection = false; }, // check font family for the font name combobox of the ribbon. _checkFontfamily: function(fontFamily) { let fonts = this.fonts, fontIndex = 0, font; if (!fontFamily) { return fontIndex; } for (; fontIndex < fonts.length; fontIndex++) { font = fonts[fontIndex]; if (font.name === fontFamily || font.value === fontFamily) { return fontIndex; } } return 10; }, // check font size for the font size combobox of the ribbon. _checkFontSize: function(fontSize) { let sizeList = this.fontSizeList, index = 0, size; if (fontSize == null) { return 5; } for (; index < sizeList.length; index++) { size = sizeList[index]; if (size.value === fontSize || size.name === fontSize) { return index; } } return 5; }, // Get the absolute position of the dom element. _cumulativeOffset: function(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 = { hello: false }; this.state = { 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" } ], itemsSource: [ { header: "Decimal Format", value: 0 }, { header: "Number Format", value: "n2" }, { header: "Percentage Format", value: "p2" }, { header: "Currency Format", value: "c2" }, { header: '<div class="wj-separator"></div>', value: "" }, { header: "Short Date", value: "d" }, { header: "Long Date", value: "D" }, { header: "Full Date/TIme (short time)", value: "f" }, { header: "Full Date/TIme (long time)", value: "F" } ], selection: { content: "", position: "", fontFamily: "Arial, Helvetica, sans-serif", fontSize: "8px" }, selectedItem: { header: "Decimal Format", value: 0 }, selectionFormatState: {}, _updatingSelection: false, _format: "0", flex: {}, cboFontName: {}, cboFontSize: {}, cboTableStyles: {}, colorPicker: {}, format: "" }; } 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: <b>' + this.state.selectedItem.header + '</b>'} selectedItem={this.state.selectedItem} value={this.state.format} displayMemberPath="header" selectedValuePath="value" itemsSource={this.state.itemsSource} itemClicked={this.itemClicked.bind(this)}> </wjInput.Menu> <div>Font: <wjInput.ComboBox style={{ width: "120px" }} itemsSource={this.state.fonts} selectedIndex={10} displayMemberPath="name" selectedValuePath="value" isEditable={false} initialized={this.cboFontNameInit.bind(this)}> </wjInput.ComboBox> <wjInput.ComboBox style={{ width: "80px" }} itemsSource={this.state.fontSizeList} selectedIndex={5} displayMemberPath="name" selectedValuePath="value" isEditable={false} initialized={this.cboFontSizeInit.bind(this)}> </wjInput.ComboBox> <div className="btn-group"> <button type="button" className={this.state.selectionFormatState.isBold ? 'btn btn-default active' : 'btn btn-default '} onClick={this.applyBoldStyle.bind(this)}> Bold</button> <button type="button" className={this.state.selectionFormatState.isItalic ? 'btn btn-default active' : 'btn btn-default'} onClick={this.applyItalicStyle.bind(this)}> Italic</button> <button type="button" className={this.state.selectionFormatState.isUnderline ? 'btn btn-default active' : 'btn btn-default'} 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={this.state.selectionFormatState.textAlign === 'left' ? 'btn btn-default left' : 'btn btn-default '} onClick={() => this.applyCellTextAlign("left")}> Left</button> <button type="button" className={this.state.selectionFormatState.textAlign === 'center' ? 'btn btn-default center' : 'btn btn-default '} onClick={() => this.applyCellTextAlign("center")}>Center</button> <button type="button" className={this.state.selectionFormatState.textAlign === 'right' ? 'btn btn-default right' : 'btn btn-default '} onClick={() => this.applyCellTextAlign("right")}> Right</button> </div> </div> </div> </div>); } initializeFlexSheet(flex) { flex.deferUpdate(() => { let sheetIdx, sheetName, colIdx, rowIdx, date; for (sheetIdx = 0; sheetIdx < flex.sheets.length; sheetIdx++) { flex.selectedSheetIndex = sheetIdx; sheetName = flex.selectedSheet.name; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { if (sheetName === "Number") { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } else { date = new Date(2015, colIdx, rowIdx + 1); flex.setCellData(rowIdx, colIdx, date); } } } } flex.selectedSheetIndex = 0; this._updateSelection(flex, flex.selection); }); flex.selectionChanged.addHandler((sender, args) => { this._updateSelection(flex, args.range); this.setState({ selectionFormatState: flex.getSelectionFormatState() }); }); this.setState({ flex: flex }); } cboFontNameInit(cboFontName) { if (cboFontName) { cboFontName.selectedIndexChanged.addHandler(() => { // apply the font family for the selected cells if (!this.state._updatingSelection) { this.state.flex.applyCellsStyle({ fontFamily: cboFontName.selectedItem.value }); } }); } this.setState({ cboFontName: cboFontName }); } cboFontSizeInit(cboFontSize) { if (cboFontSize) { cboFontSize.selectedIndexChanged.addHandler(() => { // apply the font size for the selected cells if (!this.state._updatingSelection) { this.state.flex.applyCellsStyle({ fontSize: cboFontSize.selectedItem.value }); } }); } this.setState({ cboFontSize: cboFontSize }); } colorPickerInit(colorPicker) { let ua = window.navigator.userAgent, blurEvt; if (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) blurEvt = /firefox/i.test(ua) ? "blur" : "focusout"; // Hide the color picker control when it lost the focus. colorPicker.hostElement.addEventListener(blurEvt, () => { setTimeout(() => { if (!colorPicker.containsFocus()) { this.setState({ _updatingSelection: 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.state.flex.applyCellsStyle({ backgroundColor: colorPicker.value }); } else { this.state.flex.applyCellsStyle({ color: colorPicker.value }); } }); } this.setState({ colorPicker: colorPicker }); } itemClicked(sender) { this.setState({ selectedItem: sender.selectedItem }); this.state.flex.applyCellsStyle({ format: sender.selectedValue }); } // apply the text alignment for the selected cells applyCellTextAlign(textAlign) { if (this.state.flex) { this.state.flex.applyCellsStyle({ textAlign: textAlign }); this.state.selectionFormatState.textAlign = textAlign; } } // apply the bold font weight for the selected cells applyBoldStyle() { if (this.state.flex) { this.state.flex.applyCellsStyle({ fontWeight: this.state.selectionFormatState.isBold ? "none" : "bold" }); this.state.selectionFormatState.isBold = !this.state.selectionFormatState .isBold; } } // apply the underline text decoration for the selected cells applyUnderlineStyle() { if (this.state.flex) { this.state.flex.applyCellsStyle({ textDecoration: this.state.selectionFormatState.isUnderline ? "none" : "underline" }); this.state.selectionFormatState.isUnderline = !this .state.selectionFormatState.isUnderline; } } // apply the italic font style for the selected cells applyItalicStyle() { if (this.state.flex) { this.state.flex.applyCellsStyle({ fontStyle: this.state.selectionFormatState.isItalic ? "none" : "italic" }); this.state.selectionFormatState.isItalic = !this.state.selectionFormatState .isItalic; } } // show the color picker control. showColorPicker(e, isFillColor) { let offset = this._cumulativeOffset(e.target); if (this.state.colorPicker) { this.state.colorPicker.hostElement.style.display = "inline"; this.state.colorPicker.hostElement.style.left = offset.left + "px"; this.state.colorPicker.hostElement.style.top = offset.top - this.state.colorPicker.hostElement.clientHeight - 5 + "px"; this.state.colorPicker.hostElement.focus(); } this._applyFillColor = isFillColor; } // Update the selection object of the scope. _updateSelection(flexSheet, sel) { let row = flexSheet.rows[sel.row], rowCnt = flexSheet.rows.length, colCnt = flexSheet.columns.length, r, c, cellStyle, cellContent, cellFormat; this.setState({ _updatingSelection: true }); if (sel.row > -1 && sel.col > -1 && rowCnt > 0 && colCnt > 0 && sel.col < colCnt && sel.col2 < colCnt && sel.row < rowCnt && sel.row2 < rowCnt) { r = sel.row >= rowCnt ? rowCnt - 1 : sel.row; c = sel.col >= colCnt ? colCnt - 1 : sel.col; cellContent = flexSheet.getCellData(sel.row, sel.col, false); cellStyle = flexSheet.selectedSheet.getCellStyle(sel.row, sel.col); if (cellStyle) { this.state.cboFontName.selectedIndex = this._checkFontfamily(cellStyle.fontFamily); this.state.cboFontSize.selectedIndex = this._checkFontSize(cellStyle.fontSize); cellFormat = cellStyle.format; } else { this.state.cboFontName.selectedIndex = 0; this.state.cboFontSize.selectedIndex = 5; } 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.setState({ format: format }); } this.setState({ _updatingSelection: false }); } // check font family for the font name combobox of the ribbon. _checkFontfamily(fontFamily) { let fonts = this.state.fonts, fontIndex = 0, font; if (!fontFamily) { return fontIndex; } for (; fontIndex < fonts.length; fontIndex++) { font = fonts[fontIndex]; if (font.name === fontFamily || font.value === fontFamily) { return fontIndex; } } return 10; } // check font size for the font size combobox of the ribbon. _checkFontSize(fontSize) { let sizeList = this.state.fontSizeList, index = 0, size; if (fontSize == null) { return 5; } for (; index < sizeList.length; index++) { 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 }; } } 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; }