# FlexGrid 서버 측 데이터 바인딩

## Content

데이터가 서버에 있는 경우, **httpRequest** 메서드를 사용하여 데이터를 검색할 수 있습니다. 서버에서 응답을 받으면, CollectionView의 **sourceCollection** 배열을 응답 값으로 설정하거나 새 데이터를 **sourceCollection** 배열에 추가합니다. 이 Collection View에 FlexGrid(또는 모든 컨트롤)를 바인딩하면 sourceCollection의 모든 데이터 또는 변경 사항을 표시할 수 있습니다.

```javascript
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

  // create an empty CollectionView and bind a new FlexGrid to it
  var serverView = new wjCore.CollectionView();
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
    allowSorting: false,
    showSort: false,
    isReadOnly: true,
    itemsSource: serverView
  });

  // populate it with data from a server
  var url = 'https://services.odata.org/Northwind/Northwind.svc/Categories';
  var params = {
    $format: 'json',
    $select: 'CategoryID,CategoryName,Description'
  };
  wjCore.httpRequest(url, {
    data: params,
    success: function(xhr) {

      // got the data, assign it to the CollectionView
      var response = JSON.parse(xhr.response);
      var data = response.d ? response.d.results : response.value;

      // use the result as the sourceCollection
      serverView.sourceCollection = data;

      // append results to the sourceCollection
      // in case you want to load data in parts
      //serverView.deferUpdate(function () {
      //  data.forEach(function(item) {
      //		serverView.sourceCollection.push(item);
      //  });
      //});
    }
  });
```

데이터 서비스 API가 필터링, 정렬 및 페이징과 같은 명령을 지원하는 경우, **httpRequest** 호출에 매개 변수를 추가하여 이러한 명령을 지원할 수 있습니다. **CollectionView**를 확장하는 사용자 지정 클래스에 서버 API를 캡슐화할 수도 있습니다.

CRUD 작업을 보다 완벽하게 지원하는 완전한 예는, [Breeze](https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/Breeze) 및 [OData](https://demo.mescius.co.kr/wijmo/learn-wijmo/Grid/Data-binding/ODataAPI/purejs) 샘플을 보거나 **[RestCollectionView](https://developer.mescius.com/wijmo/demos/Core/CollectionView/RestCollectionView/ReqRes/purejs)** 클래스의 소스 코드를 확인하시길 바랍니다.