Category / Section
How to display the custom date(MM-DD) formatted value in text format?
This article 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');
Refer to the working sample for additional details and implementation: Sample
Output:
Documentation:
