In the previous topic, we saw the XML method of configuring the grid. The API method is basically what the XML 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.

myCompanyNameSpace.SAMPLE_CONFIGS_DETAIL_URLS["DynamicColumns"]="http://www.flexicious.com/resources/Ultimate/docs/DynamicColumns.htm";

myCompanyNameSpace.DynamicColumns_grid_creationCompleteHandler=function(evt)

   {

       var grid=this;

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

       grid.clearColumns();

   var col=myCompanyNameSpace.DynamicColumns_addColumn("id","Company ID");

   col.setColumnLockMode(flexiciousNmsp.FlexDataGridColumn.LOCK_MODE_LEFT)

   grid.addColumn(col);

   col=myCompanyNameSpace.DynamicColumns_addColumn("legalName","Company Name");

   col.setColumnLockMode(flexiciousNmsp.FlexDataGridColumn.LOCK_MODE_RIGHT)

   grid.addColumn(col);

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

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

   grid.addColumn(myCompanyNameSpace.DynamicColumns_addCurrencyColumn("earningsPerShare","EPS"));

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

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

   grid.addColumn(myCompanyNameSpace.DynamicColumns_addCurrencyColumn("earningsPerShare","EPS"));

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

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

   grid.addColumn(myCompanyNameSpace.DynamicColumns_addCurrencyColumn("earningsPerShare","EPS"));

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

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

   grid.addColumn(myCompanyNameSpace.DynamicColumns_addCurrencyColumn("earningsPerShare","EPS"));

   //grid.distributeColumnWidthsEqually();

   grid.reDraw();

};

myCompanyNameSpace.DynamicColumnsCounter=0;

myCompanyNameSpace.DynamicColumns_addCurrencyColumn=function(dataField,headerText){

   var dgCol = myCompanyNameSpace.DynamicColumns_addColumn(dataField,headerText);

   dgCol.setLabelFunction(flexiciousNmsp.UIUtils.dataGridFormatCurrencyLabelFunction);

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

   dgCol.setUniqueIdentifier(headerText+myCompanyNameSpace.DynamicColumnsCounter++);

   dgCol.footerOperation="average";

   dgCol.footerLabel="Avg: ";

   dgCol.footerAlign="right";

   dgCol.setStyle("paddingRight",15);

   dgCol.filterOperation="GreaterThan";

   dgCol.filterWaterMark = "Greater Than";

   return dgCol;

};

myCompanyNameSpace.DynamicColumns_counter=0;

myCompanyNameSpace.DynamicColumns_addColumn=function(dataField,headerText){

   var dgCol = new flexiciousNmsp.FlexDataGridColumn();

   dgCol.setDataField(dataField);

   dgCol.setHeaderText(headerText);

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

   dgCol.setUniqueIdentifier(headerText+""+myCompanyNameSpace.DynamicColumns_counter++);

   dgCol.filterControl="TextInput";

   dgCol.filterOperation="BeginsWith";

   dgCol.filterWaterMark = "Begins With";

   return dgCol;

};

myCompanyNameSpace.SAMPLE_CONFIGS["DynamicColumns"]='<grid horizontalScrollPolicy="on"  id="grid" width="800" height="500" enablePrint="true" ' +

   'enablePreferencePersistence="true" generateColumns="false" '+

   '                                                                         enableExport="true" enableCopy="true" enableFilters="true" enableFooters="true" enablePaging="true" ' +

   'preferencePersistenceKey="dynamicColumns"'+

   '                                                                         on'+flexiciousNmsp.Constants.EVENT_CREATION_COMPLETE+'="myCompanyNameSpace.DynamicColumns_grid_creationCompleteHandler">'+

   '                '+

   '        </grid>';

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.htmltreegrid.com/demo/prod_ext_treegrid.html?example=Dynamic%20Columns

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.htmltreegrid.com/demo/prod_ext_treegrid.html?example=Large%20Dynamic%20Grid