• 검색

이 포스팅에서는 formatItem을 사용하여 사용자 정의 셀 생성하는 방법에 관해 설명합니다.

FlexGrid는 셀에 데이터에 셀을 바인딩하고 CSS를 사용하여 셀을 포맷팅하는 강력한 인프라를 제공합니다.

하지만 경우에 따라 CSS로 셀을 스타일링하는 것이 충분하지 않을 수 있습니다. 이러한 경우, 셀을 나타내는 요소가 생성될 때 발생하는 formatItem 이벤트를 사용하여 각 셀에 표시되는 스타일 또는 내용을 사용자 정의할 수 있습니다. formatItem은 데이터 셀 뿐만 아니라 헤더를 포함한 모든 셀에서 발생하며 전체 그리드의 셀을 포맷팅하는데 매우 유용한 기능입니다. formatItem 이벤트는 FormatItemEventArgs 클래스를 인수로 제공하며 이 클래스에는 렌더링 중인 셀을 사용자 정의하는 데 필요한 모든 항목이 포함됩니다.

아래 그리드 샘플은 formatItem을 사용하여 현재 항목과 이전 항목의 값 차이를 나타내는 셀을 계산하고 형식을 지정합니다.

실제로 구현된 화면은 아래와 같으며, 탭을 통해 소스코드를 확인하고 바로 수정해볼 수 있습니다. - 샘플 링크 : https://codepen.io/GrapeCity-Korea/pen/KKmQOvN

기본 데모 튜토리얼 시작하기

1. 먼저 Wijmo 컨트롤을 사용하기 위해 HTML 파일에 레퍼런스를 추가합니다.

   <link href="https://cdn.grapecity.com/wijmo/5.20211.781/styles/wijmo.min.css" rel="stylesheet"/>
   <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
   <script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.min.js"/>
   <script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.grid.min.js"/>

2. Wijmo 컨트롤을 생성할 'theGrid'라는 id를 가진 div 요소를 HTML 파일에 생성합니다.

   <div id="theGrid"></div>

3. 데이터를 그리드의 itemsSource에 할당하여 바인딩 해줍니다.

   var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    (...)
    columns: [
      { binding: 'id', header: 'ID', width: 50 },
      { binding: 'country', header: 'Country' },
      { binding: 'sales', header: 'Sales', width: 80, format: 'n0' },
      { binding: 'salesDiff', header: 'Diff', dataType: 'Number', width: 80, format: 'p0' },
      { binding: 'expenses', header: 'Expenses', width: 80, format: 'n0' },
      { binding: 'expensesDiff', header: 'Diff', dataType: 'Number', width: 80, format: 'p0' }
    ],
    itemsSource: getData(),
    });
   (...)

    

4. 샘플과 같이 열 머리 부분의 병합을 위해 여분의 행 삽입 후 allowMerging을 True로 설정하여 병합을 허용 해줍니다.(그리드의 allowMerging 속성 또한 설정해주셔야 합니다.)

   // 추가 열 헤더 행 삽입
    var ch = theGrid.columnHeaders, hr = new wijmo.grid.Row();
    ch.rows.insert(0, hr);
    // 추가 머리글 행에 머리글 작성
    for (var i = 0; i < theGrid.columns.length; i++) {
    var hdr = ch.getCellData(1, i, false);
    if (hdr == 'Diff')
      hdr = ch.getCellData(1, i - 1, false);
    ch.setCellData(0, i, hdr);
    }
    // 추가 헤더 행에 병합 허용
    theGrid.allowMerging = wijmo.grid.AllowMerging.ColumnHeaders;
    hr.allowMerging = true;
    theGrid.columns[0].allowMerging = true;
    theGrid.columns[1].allowMerging = true;

    

5. 그 다음, 이벤트에 핸들러를 추가해주는 addHandler 메서드를 통해 Wijmo 그리드 formatItem 이벤트 핸들러를 추가합니다.

   // 헤더와 "Diff" 열에 대한 커스텀 렌더링
    theGrid.formatItem.addHandler(function (s, e) {
   (...)
    });

   
   

5-1. formatItem 이벤트 내에서 렌더링하는 영역이 열 머리글이면 v-center 클래스를 추가하여 중앙 정렬로 설정하게 해줍니다.

theGrid.formatItem.addHandler(function (s, e) {    
    // 열 헤더에 대한 중앙 정렬 
    if (e.panel == s.columnHeaders) {
      e.cell.innerHTML = '<div class="v-center">' +
       e.cell.innerHTML + '</div>';
    }
});

5-2. 렌더링하는 영역이 셀이고 커스터마이징하고 싶은 열의 바인딩을 확인합니다. 바인딩 값을 확인 후, 현재 항목과 이전 항목에 대한 값을 getCellData 메서드로 가져옵니다.

theGrid.formatItem.addHandler(function (s, e) {    
	(...)
    //  "Diff" 열에 대한 커스텀 렌더링
    if (e.panel == s.cells) {
      var col = s.columns[e.col]; // 열
      if (e.row > 0 && (col.binding == 'salesDiff' || col.binding == 'expensesDiff')) {
        var vnow = s.getCellData(e.row, e.col - 1), vprev = s.getCellData(e.row - 1, e.col - 1), diff = (vnow / vprev) - 1;

    }
  });

5-3. 마지막으로 가져온 값을 계산한 뒤, 값에 따라 클래스를 변경하여 사용자 정의를 해줍니다.

theGrid.formatItem.addHandler(function (s, e) {    
	(...)
        var html = '<div class="diff-{cls}">' +
            '<span style="font-size:75%">{val}</span> ' +
            '<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
        html = html.replace('{val}', wijmo.Globalize.format(diff, col.format));
        if (diff < 0.01) {
          html = html.replace('{cls}', 'down').replace('{glyph}', 'down');
        }
        else if (diff > 0.01) {
          html = html.replace('{cls}', 'up').replace('{glyph}', 'up');
        }
        else {
          html = html.replace('{cls}', 'none').replace('{glyph}', 'circle');
        }
        e.cell.innerHTML = html;
      }
    }
  });

6. 추가적으로 CSS 을 사용하여 각각의 설정된 클래스에 대해서 스타일을 지정해줄 수 있습니다.

   .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-none {
       color: #d8b400;
   }
   .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-up {
       color: #4c8f00;
   }
   .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-down {
       color: #9f0000;
   }

    
   

이로써 FlexGrid의 FormatItem을 통해 커스터마이징한 셀 컨텐츠 생성 및 스타일링 튜토리얼을 끝마쳤습니다.

Wijmo FlexGrid가 제공하는 무궁무진한 formatItem 기능을 통해 데이터 셀 뿐만 아니라 데이터, 헤더, 편집기 등 원하는 항목을 추가할 수 있는 완벽한 유연성을 가진 그리드를 만들어 보시길 바랍니다.