In a previous post, we had explained the work we had done to incorporate Bootstrap as the UI framework instead of jQuery UI. http://blog.htmltreegrid.com/post/Bootstrap-Adapter-HTML-Treegrid-Integrated-with-Twitter-Bootstrap.aspx 

As most of you know, the HTMLTreeGrid is built on top of well established frameworks. There is a plugin based mechanism that can be used to plugin any framework of choice. We use the framework for a multitude of things, including date pickers, popup windows, and the like. Our plugin based architecture makes it easy to loosely couple the framework from the grid. In this blog post, we are going to show how to swap in BootstrapAdapter for the built in jQuery Adapter. As easy as :

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

<script type="text/javascript" src="lib/BootstrapAdapter.js"></script>

Download example:

BootstrapHtmlTreeGrid.zip (11.17 kb)

Recently, one of our customers had a need to dislay the footer row above the data grid above the body right below the header. A little known property of the grid allows you to actually control the order in which the sections are laid out!

'<grid id="grid" displayOrder="pager,header,footer,filter,body" 

This generates:

And below is the code

DisplayOrder.html (3.32 kb)

In the latest version of the HTML TreeGrid we have added support for customs   style sheets.  this allows us to control the appearance of the HTML output. The word output is actually just an HTML version of the exporter. Microsoft Word is able to open up and render HTML just fine which is what we use for our word exports. Just a quick note we use the same concept for Excel exports and as demonstrated in this blog post   http://blog.htmltreegrid.com/post/How-to-Generate-Excel-XLS-files-and-avoid-the-Excel-scientific-notation-for-numbers.aspx

As with anything else in our software we ship with the default style sheet for the word and the HTML export.  The default version of the style sheet is below

Constants.HTML_EXPORT_CSS= "<style>"+

  "table {font-family: Arial, Verdana, sans-serif;border-collapse: collapse; border-spacing: 0; }       "+

  "td {border: 1px solid #CCC; text-align: center;width: 10em;padding: 1em;}    "+

  "th {border: 1px solid #CCC; text-align: center;padding: 1em;background-color: #DFDFDF;}"+

  "tr {height: 1em;}"+

  "table tr.even {background-color: #F1F1F1;}"+

  "table tr.footer {border: 1px solid #CCC; text-align: center;padding: 1em;background-color: #DFDFDF;}"+

  "table tr.odd {background-color:#fefefe;}</style>";

Constants.WORD_EXPORT_CSS= "<style>"+

  "table {font-family: Arial, Verdana, sans-serif;border-collapse: collapse; border-spacing: 0; }       "+

  "td {border: 1px solid #CCC; text-align: center;width: 10em;padding: 1em;}    "+

  "th {border: 1px solid #CCC; text-align: center;padding: 1em;background-color: #DFDFDF;}"+

  "tr {height: 1em;}"+

  "table tr.even {background-color: #F1F1F1;}"+

  "table tr.footer {border: 1px solid #CCC; text-align: center;padding: 1em;background-color: #DFDFDF;}"+

  "table tr.odd {background-color:#fefefe;}</style>";

As always you can customize this by overwriting these variables.  this is what we going to do in this example.

please download the example below and running locally to see the impact.

CustomExportStyles.html (4.54 kb)

This is a fairly common requirement - calling backend service and rendering data. The datagrid is designed to operate on JavaSCript Objects. It does not care where the JavaScript objects came from, as long as you have a datasource that returns javascript objects, gird is able to render it.

We have tons of examples of this in the demo, but since we wanted the demo to be fully self contained, none of them connect to a backend system. We have separate examples for those, which are more elaborate with PHP, NET backends. In this blog post, we are going to demonstrate a simple json service call and how to render it in the grid.

Code is very simple:

var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),
        {
            configuration:  '<grid id="grid" headerRowHeight="50"

 variableRowHeight="true" enablePrint="true" enablePreferencePersistence="true"

 enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" 

enableFooters="true" >' +
                    '        <level>' +
                    '           <columns>' +
            '              <column dataField="userId" headerText="User ID" labelFunction="excelIssueBypass"/>' +
                    '              <column dataField="id" headerText="ID" labelFunction="excelIssueBypass"/>' +
                    '              <column dataField="title" headerText="Title"/>' +
            '              <column dataField="body" headerText="Body" wordWrap="true" width="300"/>' +
                    '           </columns>' +
                    '        </level>' +
                    '     ' +
                    '  </grid>',
            dataProvider: [
             ]
        });
grid.showSpinner('Loading, please wait!!');

$.getJSON( "http://jsonplaceholder.typicode.com/posts", function( data ) {
    grid.setDataProvider(data);
});

Basically all we are doing, is calling the json file, and once we ge the data, 

setting the dataprovider on the grid using the setDataProvider method.

Attahed is the sample:

CallRemoteUrl.html (3.41 kb)

Recently, we had a customer ask an interesting question:

• Export Issue  :I have seen your blog post for generating Excel version  2007 xml files. I need something which work with .xls file not xml files. Also, column having numbers are converted to scientific notation..I am Ok if it exported as strings

var excelIssueBypass=function(item,col){
    return item[col.getDataField()] + " ";//just so excel does not apply scientific notation
}

ExcelExporter.html (3.49 kb)