Forums Home / Wijmo / General Discussion
Posted by: mehta_deepak on 8 February 2018, 4:33 pm EST
mehta_deepak
Posted 8 February 2018, 4:33 pm EST
Hi,
I am trying to export a Flexsheet with some data and style.All the styles gets exported except for border.I am drawing the border in the sheet using the itemFormatter function.Am I missing something here?
Also , I was not able to draw the border using the Flexsheet`s applyCellsStyle method and setting the Border properties as given in the ICellStyle Interface.
Thanks,
Raznin
manish.gupta
Posted 9 February 2018, 4:52 am EST
Hi Raznin,
We are sorry for the inconvenience.
This is limitation of FlexSheet. FlexSheet only exports the cell style set by ‘applyCellsStyle’ method of FlexSheet or loaded from excel file except border styles.
~Manish
mehta_deepak
Posted 9 February 2018, 11:35 am EST
Hi Manish,
Why is the applyCellsStyle method not working for borders? I tried adding css class to the method and draw borders which works(though the borders won
t appear after exporting),but using the ICellStyle interface border properties as shown below doeswijmoSheet.applyCellsStyle({
borderTopColor:‘black’,
borderTopStyle:‘solid’,
borderTopWidth: ‘2px’,
backgroundColor:‘red’
}, [new wijmo.grid.CellRange(0,0,0,0)]);
We have a requirement where the user should be able to edit the Flexsheet with data and style including the border(must) and then export the sheet.
Thanks,
Raznin
abhishek.dutta
Posted 12 February 2018, 2:57 am EST
Hi,
We are sorry but this is a limitation of FlexSheet as Border’s Color is not supported during Export
Gopala.Chintakindi
Posted 25 April 2018, 6:14 pm EST
Hi,
I am able to style my cells in FlexSheet but when I do export to excel those styles are not exported.
private dynamicFlexSheetInitialize(flexSheet: wjcGridSheet.FlexSheet, e: wjcCore.EventArgs) {
const grid = new wjcGrid.FlexGrid(document.createElement(‘div’), {
itemsSource: this.dynamicCountryFlexSheetData,
columns:[
{binding: ‘id’, header: ‘ID #’, width: 40},
{binding: ‘country’, header: ‘Country’},
{binding: ‘name’, header: ‘Security Name’, width: ‘*’},
{binding: ‘active’, header: ‘Active’, width: 60},
{binding: ‘amount’, header: ‘Amount ($)’, width: 80},
{binding: ‘date’, header: ‘Date’, width: 90},
],
});
const countrySheet = new wjcGridSheet.Sheet(flexSheet, grid, ‘Country’);
//fix for by default first cell is selected
countrySheet.grid.select(new wjcGrid.CellRange());
flexSheet.sheets.push(countrySheet);
flexSheet.beginUpdate(); const gridPanel = countrySheet.grid.cells; //console.log(gridPanel.rows.length); for(let r = 0 ; r < gridPanel.rows.length; r++) { const row: wjcGrid.Row = gridPanel.rows[r]; const dataItem = row.dataItem; let columnIndex = 0; for(columnIndex = 0 ; columnIndex < gridPanel.columns.length; columnIndex++ ) { if(columnIndex === 1) { //country column if(dataItem.country === 'US') { flexSheet.applyCellsStyle( { backgroundColor: 'orange' }, [ new wjcGrid.CellRange(row.index + 1, 1, row.index + 1, 1 ) ] ); } } } } flexSheet.endUpdate(); flexSheet.itemFormatter = (panel: any, row: number, column: number, cell) => { //get underline bind object const dataItem = flexSheet.rows[row]._data; cell.addEventListener('contextmenu', (e: MouseEvent) => { if(row === 0) { e.preventDefault(); e.stopImmediatePropagation(); } else if(row > 0) { const wjColumn = this.wjFlexSheetColumns[column]; if(dataItem !== null && dataItem !== undefined && dataItem.contextmenu !== undefined && dataItem.contextmenu !== null) { if(dataItem.contextmenu === false) { e.preventDefault(); e.stopImmediatePropagation(); } else { this.dynamicContextMenuItems = []; this.dynamicContextMenuItems = wjColumn.contextMenuItems; } } else { e.preventDefault(); e.stopImmediatePropagation(); } } }, true); if(row === 0) { const columnSort = panel.columns[column].currentSort; const header = wjcCore.toHeaderCase(panel.columns[column].binding); switch (columnSort) { case '+': cell.innerHTML = header + '<span class="wj-glyph-up" style="float:right;margin:5px;"></span>'; break; case '-': cell.innerHTML = header + '<span class="wj-glyph-down" style="float:right;margin:5px;"></span>'; break; default: cell.innerHTML = header; } //flexSheet.columns[column].header = 'xxxx'; if(column !== 0 && column !== 5) { cell.innerHTML = '<div>' + flexSheet.columns[column].header + '<div style="width:auto;float:right;"><span class="wj-glyph-filter"></span></div></div>'; cell.firstElementChild.onclick = function () { flexSheet.showColumnFilter(); } } } }; }
abhishek.dutta
Posted 26 April 2018, 12:46 am EST
This is limitation of FlexSheet. FlexSheet only exports the cell style set by ‘applyCellsStyle’ method of FlexSheet or loaded from excel file except border styles.
