Set Styles - RealGrid

스타일

컬럼 동적 스타일

컬럼 동적 스타일은 styleCallback이 지정된 컬럼에만 값에 따라 스타일이 적용됩니다.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                :data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn
                field-name="field1"
                name="column1"
                :width="100"
                :style-callback="
                    (grid, cell) => {
                        const index = cell.index?.itemIndex as number
                        if ( index % 2 === 0) {
                            return {styleName: 'red-color'}
                        }
                    }
                "></RGDataColumn>
        </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>();
.. 생략
</script>
<style>
.red-color {
    background-color: red;
}
</style>

js방식으로 컬럼 동적 스타일 적용하기

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            style="width: 1000px; height: 400px"
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </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.GridView) => {
  //컬럼 동적 스타일
  grid.columnByName("column1").styleCallback = function(grid, cell){
    const index = cell.index?.itemIndex as number
    if ( index % 2 === 0) {
        return {styleName: 'red-color'}
    }
  }
}
 
</script>
<style>
.red-color {
    background-color: red;
}
</style>

행 동적 스타일

행 동적 스타일은 특정 값에 따라 행 전체에 스타일을 적용하고 싶을때 사용합니다.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false"
            :row-style-callback="
                (grid: RealGrid.GridBase, item:RealGrid.GridItem, fixed: boolean) => {
                    return {styleName: 'red-color'};
                }
            ">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn field-name="field1" name="column1" :width="100"></RGDataColumn>
        </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>();
 
</script>
<style>
.red-color {
    background-color: red;
}
</style>

js방식으로 행 동적 스타일 적용하기

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>
 
<script setup lang="ts">
.. 생략
 
const onInitialized = (grid: RealGrid.GridView) => {
  //행 동적 스타일
   grid.setRowStyleCallback(function(grid, item, fixed) {
    return { styleName: 'red-color' };
  })
}
 
</script>
<style>
.red-color {
    background-color: red;
}
</style>

셀 동적 스타일

셀 동적 스타일은 개별 셀들에게 스타일 적용하고 싶을때 사용합니다.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false"
            :cell-style-callback="
                (grid: GridBase, model: GridCell) => {
                    return {styleName: 'red-color'};
                }
            ">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn field-name="field1" name="column1" :width="100"></RGDataColumn>
        </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>();
 
</script>
<style>
.red-color {
    background-color: red;
}
</style>

js방식으로 셀 동적 스타일 적용하기

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </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.GridView) => {
  //행 동적 스타일
   grid.setCellStyleCallback(function(grid, model) {
    return { styleName: 'red-color' };
  })
}
 
</script>
<style>
.red-color {
    background-color: red;
}
</style>

그리드 이벤트 적용 컬럼 레이아웃