Recently had an issue reported by a long time customer. 

While using Export to excel in Htmltreegrid, We have implemented “Excel2007” option  to export gridData in “.xls” format.

We are implementing this using Excel2007Exporter.js file(see attached) and added following code in our controller file in onGridCreationComplete function.

$scope.onGridCreationComplete = function(evt) {

                                                                                                                                var grid = evt.target;

                                                                                                                                grid.excelOptions.exporters = exporters = [new flexiciousNmsp.CsvExporter(), new flexiciousNmsp.DocExporter(),

                                                                                                                                new flexiciousNmsp.HtmlExporter(),new flexiciousNmsp.XmlExporter(),new flexiciousNmsp.TxtExporter(),

                                                                                                                                 new flexiciousNmsp.Excel2007Exporter()

                                                                                                                                 ];

                                                                                                                                 grid.excelOptions.enableLocalFilePersistence=false;

                                                                                                                                grid.validateNow();

                                                                                                                };

But while Exporting the data of the grid which is having more than large records(1000+ records), It redirects  to Flexicious homepage and shows error message whithout generating excel.

Please suggest on this.

=========================================================

Answer :

This customer was using sample code from an old version of the product that did not have support for file saver. It was using the flexicious server echo. When you do a export , we basically build a string on the client application. If Flash player is available, we will use it via the downloadify library. If not, we need to go through the traditional http File Buffering process. So what we do is this : We build the excel/word/html string, and send it to the server, which simply writes it back, in addition to setting the content type. Now, we advise that you implement your own url to buffer this string back, but do provide our own url - the one mentioned above to perform the buffering. There is more information here : http://blog.htmltreegrid.com/post/Excel-Word-and-Html-Export-and-the-Echo-URL.aspx 

However, with the newer versions, we have added support for file saver. On modern browsers, you can do file save without the need for having flash. So the download mechanism will check to see if filesaver exists and is supported, if so, will use that. If it is not there or is not supported, it will fall back to flash. All you have to do is to use the new release and include FileSaver.js. If you include our PDF support, FileSaver is automatically included.

<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/thirdparty/jspdf-combined.js"></script>

index.zip (2.74 kb)

As most of you know, the grid provides an extremely convenient mechanism to write out custom HTML in cells, labelFunction and labelFunction2. This gives you complete control over what html you want to appear within each cell. However, with this flexibility comes a little bit of a issue in that the same code is executed when the grid renders the cell, or the cell export or copy mechanism inspect the cells to figure out the text to export or to copy. 

One of our customers was trying to implement the copy cell functionality described in this blog post:

http://blog.htmltreegrid.com/post/Adding-Custom-Right-Click-functionality-to-HTMLTreeGrid.aspx 

However, when they had custom HTML in the cell, there were two issues they encountered:

1.       While using label-Function2, and try to use this Copy cell it is giving below error, And it is not doing anything :

minified-compiled-jquery.js:1300 Uncaught TypeError: Cannot read property 'implementsOrExtends' of null

2.       While using Copy Table functionality, It is giving below error, And it is not doing anything:

minified-compiled-jquery.js:472 Uncaught ReferenceError: isIncludedInExport is not defined

 In In a nutshell, the problem is this - when you do copy cell, we need to identify which cell your mouse is on. We use the mouse event target to find out which FlexDataGridCell object the mouse event dom element belongs to. In this case, since we have custom HTML within the cell, we need to navigate to the DIV domelement first and then use that to get to the FlexDataGridCell object. Attached is a working test case that demonstrates fix for the above issue. 

HTML5_FleixiciousGrid.zip (8.44 kb)

Recently had a couple interesting questions:

Question : I am using flexicious HTMLTree grid in one of my project and I am not able to figure how to retrieve filtered rows anytime on grid. I need all rows which are actually filtered and not just rows appearing on screen at any instant. Please let me know how can I achieve that and it will great if you could share sample example of it.

Answer :   var filterData = grid.getFilteredPagedSortedData({},true,false,false,false);

Question : We are using HTMLTreeGrid with angularJS.  In our applications we have added buttons to our grid using the ToolBarActions but need more control when to enable a button than simply saying a row has been picked at a level.  For example, we only want to enable the button based on data in the selected row.  Is that possible?  Can you send an example how to do this?  Or do we need to create a Custom PagerControl to do this?  And how easy is it to extend the PagerControl to additional functions?

It is very easy to extend the pager control:

http://blog.htmltreegrid.com/post/How-to-Customize-the-Pager-(Toolbar)-Export-Options-Settings-and-Save-Settings-Popups.aspx

The toolbar actions are built within the pager control. You can do something like this:

 toolbarActionValidFunction="isValidToolbarAction" 

Here is the default implementation:

/**
 * Evaluates whether the given toolbar action is valid or not.
 *
 * If toolbarActionValidFunction is not null, returns the result of the function passing in the given ToolbarAction.
 * Else returns true.
 * @method isToolbarActionValid
 */
isToolbarActionValid = function (action, currentTarget, extendedPager) {
    if (action.requiresSingleSelection) {
        if (this.getSelectedKeys().length == 1) {
            var appliesToLevel = action.level;
            var itemLvl = this.getLevelForItem(this.getSelectedObjects()[0]);
            if (appliesToLevel == -1 || (itemLvl && (itemLvl.getNestDepth() == appliesToLevel)))
                return true;
            else
                return false;
        }
        return false;
    } else if (action.requiresSelection) {
        return this.getSelectedKeys().length > 0;
    }
    return true;
};

Finally, two attached examples demonstrate how to accomplish this with Angular JS:

angular (1).html (5.12 kb)

Index_hierarchy.html (6.24 kb)

And can you explain how to set the grid so picking a top level row does not automatically pick all nested next levels rows?  We can pick a row from the next level row and it does not auto pick the parent row.  We need the user to explicitly pick the nested rows even when the parent row is selected.

è     Just set enableSelectionCascade to false.