Events - RealGrid

Applying Grid Events

You can apply grid events through RealGridVue component props.

Below is an example of applying the onCellClicked event.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false"
            :on-cell-clicked="(grid: RealGrid.GridView, clickData: RealGrid.ClickData)=>{
                console.log(clickData)
            }">
            <RGDataField
                field-name="KorName"
                :data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataField
                field-name="Age"
                :data-type="RealGrid.ValueType.NUMBER"></RGDataField>
            <RGDataField
                field-name="OrderDate"
                :data-type="RealGrid.ValueType.DATETIME"></RGDataField>
            <RGDataField
                field-name="Monetary"
                :data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn field-name="KorName" :width="100"></RGDataColumn>
            <RGDataColumn field-name="Age" :width="100"></RGDataColumn>
            <RGDataColumn field-name="OrderDate" :width="100"></RGDataColumn>
            <RGDataColumn field-name="Monetary" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>

You can check the grid event occurrence order and click event in the link below.

Event occurrence order (opens in a new tab)

Click event (opens in a new tab)

Configure grid in the traditional JS way Apply styles