API Configuration

Parent Previous Next

In the previous topic, we saw the JSX method of configuring the grid. The API method is basically what the JSX configuration method uses. Many of our customers store their grid configuration in the backend. They then use it to build out the grid. Some of them choose to build out XML from their backend and then call the buildFromXML method on the grid. Others build out the grid using the API directly. This gives you more flexibility, but makes the code a lot more verbose. Let's take a quick look at the code required to build out a grid with no XML.


   const {ReactDataGrid} = flexiciousNmsp;

   class DynamicColumns extends React.Component {

       constructor() {

           super();

       }


       componentDidMount() {


           var grid = this.grid;

           grid.setDataProvider(FlexiciousMockGenerator.instance().getFlatOrgList());;

           grid.clearColumns();


           var col = this.addColumn("id", "Company ID");

           col.setColumnLockMode(flexiciousNmsp.FlexDataGridColumn.LOCK_MODE_LEFT)

           grid.addColumn(col);

           col = this.addColumn("legalName", "Company Name");

           col.setColumnLockMode(flexiciousNmsp.FlexDataGridColumn.LOCK_MODE_RIGHT)

           grid.addColumn(col);

           grid.addColumn(this.addColumn("headquarterAddress.line1", "Address Line 1"));

           grid.addColumn(this.addColumn("headquarterAddress.line2", "Address Line2"));

           grid.addColumn(this.addCurrencyColumn("earningsPerShare", "EPS"));

           grid.addColumn(this.addColumn("headquarterAddress.line1", "Address Line 1"));

           grid.addColumn(this.addColumn("headquarterAddress.line2", "Address Line2"));

           grid.addColumn(this.addCurrencyColumn("earningsPerShare", "EPS"));

           grid.addColumn(this.addColumn("headquarterAddress.line1", "Address Line 1"));

           grid.addColumn(this.addColumn("headquarterAddress.line2", "Address Line2"));

           grid.addColumn(this.addCurrencyColumn("earningsPerShare", "EPS"));

           grid.addColumn(this.addColumn("headquarterAddress.line1", "Address Line 1"));

           grid.addColumn(this.addColumn("headquarterAddress.line2", "Address Line2"));

           grid.addColumn(this.addCurrencyColumn("earningsPerShare", "EPS"));

           //grid.distributeColumnWidthsEqually();

           grid.reDraw();

       };

       addCurrencyColumn(dataField, headerText) {

           var dgCol = this.addColumn(dataField, headerText);

           dgCol.setLabelFunction(UIUtils.dataGridFormatCurrencyLabelFunction);

           dgCol.setStyle("textAlign", "right");

           dgCol.setUniqueIdentifier(headerText + dynamicColumnsCounter++);

           dgCol.footerOperation = "average";

           dgCol.footerLabel = "Avg: ";

           dgCol.footerAlign = "right";

           dgCol.setStyle("paddingRight", 15);

           dgCol.filterOperation = "GreaterThan";

           dgCol.filterWaterMark = "Greater Than";

           return dgCol;

       }

       addColumn(dataField, headerText) {

           var grid = this.grid;

           var dgCol = grid.createColumn();

           dgCol.setDataField(dataField);

           dgCol.setHeaderText(headerText);

           //because columns are having the same header text, we need to provide unique identifiers.

           dgCol.setUniqueIdentifier(headerText + "" + counter++);

           dgCol.filterControl = "TextInput";

           dgCol.filterOperation = "BeginsWith";

           dgCol.filterWaterMark = "Begins With";

           return dgCol;

       }


       render() {

           return (

               <ReactDataGrid ref={(grid) => { this.grid = grid; }} horizontalScrollPolicy="on" ref={(grid) => { this.grid = grid; }}

                   width={"100%"} height={500} enableExport enablePrint enableCopy enableFilters enableFooters enablePaging

                   enablePreferencePersistence generateColumns={false} preferencePersistenceKey="dynamicColumns"

               />

           );

       }

   }




So, in this example, we just use the XML to initialize the grid. We use API to generate the actual columns. For a running copy of this example, please refer to http://www.reactdatagrid.com/demo/#DynamicColumns


We also have a more complicated grid, with column groups and inner levels. The code for this as well as a running example is available here:

http://www.reactdatagrid.com/demo/#LargeDynamicGrid