Hello world: create a grid component

Here’s an example of the code and configuration required to set up a grid and display it in your application.

Example

First, give your grid a unique ID, and define the columns you want to include. Then, add in any decorators that you have called, into the grid itself, and specify the location of your data provider. See here for more information on the XML representation for grid elements.

<grid id="FX.Grid" displayName="FX Grid"
        displayedColumns="description, bestbid, bestask">

  <columnDefinitions>
     <column id="description"
        fields="InstrumentDescription"
        displayName="Description"
        width="80"
        mandatory="true" />
     <column id="bestbid"
        fields="BestBid"
        displayName="Best Bid"
        width="65"/>
     <column id="bestask"
        fields="BestAsk"
        displayName="Best Ask"
        width="65"/>
  </columnDefinitions>

  <decorators>
     <caplin.column-sort-decorator/>
  </decorators>

  <gridRowModel>
    <caplin.web-service-grid-data-provider
      url="source/services/static-data/FxInstrumentsGrid.jsp"
      format="json"/>
  </gridRowModel>
</grid>

Having defined your grid, you then use the GridComponentFactory to create the grid component for it.

var componentFactory = require('caplin/component/ComponentFactory');
var grid = componentFactory.createComponent('<caplin.grid-component baseGrid="FX.Grid"/>');

document.getElementById(targetDomElementID).appendChild(grid.getElement());
var width = 500;
var height = 500;
grid.onOpen(width, height)

Finally, display the grid on your page.

document.getElementById(targetDomElementID).appendChild(oGrid.getElement());
var width = 500;
var height = 500;
oGrid.onOpen(width, height);

Depending on your CSS and styling, the resultant grid will look something like this:

grid component basic

For information on inserting a grid into a layout, see Adding a grid to a Webcentric layout.

Expandable Grids

Grids can have a feature which allows them to expand and contract rows allowing them to show and hide child data. For more details please vist JSDocs for more details.

Expandable Grid