Setting data type and editor
Setting data type
The DataField of RealGrid DataProvider can be one of four data types. They are Text, Number, Boolean, and Datetime, and they are declared as RealGrids.DataType constants.
To apply the data type, you must import the RealGrid class of the realgrid component. When creating a field, specify the dataType as in the example below and use it by specifying the ValueType of the desired RealGrid class.
import {RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
import { useRef} from "react";
import * as RealGrid from 'realgrid';
const App = () => {
const gridRef = useRef<RealGridReact>(null);
return (
<div style={{width:"100%", height: "550px"}}>
<RealGridReact
ref={gridRef}
rows={[
{field1:"text1", field2:10000, field3:"2023-01-01", field4:false},
{field1:"text2", field2:20000, field3:"2023-01-02", field4:true}
]}
>
<RGDataField fieldName={"field1"} dataType={RealGrid.ValueType.TEXT}/>
<RGDataField fieldName={"field2"} dataType={RealGrid.ValueType.NUMBER}/>
<RGDataField fieldName={"field3"} dataType={RealGrid.ValueType.DATETIME}/>
<RGDataField fieldName={"field4"} dataType={RealGrid.ValueType.BOOLEAN}/>
<RGDataColumn fieldName={"field1"} header={{text:"TEXT"}} width={200}/>
<RGDataColumn fieldName={"field2"} header={{text:"NUMBER"}} width={200}/>
<RGDataColumn fieldName={"field3"} header={{text:"DATETIME"}} width={200}/>
<RGDataColumn fieldName={"field4"} header={{text:"BOOLEAN"}} width={200}/>
</RealGridReact>
</div>
)
}
export default AppFor detailed descriptions of each type, see [Data Please refer to the demo of Type.
Editor Settings
When setting the RGDataColumn class, you can use the editor of the desired type when editing by specifying the editor property as follows.
<RGDataColumn
name={"col2"}
fieldName={"field2"}
header={{text:"NUMBER"}}
editor={{type:"number"}}
width={200}
/>
<RGDataColumn
name={"col3"}
fieldName={"field3"}
header={{text:"DATETIME"}}
editor={{type:"date"}}
width={200}
/>You can check the settings and types of editors in demo.