Basic Configuration Options

Parent Previous Next

In the previous section, we saw how to create a simple grid using the framework of your choice. The one thing you may have asked, where did the columns come from? How do you specify additional columns? How to customize the cells, enable various options, etc.? In this section, we will cover some of the basis of the massive customization options. For a full list of available options, please refer: http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html (Please note, this link is still a work in progress, and will be refined over time).


In most line of business applications, you usually define columns, header text, data field, formatting, and other options for the grid. With HTMLTreeGrid, you use XML to do this. The reason being that since most of our customers develop applications across various platforms that use our products (Flex, iOS, Android and HTML), the same configuration XML can be reused across different product lines. Let us take the above example and add some configuration information to it. In these sections, we will start with the jQuery example, but the DOJO and EXT would follow quite similar approach.


The first thing we will do is to enable the toolbar and the plethora of features that the grid ships with. We will also add custom defined columns, and set some options on them. In the previous example, since we had not defined any configuration information, the grid performed introspection on the data provider that we gave it, and then auto generated the columns. To specify configuration, we will simply add the configuration parameter when we initialize the grid. Below is the configuration we will provide.

                       

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

'                        <level>' +

'                                <columns>' +

'                                        <column dataField="id" headerText="ID" />' +

'                                        <column dataField="type" headerText="Type"/>' +

'                                </columns>' +

'                        </level>' +

'                ' +

'        </grid>',


Important: The properties you see in the markup above, are defined on the FlexDataGrid, FlexDataGridColumnLevel and FlexDataGridColumn classes. These are documented here : http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html

http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html

http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumnLevel.html

They should map to either a field exposed via a property, or via getter/setter methods (e.g. getDataField() or setDataField()). The XML parsing mechanism of the grid automatically figures out if there is a setter by the name of the property you are trying to specify, and uses that first. If it does not find one, then it uses the property name. The initialization mechanism also tries to intelligently map strings to complex objects, like Functions, Class Factories,  and Renderers. For details, refer to the Advanced Example - deep dive later in the guide.




Once you do this, below is the screenshot you should see:


That's much better! The power of the product is coming into view! Below is the markup that you should have so far:


<!doctype html>

<html lang="en" ng-app="myApp">

<head>

 <meta charset="utf-8">

 <title>Simple</title>

 

       <!--These are jquery and plugins that we use from jquery-->

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-1.8.2.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery-ui-1.9.1.custom.min.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.maskedinput-1.3.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.watermarkinput.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.ui.menu.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/adapters/jquery/jquery.toaster.js"></script>

       <!--End-->

   

       <!--These are specific to htmltreegrid-->

   <script type="text/javascript" src="http://htmltreegrid.com/demo/minified-compiled-jquery.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/examples/js/Configuration.js"></script>

   <script type="text/javascript" src="http://htmltreegrid.com/demo/themes.js"></script>

       <!--End-->

       <!--css imports-->

   <link rel="stylesheet" href="http://htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css"/>

   <link rel="stylesheet" href="http://htmltreegrid.com/demo/external/css/adapter/jquery/jquery-ui-1.9.1.custom.min.css" type="text/css"/>

   <!--End-->

       

 <script type="text/javascript">

       $(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" >' +

                                   '                        <level>' +

                                   '                                <columns>' +

                                   '                                        <column dataField="id" headerText="ID" />' +

                                   '                                        <column dataField="type" headerText="Type"/>' +

                                   '                                </columns>' +

                                   '                        </level>' +

                                   '                ' +

                                   '        </grid>',

                       dataProvider: [

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

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

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

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

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

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

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

                                               ]

                   });

       });

   </script>

</head>

<body>

   <div id="gridContainer" style="height: 400px;width: 100%;">

     </div>

</body>

</html>


So what did we do here? We just gave the grid an initial configuration to render itself. Let’s quickly examine the properties:


enablePrint="true" // This Enables the print operation in the toolbar

enablePreferencePersistence="true" // This Enables the preferences in the toolbar

enableExport="true" // This Enables the export operation in the toolbar


forcePagerRow="true"

Flag to force appearance of the pager row even with enablePaging=false. Use this flag to show the pager control even if the enablePaging is set to false. This is used in a scenario where you wish to show buttons other than the paging buttons in the pager bar.

enableFilters="true" // This Enables the inline filters

enableFooters="true" // This Enables the footers.



And on the column:


dataField="id" //The property on the data provider object that you want to show in this column. This can be a nested property - like address.line1 or  address.country.name.

headerText="ID" //The header text to show on the column.



In the above example, an important property is the dataField. Each of these properties has a description in the API documentation. Please NOTE – since some properties have getters and setters, the documentation will most likely be associated with the corresponding getter OR setter, depending on which is most likely to be used.. For example:



dataField="id"


The documentation in this case is associated with dataField appears under getDataField: http://www.htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGridColumn.html#method_getDataField

getDataField ()

The name of the field or property in the data provider item associated with the column. Each DataGridColumn control requires this property and/or the labelFunction property to be set in order to calculate the displayable text for the item renderer. If the dataField and labelFunction properties are set, the data is displayed using the labelFunction and sorted using the dataField. If the property named in the dataField does not exist, the sortCompareFunction must be set for the sort to work correctly.

This value of this property is not necessarily the String that is displayed in the column header. This property is used only to access the data in the data provider. For more information, see the headerText property.

If you specify a complex property, the grid takes over the sortCompareFunction, and the sortField property is ignored.


For the most part, each of the properties should be found on the FlexDataGrid, FlexDataGridColumn, FlexDataGridColumnLevel, or FlexDataGridColumnGroup classes in the documentation:

http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html


One thing to keep in mind - in the API docs, these might appear in getter/setter format. For example, enablePaging appears as getEnablePaging here: http://htmltreegrid.com/docs/classes/flexiciousNmsp.FlexDataGrid.html#method_getEnablePaging