Styling Using Markup and API

The grids API offers a much more powerful programmatic model for a number of requirements that are customary in line of business applications. For an example of this programmatic control, please refer to the “Programmatic cell formatting” example in the main demo.

The best application of this mechanism is the themes that are built in to the app. Out of the box; we ship the product with almost a dozen professional looking themes as you can see in the screenshot below:

How do you use these themes? First of all, ensure that you have the themes.js file imported in your html page.

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

Finally, add the styles declaration to your grid. (In this example we are using officeblue, but if you look at themes.js there is the full list):

       $(document).ready(function(){

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

                   {

                   configuration:  . . .,

                       dataProvider: [. . . ],

                       styles : flexiciousNmsp.UIUtils.getThemeById('officeblue').styles

                   });

       });

This gives you a grid that looks like:

Isn’t that pretty? A full list of themes is located in themes.js.