On Initialized - RealGrid

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

필드 및 컬럼 생성

그리드가 생성되고 나서 발생하는 이벤트인 onInitialized에서 인자로 넘어오는 grid 객체를 통해 필드 생성 및 컬럼 생성을 하실 수 있습니다.

필드 생성 시, dataProvider에 접근해야하기 때문에 grid.getDataSource()를 사용하여 dataProvider 객체에 접근하여 setFields() 메서드를 사용해서 필드를 생성할 수 있습니다.

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

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

import { RealGridReact, RGDataColumn } from "realgrid-react";
import * as RealGrid from "realgrid";
import { useRef } from "react";
import "realgrid/dist/realgrid-style.css";
import data from "./realgrid-data.ts";
import "./App.css";
 
function App() {
    const gridRef = useRef<RealGridReact>(null);
 
    const onInitialized = (grid: RealGrid.GridView) => {
        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",
            },
        ];
        grid.getDataSource().setFields(fields);
        grid.setColumns(columns);
    };
 
    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}></RealGridReact>
            </div>
        </>
    );
}
 
export default App;

그리드 옵션 적용 및 이벤트 적용

RealGridReact 컴포넌트 props를 통해 그리드 옵션과 이벤트를 적용 할수 있으며, onInitialized 이벤트내에서도 동일하게 적용 하실 수 있습니다.

import { RealGridReact, RGDataColumn } from "realgrid-react";
import * as RealGrid from "realgrid";
import { useRef } from "react";
import "realgrid/dist/realgrid-style.css";
import data from "./realgrid-data.ts";
import "./App.css";
 
function App() {
    const gridRef = useRef <RealGridReact>(null);
 
    const onInitialized = (grid: RealGrid.GridView) => {
        ...생략
 
        // 그리드 옵션 적용
         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.GridView, clickData: RealGrid.ClickData) => {
            alert(clickData.column)
        }
    };
 
    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}>
                </RealGridReact>
            </div>
        </>
    );
}
 
export default App;

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