# FlexGrid Server-Side Data Binding

Learn how to use server-side data binding with Wijmo's JavaScript DataGrid in this  tutorial

## Content


If the data is on a server, you can retrieve it using the **httpRequest** method. When you get the response from the server, set the CollectionView's **sourceCollection** array to the response value or append the new data to the **sourceCollection** array. Binding FlexGrid (or any control) to this CollectionView will allow it to display any data or changes in the 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);
      //  });
      //});
    }
  });
```

If your data service API supports commands such as filtering, sorting, and paging, you can add parameters to your **httpRequest** calls to support those. You can even encapsulate the server API into a custom class that extends **CollectionView**.

For a simple example of a custom server-based **CollectionView** class, see our [ServerCollectionView](https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/ServerCollectionView) sample.

For more complete examples, with full support for CRUD operations, see the [RestCollectionView](https://developer.mescius.com/wijmo/demos/Core/CollectionView/RestCollectionView/ReqRes/purejs), [Breeze](https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/Breeze) and [OData](https://developer.mescius.com/wijmo/demos/Grid/Data-binding/ODataAPI/purejs) samples.