Bootstrap integration with htmltreegrid

clock October 31, 2015 22:20 by author htmltreegrid

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)



How to change the display order of the grid

clock October 31, 2015 17:32 by author htmltreegrid

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)



How to customize the default Doc and HTML output

clock October 30, 2015 20:07 by author htmltreegrid

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)



How to Connect the DataGrid to a JSON DataSource

clock October 30, 2015 00:46 by author htmltreegrid

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)



How to Generate Excel XLS files and avoid the Excel scientific notation for numbers

clock October 29, 2015 01:41 by author htmltreegrid

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
Answer: The bottom line is that currently we cannot generate pure XLS files completely on the client. What we can do is emulate HTML in Excel. If you do  grid.excelOptions.useExcelExporter=true; It will generate an xls, and excel will be able to open it. 

Another important point to note is that we cannot control how excel displays numbers. What we can do, is define a label function that concatenates the data with blank strings.

Some thing like

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

Both these concepts are demonstrated in the attahed sample code.. 


 

ExcelExporter.html (3.49 kb)



HTMLTreeGrid Team Blog


Widget Administration not found.

Unable to cast object of type 'ASP.widgets_administration_widget_ascx' to type 'WidgetBase'.X

Tag cloud

    Page List