On Initialized - RealGrid

기존 JS 방식으로 그리드 구성 하는 방법

그리드가 생성되고 나서 발생하는 이벤트인 onInitialized에서 인자로 넘어오는 grid 객체를 통해 필드 생성 및 컬럼 생성을 하실 수 있습니다.
필드 생성 시, dataProvider에 접근해야하기 때문에 grid.getDataSource()를 사용하여 dataProvider 객체에 접근하여 setFields() 메서드를 사용해서 필드를 생성할 수 있습니다.

추가로 onInitialized 이벤트를 통해 그리드 옵션 및 이벤트 등 적용 하실 수도 있습니다.

필드와 컬럼 생성 방법에 대한 기초 가이드는 여기에서 확인 하실 수 있습니다.

<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>

그리드 렌더러 적용 그리드 이벤트 적용