A31 DynamicStyle 개요

들어가며

업무 화면 개발시 특정한 조건에 의해 그리드의 셀 스타일(폰트색, 배경색, 폰트등)이 변경되거나 editable을 변경해야하는 경우가 발생할 것입니다. 이런 경우 리얼그리드에서는 DynamicStyle을 사용하여 요구 사항을 적용할 수 있습니다.

이번 강좌에서는 DynamicStyle을 적용할 수 있는 몇가지 방법에 대해 알아보기로 하겠습니다.

해당 강좌는 RealGridJS 1.1.31 버전을 기준으로 설명합니다. 그 이하버전에서는 안되는 기능(editable, function())이 있을 수 있습니다.

이론

이 강좌에서는 대략적인 다이나믹 스타일 개념만 설명합니다.
다음 강좌에서 각각의 다이나믹 스타일에 대해 자세히 배워보도록 하겠습니다.

그리드에서 적용할 수 있는 다이나믹 스타일 종류는 세가지가 있습니다.

column.dynamicStyles
body.dynamicStyles
body.cellDynamicStyles

이 세가지 다이나믹 스타일은 서로간에 약간에 차이가 있습니다.

column.dynamicStyles : 다이나믹 스타일이 적용된 컬럼에만 조건에 맞는 스타일이 적용된다.(컬럼 데이터들중에 조건에 맞는 셀에 스타일이 적용된다.)
body.dynamicStyles : 하나의 행(Item)에 조건에 맞는 스타일이 적용된다.(조건에 맞는 행의 모든 셀들에게 스타일이 적용된다.)
body.cellDynamicStyles : 하나의 셀(Cell)에 조건에 맞는 스타일이 적용된다.(조건에 맞는 모든 셀들에게 스타일이 적용된다.)

그리고 이런 다이나믹 스타일의 종류에 스타일을 적용하는 방식은 아래와 같이 두가지가 있습니다.

criteria
function()

우선 이해를 위해 간단한 예를 보도록 하겠습니다.
아래 예제는 column.dynamicStyles, criteria 방식 을 사용하여 구분컬럼의 값이 개인일 경우 배경색을 빨강색, 사업일 경우 파랑색으로 표시하도록한 예제 입니다.
다른 조건이 더 필요하다면 criteria와 styles의 속성을 가진 객체를 dynamicStyles에 계속 추가하여 사용하면 됩니다.

    var columns = [{
        name: "col0",
        fieldName: "field0",
        header : {
            text: "구분"
        },
        width : 60,
        dynamicStyles: [{
            criteria: "value = '개인'",
            styles: {
                background: "#ffff0000"
            }
        }, {
            criteria: "value = '사업'",
            styles: {
                background: "#ff0000ff"
            }
        }]
    }, {   
    ..생략.. 
    }];

criteria에서 사용할 수 있는 수식(expression)은 사전에 정의되어 있으며 자세한 내용은 아래 링크에서 확인하세요.

http://help.realgrid.com/api/features/Expression/

이번에는 같은 내용을 column.dynamicStyles, function() 방식을 사용하여 작성해보도록 하겠습니다.

    var columns = [{
        name: "col0",
        fieldName: "field0",
        header : {
            text: "구분"
        },
        width : 60,
        dynamicStyles: function(grid, index, value) { 
            if (value == "개인") {
                return {
                    background:"#ffff0000"
                };
            } else if (value == "사업") {
                return {
                    background:"#ff0000ff"
                };
            }
        }   
    }, {   
    ..생략.. 
    }];

function()을 사용하는 경우에는 적용하고 싶은 스타일을 return 하시면 됩니다.

유의사항

function() 사용시에는 주의할 점이 있습니다.

function() 내부에 처리시간이 오래 걸리는 스크립트가 존재해서는 안됩니다. 그리드 성능에 치명적인 결과를 가져올 수 있습니다.
function() 내부에 다른 셀의 값을 변경하는 스크립트가 존재해서는 안됩니다. getValue등의 값을 가져오는 API와 조건문 정도만 사용해야 합니다.

참조