Spreadsheet

Spreadsheets are sophisticated components for entering tabular data. Input values can be obtained in object form in actions.

Note

• Spreadsheet is a component available only in desktop applications.
• It is recommended that spreadsheet values be managed in batches by converting the entire object to a JSON string with JSON.stringify().
• Spreadsheet values do not save data up to the information of the currently selected sheet.
  Therefore, even if the obtained values are set in the spreadsheet, the first sheet is always selected.
• When inputting Japanese into a cell, please enter the cell edit mode before inputting.
  Pressing Enter, typing text, or double-clicking will enter the edit mode.
  If try to type Japanese before cell edit mode, the first character will be a letter of the alphabet.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by actions.
2	Width	Number	850	width	number	850	Component width
3	Height	Number	350	height	number	350	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Value			value	object		Spreadsheet value
7	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide

Note

• The maximum number of rows and columns that can be supported is 1000 and 25, respectively. Also, the maximum data size is 6 MB.

[Details 1] Example of value

{
    "sheets": [
        {
            "name": "sheet1",
            "data": [
                {
                    "cell": "A1",
                    "css": "dhx_generated_class_u1684485452487"
                },
                {
                    "cell": "B1",
                    "css": "dhx_generated_class_u1684485452487",
                    "format": "common",
                    "value": "A Course"
                },
                {
                    "cell": "C1",
                    "css": "dhx_generated_class_u1684485452487",
                    "format": "common",
                    "value": "B Course "
                },
                {
                    "cell": "D1",
                    "css": "dhx_generated_class_u1684485452487",
                    "format": "common",
                    "value": "C Course "
                },
                {
                    "cell": "A2",
                    "format": "common",
                    "value": "Monthly amount"
                },
                {
                    "cell": "B2",
                    "format": "common",
                    "value": 1000
                },
                {
                    "cell": "C2",
                    "format": "common",
                    "value": 1200
                },
                {
                    "cell": "D2",
                    "format": "common",
                    "value": 1500
                },
                {
                    "cell": "A3",
                    "format": "common",
                    "value": "Yearly amount"
                },
                {
                    "cell": "B3",
                    "format": "common",
                    "value": 10000
                },
                {
                    "cell": "C3",
                    "format": "common",
                    "value": 120000
                },
                {
                    "cell": "D3",
                    "format": "common",
                    "value": 15000
                }
            ],
            "cols": [
                {
                    "width": 120
                },
                {
                    "width": 120
                },
                {
                    "width": 120
                },
                {
                    "width": 120
                }
            ],
            "rows": [
                {
                    "height": 32
                },
                {
                    "height": 32
                },
                {
                    "height": 32
                }
            ]
        }
    ],
    "styles": {
        "dhx_generated_class_u1684485452487": {
            "background": "#D4DAE4"
        }
    },
    "formats": [
        {
            "name": "Common",
            "id": "common",
            "mask": "",
            "example": "1500.31"
        },
        {
            "name": "Number",
            "id": "number",
            "mask": "#,##0.00",
            "example": "1500.31"
        },
        {
            "name": "Percent",
            "id": "percent",
            "mask": "#,##0.00%",
            "example": "15.0031"
        },
        {
            "name": "Currency",
            "id": "currency",
            "mask": "$#,##0.00",
            "example": "1500.31"
        },
        {
            "name": "Date",
            "id": "date",
            "mask": "mm-dd-yy",
            "example": "44490",
            "dateFormat": "%d/%m/%Y"
        },
        {
            "name": "Time",
            "id": "time",
            "mask": "h:mm:ss am/pm",
            "example": "0.5625",
            "timeFormat": 12
        },
        {
            "name": "Text",
            "id": "text",
            "mask": "@",
            "example": "some text"
        }
    ]
}

Event

None