XML Configuration

Parent Previous Next

When you define a grid, you pass in XML configuration for the grid. We have seen many examples of this so far, but lets look at a simple example here:



       $(document).ready(function () {

           var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

                   {


                       configuration: '<grid id="grid" enablePrint="true" enablePreferencePersistence="true" enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" enableFooters="true" enablePaging="true">' +

                                   '                        <level>' +

                                   '                                <columns>' +

                                   '                   <column type="checkbox"/>'+

                                   '                                        <column dataField="id" headerText="ID" filterControl="DynamicFilterControl" footerLabel="Sum: " footerOperation="sum" footerOperationPrecision="2"/>' +

                                   '                                        <column dataField="type" headerText="Type" filterControl="TextInput" filterOperation="Contains" />' +

                                   '                                </columns>' +

                                   '                        </level>' +

                                   '                ' +

                                   '        </grid>',

                       dataProvider: [

                                                       { "id": "5001", "type": "None", "active": true },

                                                       { "id": "5002", "type": "Glazed", "active": true },

                                                       { "id": "5005", "type": "Sugar", "active": true },

                                                       { "id": "5007", "type": "Powdered Sugar", "active": false },

                                                       { "id": "5006", "type": "Chocolate with Sprinkles", "active": true },

                                                       { "id": "5003", "type": "Chocolate", "active": false },

                                                       { "id": "5004", "type": "Maple", "active": true }

                                               ]

                   });


       });


As you see above, we basically pass in an XML string to the constructor of the FlexDataGrid class. One very frequent question comes up is, "What are the various attributes you can specify in XML"?


The answer is simple. All of them. Each and every property mentioned in the documentation can be specified via XML. This includes both properties explicitly exposed as public attributes (e.g. enablePrint, enableExport etc) , and some that are exposed via setters (e.g. setPagerRowHeight, setPagerVisible) . The XML parser is smart enough to figure out if there is a setter with the naming convention setXXXX and use it instead of a direct value set on the property. (This is in red because it often causes confusion among our customers). So pageSize="50" automatically translates to setPageSize(50), even if there is no property called pageSize on FlexDataGrid, but because there is a method named setPageSize. It is also smart enough to figure out that a value is a number passed in as a string, so it will do that conversion as well.


In addition to the above, the XML builder does a lot of preprocessing of the string values passed into it. These steps are described below.


  1. Any attribute that matches the name of an event. The XML parser assumes that any string passed in as the value for an event is a function call back and treats it as such. For example creationComplete="myCompanyNameSpace.onCreationComplete". So this needs to evaluate to a name spaced function. A full list of events is available here: http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html (events tab)
  2. For any properties with the following suffix, we eval the passed in value. This means the value needs to evaluate to a namepace qualified function. e.g. filterRenderer="flexiciousNmsp.DynamicFilterControl":
    1. Function
    2. Renderer
    3. Editor
    4. Formatter
    5. DateRangeOptions
  3. For the following properties, we wrap the value in a ClassFactory:
    1. filterRenderer
    2. footerRenderer
    3. headerRenderer
    4. pagerRenderer
    5. itemRenderer
    6. nextLevelRenderer
    7. itemEditor
  4. If any value is passed in within curly braces {}, we assume that is a function call. Like {executeFunction(1,2)}. We will execute the executeFunction passing in 1 and 2, and return with the result. This is very rarely used.
  5. For any value you prefix with the word eval__, we evaluate it before it gets applied
  6. For any value you specify within square brackets [], we assume it is an array, and split the string by commas and convert it to an array.
  7. For any value that starts with 0x, we assume its a hex code and use it as such. This is used for colors.
  8. For any value that is composed solely of numbers, we parse it as such.
  9. Finally, after all this preprocessing is done, we check to see if there is a setter method specified for the property name at the target object level (FlexDataGrid, FlexDataGridColumnLevel, or FlexDataGridColumn). If so, we call the setter method with the preprocessed value. Else, we set a property with that name to the preprocessed value.


  1. For the grid tag, you can specify any of the properties listed here : http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html
  2. For the level tag, you can specify any of the properties listed here : http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html
  3. For the column tag, you can specify any of the properties listed here : http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html