FlexGrid Server-Side Data Binding

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.

import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/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 sample.

For more complete examples, with full support for CRUD operations, see the RestCollectionView, Breeze and OData samples.