Had a few interesting queries come up:

Question -> "I am trying to develop a small project as a proof of concept before buying your software. One of the mandatory feature we need is the Full Lazy load, and right now I have a lot of problems making it work using the JavaScript API only. Would you have working examples like on your demo page, but using exclusively the JavaScript API ?"

Answer -> Basically if you review the following links:

http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?ConfigurationXMLvsAPI.html 
http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?XMLConfiguration.html 
http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?APIConfiguration.html

Anything you do in XML configuration, it is possible to do it using JavaScript API. If you want to add event listeners for functions,you have to identify what object to add the event listener to (grid, level, inner level, etc) and add the event listener. 

grid.getColumnLevel().addEventListener(this,"itemLoad", myCompanyNameSpace.fullyLazyLoaded_flexdatagridcolumnlevel1_itemLoadHandler);

Question -> "how to get only top level footer in dynamic tree grid."

Answer -> For those of you who are not familiar with what a dynamic tree grid is, (Actually the term is dynamicLevels) - This means that the grid will introspect the data provider to automatically figure out how deep the tree will nest. This is in contrast to other configuratoins where you explicitly define how "deep" the tree will be, what columns will be at each level, etc. But in case the hierarchy is unknown at design time, the grid is capable of introspecting the data provider and automatically generating the levels at run time. You do this by setting enableDynamicLevels="true" on the grid. However, since the levels are not defined at design time, to be able to manipulate their properties at runtime, we have an event, DYNAMIC_LEVEL_CREATED and DYNAMIC_ALL_LEVELS_CREATED. Both these events are defined on the FlexDataGridEvent class. To accomplish this, you can do something like:

configuration:'<grid id="grid" dynamicLevelCreated="myCompanyNameSpace.onDynamicLevelCreated" enableDynamicLevels="true" enablePrint="true" enablePreferencePersistence="true" enableExport="true" forcePagerRow="true" pageSize="50" enableFilters="true" enableFooters="true" >' +

        myCompanyNameSpace.onDynamicLevelCreated = function(evt){
                 evt.level.setEnableFooters(false);//only top level should have footer bar, dynamically generated levels should not.
         };
Attached is a test case.

StandAlone.html (4.41 kb)

Oddly enough, a number of you have asked this question. Is it possible to have two grids in the same page? It is absolutely possible to have any number of grids on the same page. The confusion probably arises from the fact that none of our public examples show this, but that does not mean it is not possible! In this blog post, we will show you how to do this. 

Lets take a look at the screenshot:

twogrids.png (94.85 kb)

And here is the code:

TwoGrids.html (4.03 kb)

We recently added support for dynamic grouping using drag and drop to the DataGrid. The user can drag and drop column headers on a specially designated area of the screen, and the grid interprets this gesture as a requet to group the dataprovided by that field. 

The user can then choose to remove a column from that grouping by clicking on that button again.

Below is a screenshot of this functionality:

We have a live demo of this functionality available here:

http://htmltreegrid.com/demo/DynamicGrouping.html

View source to take a look at the code!

Recently, we had a bug report that some of you might run into.

When there are multi level and expand the inner level data, there is a white space that shows up for the top level columns.

The video is here : 

White Space Issue.wmv (188.04 kb)

The basic issue here is that the grid draws the horizontal scrollbar dimensions purely on basis of the top level columns. So the solution is quite simply to either provide a wide width for the last top level column, or to add an extra "padding" column. The extra padding column also helps with ability to resize the last top level column. The padding column can be defined as : <column excludeFromExport="true" excludeFromSettings="true" width="2000">

The other issue that was recently fixed is that, for ComboBox, and DateComboBox filters,  clearing the filter did not actually clear the filter value of the item. This has been recently fixed. 

Most of you know that we offer an API to pre-set the filter values when the grid loads (to apply a default filter). You do this via the grid.setFilterValue method. For example, to set the DateComboBox to show yesterday's data by default, all you have to do is:

grid.setFilterValue('date',flexiciousNmsp.DateRange.DATE_RANGE_YESTERDAY);

Today a customer asked an interesting question - how to preset the DateComboBox to "Custom' AND specify the custom date range? 

Well, turns out this is doable, and we actually do this in our preference persistence mechanism where we store the state of the filters. 

All you have to do is (Make sure you do this AFTER the data provider is set):

            grid.validateNow();            

            grid.setFilterValue('date',flexiciousNmsp.DateRange.DATE_RANGE_CUSTOM+"__" + new Date(2012,1,1).toString() + "__" + new Date(2014,1,1).toString());

StandAlone.html (3.88 kb)

