SMART datagrid v1.4 > Concepts
SMART datagrid는 기본적으로 html5 canvas를 기반으로 실행된다. 최신 브라우저에서 canvas는 상당한 수준의 rendering 성능을 제공하고 있다. 하지만, 데이터 그리드의 기본 요구 사항이 업무 데이터를 다양한 방식으로 표현하고 다루는 것이므로, rendering을 위한 많은 준비가 필요하게 된다. 따라서, 사용자에게 최대한 자연스러운 인터페이스를 제공하기 위해서는 불필요한 그리기를 최소화해야 한다.
SMART datagrid는 다양한 요구 사항을 구현할 수 있도록, 여러 가지 수준과 방식으로 데이터를 표현할 수 있는 기능들을 제공하는데, 아래에서 제시하는 설명에 따라 요구 사항에 맞는 가장 적합한 기능을 선택해서 사용해야 한다.
그리드 body 영역에서 데이터셀이 표시되기 전에 먼저 하위 영역들이 바탕이나 경계선이 그려지게 된다. 우선 그리드 본체의 바탕이 그려지고, body에 background 스타일이 설정된 경우 body 영역에 바탕이 그려진다. 또, rowStyles나 rowRangeStyles에 background나 borderBottom 등이 설정된 경우, 데이터셀이 포함된 행의 바탕이나 경계선들이 그려질 수 있다. 그리고 마지막으로 컬럼 스타일이나 다른 동적 스타일에 background가 설정된 경우 데이터셀의 바탕을 그린다.
즉, 바탕 그리기가 중첩될 수 있고, 불필요한 중첩이라면 성능을 떨어뜨게 된다. 따라서 위에서 언급한 모든 영역의 background 값은 기본적으로 null로 초기화 되어 있는데, 바탕색 표시가 업무적으로 의미가 있는 경우에만 적당한 영역에서 설정해야 한다.
또, 반투명 색상이나 선형 gradient 채우기는 반드시 필요한 경우에만 사용해야 한다. 업무 화면의 경우 대부분의 경우 불투명 단일 색상으로도 표현 가능할 수 있다.
데이터셀이 그려지기 전에 셀들을 포함한 데이터행이 먼저 그려지는 데, GridBody.rowStyles나 GridBody.fixedRowStyles에 지정한 스타일들이 기본으로 적용된다. 또, 행이나 행 범위 별로 다른 배경색이나 경계선을 그려야 한다면 GridBody.rowRangeStyles를 설정할 수 있다. 위에서 설명한대로 스타일 값들은 기본적으로 null로 설정되어 있으므로 행 그리기가 실행되지 않는다. 불필요한 행 그리기는 당연히 피해야 하지만, 행에 포함된 모든 셀들의 바탕색을 동일한 색으로 그릴 필요가 있을 때는 반드시 셀 그리기 대신 행 그리기를 해야 한다.
데이터셀 하나를 그리기 전에 몇 단계의 스타일셋 설정을 거치게 된다. 우선 GridBody.cellStyles에 지정한 스타일들이 데이터셀들의 기본 스타일이 된다. 즉, cellStyles에 지정한 것들로 만족할 수 있는 상황이라면 컬럼 스타일이나 동적 스타일들을 지정하지 않아도 된다. 고정 영역의 셀들은 GridBody.fixedCellStyles에 설정된 것들이 적용된다.
그 다음 각 컬럼에 지정된 GridColumn.styles이 적용되고, GridBody.rowDynamicStyles, GridBody.cellDynamicStyles 및 컬럼의 동적 스타일 순서대로 적용된다. 그리고 마지막으로 CellStyle로 지정된 스타일 값들이 적용된다. 이 때, 마지막으로 적용된 스타일 값들이 데이터셀에 설정되고, 그 값들이 데이터셀 그리기에 사용된다. 즉, 스타일 속성 값이 undefined가 아닌 명시적인 값으로 설정되면, 이전 단계에서 설정된 값은 무시된다. 위에서 언급한 단계 모두에서 명시적 설정이 없었다면 그리드 내부에서 지정된 기본 스타일시트에서 값을 가져오게 된다.
실제로 스타일 값을 찾아가는 경로는 위에서 설명한 적용 단계와는 반대다. 따라서, 늦은 단계에서 명시적으로 스타일 값을 지정하는 것이 성능에 도움을 줄 수 있다.
현재, Chrome 브라우저에서 가장 원할하게 실행되고 있으며, IE나 FireFox의 경우 브라우저 크기 변경에 따라 그리드 크기가 변경되도록 설정된 경우, 반응 속도가 느릴 수 있다.
현재 IE 브라우저에서 페이지의 다른 element들 보다 그리드가 한박자 느리게 표시되는 경우가 있다(그리드 script 파일 로드가 오래걸리는 문제가 아님). 그런 경우 그리드 초기화(컬럼, 옵션, 스타일 등 설정) 직후 grid.updateNow()를 호출한다. 다음 rendering 시점을 기다리지 않고 현재 상태의 그리드를 바로 그리게 된다.
grid.setColumns(...);
grid.setOptions(...);
grid.loadStyles(...);
grid.setDataSource(ds);
loadData(ds);
checkIE() && grid.updateNow();