On Initialized - RealGrid

How to configure grid using existing JS method

You can create fields and columns through the grid object passed as an argument in onInitialized, an event that occurs after the grid is created. When creating fields, you need to access dataProvider, so you can access the dataProvider object using grid.getDataSource() and create fields using the setFields() method.

In addition, you can apply grid options and events through the onInitialized event.

You can check the basic guide on how to create fields and columns here.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :auto-generate-field="false"
            :on-initialized="onInitialized">
        </RealGridVue>
    </div>
</template>
 
<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";
 
const gridRef = ref<RealGridVue>();
 
const onInitialized = (grid: RealGrid.GridBase) => {
    const dp = grid.getDataSource() as RealGrid.LocalDataProvider;
 
    const fields = [
        {
            fieldName: "Name",
            dataType: RealGrid.ValueType.TEXT,
        },
        {
            fieldName: "FullName",
            dataType: RealGrid.ValueType.TEXT,
        },
        {
            fieldName: "Email",
            dataType: RealGrid.ValueType.TEXT,
        },
    ];
 
    const columns = [
        {
            name: "Name",
            fieldName: "Name",
        },
        {
            name: "FullName",
            fieldName: "FullName",
        },
        {
            name: "Email",
            fieldName: "Email",
        },
    ];
    dp.setFields(fields);
    grid.setColumns(columns);
 
    grid.displayOptions.emptyMessage = "표시할 데이타가 없습니다.";
    grid.header.height = 40;
    grid.displayOptions.rowHeight = 36;
    grid.footer.height = 40;
    grid.stateBar.width = 16;
    grid.editOptions.insertable = true;
    grid.editOptions.appendable = true;
 
    // 그리드 이벤트 적용
    grid.onCellClicked = (grid: RealGrid.GridBase,clickData: RealGrid.ClickData) => {
        alert(clickData.column);
    };
 
    dp.setRows(rows);
};
</script>

Apply grid renderer Apply grid events