Recently while working for a customer we came across an issue that some of you have reported earlier. Basically the issue is that. If you have used HTML in the header text of a cell, everywhere else where we use the header text, we end up showing this same html.  This includes things like the multi column sort popup, the export mechanism, the current mechanism and other related functionality.Usually this functionality is used to embed custom HTML in the header cells. However things like the sort popup, the excel export popup and other related should not be displaying HTML instead should be displaying the regular text.This is where the newly added headerLabelFunction2 property income in handy. Similar to the functionality that we expose for footer and regular data cell function, the headerLabelFunction2 takes a cell object and a column of it returns appropriate texts for display. Whenever this function is called in the context of a rendering of the grid it will have a valid cell object.  In the context of other functionalities like the multi column, the export mechanism, the print mechanism, and others, the cell will be null. You can put a check for the cell object in the function and return different strings on basis of whether or not the function is called with a null cell (sort popup, export popup, or actual export) or with a valid cell (grid rendering). 

myCompanyNameSpace.getHeaderLabel=function (cell,col){

     if(cell){

              //this means there is a cell, and the grid is being rendererd

     }else{

        //there is no cell, dont return HTML

     }

}

Just fixed an issue with jQuery date picker

When the user selects the date in to list, the focus is going to the from date instead of closing the popup. Also sometime the date in to is not selecting and going back the control to from date.

The fix is a change to the Date Picker class. It is a part of the upcoming build, but is available for those of you who need it. 

If you dont wish to update to the latest version, you can add the following patch as well:

<script type="text/javascript">
  flexiciousNmsp.JQueryAdapter.prototype.createDateTimePicker = function (domElement, dateFormat, dflt) {
        if (domElement.domElement) {
            domElement = domElement.getTextBox();
        }
        $(domElement).datepicker({dateFormat:dateFormat, showButtonPanel:true,showOn:"button", buttonImageOnly:true, changeYear:true,defaultDate:dflt,buttonImage:flexiciousNmsp.Constants.IMAGE_PATH + '/date_picker.png' });

        if (dflt && dateFormat)
            $(domElement).datepicker("setDate", dflt);

        $('ui-datepicker-div').focus();
    };
    flexiciousNmsp.UIUtils.adapter = new flexiciousNmsp.JQueryAdapter();
</script>

A customer reported a need for a feature that might be of use to some of you: 

I noticed an issue with the Columns To Export feature on the Export Options window.

Example:

First, I change the Columns To Show using the Settings window to only display a subset of the columns available.

Then when I try to Export or Print the grid, I noticed that all of the Columns To Export are checked, even though not all of the columns are currently displayed on the grid. 

Is there a way to display ALL available columns on the Export popup but only have the selected ones from the Settings popup also selected in the Export popup? 

-> This is actually possible but you will need to implement a custom export popup. 

First, to implement a custom export popup, please follow : http://blog.htmltreegrid.com/post/How-to-Customize-the-Pager-(Toolbar)-Export-Options-Settings-and-Save-Settings-Popups.aspx

Second, in your CustomExportOptionsView, please add the following piece of code in the :

/**

* Initializes the auto complete and watermark plugins

*/

ExportOptionsView.prototype.initialize=function(){

//other code 

this.cbxColumns.addEventListener(this,flxConstants.EVENT_CHANGE,this.updateExportColumns);

        var items = this._grid.getColumns();
        var itemsToShow = [];
        for (var i = 0; i < items.length; i++)
        {
            var col = items[i];
            if(col.getVisible()){
                itemsToShow.push(col);
            }

        }
        this.cbxColumns.selectedValues=(uiUtil.extractPropertyValues(itemsToShow,'headerText'));

The full file is attached below for your ready reference. 

ExportOptionsView.js (7.99 kb)

Just wanted to post up a quick blog post, since a number of you have asked this question recently:

<column xidata-Field="cntryCode" xiheader-Text="Country" xifilter-Control="MultiSelectComboBox"

                              xifilter-Combo-Box-Build-From-Grid="true" xicolumn-Lock-Mode="left" 

                              xiheader-Align="center" xidraggable="false"></column>

Question : "Here above I am using  MultiselectComboBox and filter collection is generated from grid itself,  when I open this filter a  filter comboBox  display many items for that dropdown use whole page height, and page display its vertical scroll bar. We aren't seeing any vertical scrollbars on a MultiSelectComboBox filter control that has a lot of data. It simply scrolls off the screen. Is there a fix for this?"?

Answer:

Please add the following style declaration to your html page.

<style>

.flexiciousGrid .multiSelectComboBoxPopup {

               overflow-y: auto;

               max-height: 150px;

          }

          </style>

Question : Is it possible to programmatically set a single cell to my own CSS?  Or am I limited to cellTextColorFunction and cellBackgroundFunction? Like if I wanted to apply a class to a single cell in a column based on the row data that had font style, underline, color, bold, etc would there be any way to retain it and avoid getting overwritten by what the grid writes into the “style” attribute of the cell div?

Answer : Please consider using a labelFunction that returns the HTML you need for the cell. Or, you could also use itemRenderer, which is more effort, but you get complete control. See this for an example:

http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?CellsandRenderers.html

http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?CustomRenderers.html

Question : I’m trying to add rows to my grouped grid by updating the array that the grid’s dataProvider is pointed to, and then calling refreshCells() or redrawBody() but nothing seems to be adding the new rows.  Do you see an error in my process?

Answer : Please call rebuildBody()