SMART datagrid v1.4 > Concepts

Concepts.Grid Style Sheet

그리드 스타일시트는 독립적으로 스타일셋을 적용할 수 있는 모든 영역에 대한 스타일 설정이 포함된 객체이다. 

그리드 초기화 시 내장된 기본 스타일시트가 적용되며, 아래 예제 코드에 예시한 두 가지 방식으로 GridBase.loadStyles 메소드를 호출해서 언제든지 다른 스타일셋을 그리드에 적용할 수 있다. 

하나 이상의 스타일시트를 외부 파일이나 서버 데이터로 관리하면, 상황에 맞는 어플리케에션 UI 테마의 일부로서 사용될 수 있다. 

"default"는 GridBase.defaultStyles에 적용되는 스타일로 대부분 모든 영역 스타일의 부모 스타일이 된다. 

계층 구조는 아래표의 parent열을 참고한다. 

또, 아래 코드에서 "loadStyles only"로 주석된 항목은 스타일시트에는 포함되지 않지만, loadStyles로 설정할 수 있는 스타일들이다. 

    var sheet = {
        "default": {},
        grid: {},           
        panel: {},
        groupPanel: {
            item: {},
            itemInner: {},
            head: {},
            headInner: {}
        },
        body: {
            empty: {},
            row: {},
            fixedRow: {},
            cell: {},
            fixedCell: {},
            fixedMerged: {},
            
            created: {},
            updated: {},
            deleted: {},
            checked: {},

            fixedColumnBar: {},
            fixedRowBar: {},
            selection: {},
            mobileSelection: {},
            merged: {},
            rowRange: {},       // loadStyles only
            rowDynamic: [],     // loadStyles only
            cellDynamic: []     // loadStyles only
        },
        header: {
            group: {},
            head: {},
            sub: {},
            menuHandle: {},
            filterHandle: {},
            sortHandle: {},
            sortOrder: {},
            summary: {
                group: {},
                head: {}
            },
        },
        footer: {
            group: {},
            head: {}
        },
        rowGroup: {
            header: {},
            expander: {},
            footer: {},
            indent: {},
            head: {},
            bar: {},
            headerBar: {},
            footerBar: {}
        },
        rowIndicator: {
            state: {},
            created: {},
            updated: {},
            deleted: {}
        },
        checkBar: {
            head: {}
        },
        headerItem: {},
        footerItem: {},
        tooltip: {},
        tree: {
            footer: {},
            expander: {},
            indent: {}
        }
    };
    grid.loadStyles(sheet);

    var sheet = {
        "default": {},
        "grid": {},
        "panel": {},
        "groupPanel": {},
        "groupPanel.item": {},
        "groupPanel.itemInner": {},
        "groupPanel.head": {},
        "groupPanel.headInner": {},
        "body": {},
        "body.empty": {},
        "body.row": {},
        "body.fixedRow": {},
        "body.cell": {},
        "body.fixedCell": {},
        "body.fixedMerged": {},
        "body.rowRange": {},
        "body.created": {},
        "body.updated": {},
        "body.deleted": {},
        "body.checked": {},
        "body.fixedColumnBar": {},
        "body.fixedRowBar": {},
        "body.selection": {},
        "body.merged": {},
        "body.mobileSelection": {},
        "body.rowDynamic": {},
        "body.cellDynamic": {},
        "header": {},
        "header.group": {},
        "header.head": {},
        "header.sub": {},
        "header.menuHandle": {},
        "header.filterHandle": {},
        "header.sortHandle": {},
        "header.sortOrder": {},
        "header.summary": {},
        "header.summary.group": {},
        "header.summary.head": {},
        "footer": {},
        "footer.group": {},
        "footer.head": {},
        "rowGroup.header": {},
        "rowGroup.expander": {},
        "rowGroup.footer": {},
        "rowGroup.indent": {},
        "rowGroup.head": {},
        "rowGroup.bar": {},
        "rowGroup.headerBar": {},
        "rowGroup.footerBar": {},
        "rowIndicator": {},
        "rowIndicator.state": {},
        "rowIndicator.created": {},
        "rowIndicator.updated": {},
        "rowIndicator.deleted": {},
        "checkBar": {},
        "checkBar.head": {},
        "headerItem": {},
        "tooltip": {},
        "footerItem": {},
        "tree.footer": {},
        "tree.expander": {},
        "tree.indent": {}
    }
    grid.loadStyles(sheet);

아래의 표의 영역 링크들을 클릭하여 각각의 영역이 그리드의 어떤부분에 속하는지 이미지로 확인할수 있다. 

각각의 영역에 해당하는 개요 내용을 보고 스타일을 적용한다. 

See Also

GridStyles

GridView

GridBase.loadStyles

RenderingPerformance

Examples

Load Styles