Data Type - RealGrid

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.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="[
                {field1:'text1', field2:10000, field3:'2023-01-01', field4:false},
                {field1:'text2', field2:20000, field3:'2023-01-02', field4:true}
            ]"
            :grid-props="{
                edit: { insertable: true, appendable: true },
                display: { rowHeight: 40 },
            }"
            :data-props="{ softDeleting: true }"
        >
            <RGDataField field-name="field1" :data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataField field-name="field2" :data-type="RealGrid.ValueType.NUMBER"></RGDataField>
            <RGDataField field-name="field3" :data-type="RealGrid.ValueType.DATETIME"></RGDataField>
            <RGDataField field-name="field4" :data-type="RealGrid.ValueType.BOOLEAN"></RGDataField>
            <RGDataColumn field-name="field1" :width="100" :header="{text: 'TEXT'}"></RGDataColumn>
            <RGDataColumn field-name="field2" :width="100" :header="{text: 'NUMBER'}"></RGDataColumn>
            <RGDataColumn field-name="field3" :width="100" :header="{text: 'DATETIME'}"></RGDataColumn>
            <RGDataColumn field-name="field4" :width="100" :header="{text: 'BOOLEAN'}"></RGDataColumn>
        </RealGridVue>
    </div>
</template>
 
<script setup lang="ts">
    import * as RealGrid from "realgrid";
    import { RealGridVue, RGDataColumn, RGDataField } from "realgrid-vue";
    import { ref } from "vue";
 
    const gridRef = ref<RealGridVue>();
</script>

For detailed explanations of each type, refer to the Data Type demo.

Data Type Output Screen

Editor Settings

You can use the editor of the desired type when editing by specifying the editor property as follows through RGDataColumn props.

<RGDataColumn field-name="field1" name="col1" :width="100" :header="{text: 'TEXT'}" :editor="{type:'text'}"></RGDataColumn>
<RGDataColumn field-name="field2" name="col2" :width="100" :header="{text: 'NUMBER'}" :editor="{type:'number'}"></RGDataColumn>

You can check the settings and types of editors in Demo.

Set options Apply grid renderer