Category / Section
How to display the custom date(MM-DD) formatted value in text format?
1 min read
This Knowledge Base explains how to display the custom date (MM-DD) formatted value in text format in a JavaScript spreadsheet. Use the beforeDataBound client-side event to achieve this requirement by applying the text format for the custom date (MM-DD) formatted value using the numberFormat client-side method.
[HTML]
<div id="spreadsheet"></div>
[TS]
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [
{
name: 'Car Sales Report',
ranges: [{ dataSource: (dataSource as any).defaultData }],
columns: [
{ width: 180 },
{ width: 130 },
{ width: 130 },
{ width: 180 },
{ width: 130 },
{ width: 120 },
{ width: 130 },
],
},
],
created: (): void => {
//Applies cell and number formatting to specified range of the active sheet
spreadsheet.cellFormat(
{ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
'A1:G1'
);
spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
},
beforeDataBound: (): void => {
spreadsheet.numberFormat('@', 'G2:G50'); // applied text format for custom formatted(1/2.. MM/DD) values
},
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
Sample Link: https://stackblitz.com/edit/rbvc5l-nywui1?file=index.html,default-data.json,index.ts
Output:
Documentation:
https://ej2.syncfusion.com/documentation/spreadsheet/formatting/#custom-number-formatting
