A couple of customer questions

clock May 12, 2016 03:54 by author htmltreegrid

Recently we had a couple of questions that we have had before, so publishing them for your reference:

 

We are using the new HTMLTreeGrid with AngularJS and are able to set the grid style as such as:

$scope.gridOptions = {
    styles: flexGrid.UIUtils.getThemeById('blue').styles,
    delegate: $scope };

Our user's need the ability to change their theme and want the grid to reflect their new selected them.  We hope to do this without rebuilding the grid by simply changing the bound style such as:

   $scope.gridOptions.styles = flexGrid.UIUtils.getThemebyId("new theme here").styles;

But this does not work.  The grid stays the same.  Can you tell me how to apply a new style after the grid is already rendered?  An example would be great.

Answer:

 

Unfortunately, there is no quick way to re paint the grid with new theme. 

 

If you look at our demo: http://www.htmltreegrid.com/demo/prod_jq_treegrid.html?example=Simple 

 

And click on the themes tab, you can switch themes. Below is the function we call once you switch themes. But this function actually destroys and re-creates the grid. This is the only certain way to definitively apply all style values, destroy internal cached information etc. 

 

 

myCompanyNameSpace.loadTheme=function(index){

    var theme=flexiciousNmsp.themes[index];

    if(!flexiciousNmsp.StyleDefaults._defaults){

        flexiciousNmsp.StyleDefaults._defaults={};

        flexiciousNmsp.UIUtils.mergeObjects(flexiciousNmsp.StyleDefaults._defaults,flexiciousNmsp.StyleDefaults.defaults);

    }

    var newStyles = {};

    flexiciousNmsp.UIUtils.mergeObjects(newStyles,flexiciousNmsp.StyleDefaults._defaults);

    flexiciousNmsp.UIUtils.mergeObjects(newStyles,theme.styles);

    flexiciousNmsp.UIUtils.mergeObjects(flexiciousNmsp.StyleDefaults.defaults,newStyles);

    myCompanyNameSpace.gotoTab(0);

};

 

 

Goto tab eventually runs the following code, but you might be able call grid.rebuild():

 

if (grid && grid.domElement && grid.domElement.parentNode){

        var domParent = grid.domElement.parentNode;

        var domElement = grid.domElement;

        grid.kill();

        domElement.innerHTML="";

        domElement.style.width="99%";

        domElement.style.height="99%";

        flexiciousNmsp.UIUtils.addChild(domParent,domElement);//because kill removes from dom.

    }

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

        {

            dataProvider:dp,

            configuration:myCompanyNameSpace.SAMPLE_CONFIGS[config],

            styles:styles

        });

 

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

 

We have a grid with row background color:

myCompanyNameSpace.getCellBackground = function (cell) {

            if (cell.level.isItemSelected(cell.rowInfo.data)){

                  return cell.getStyleValue("selectionColor");

            }

 

            if (cell.rowInfo.getData().SLS_MON_STAT == "R") {

return 0xFF0000;

}

 

return null;  // keep default background color for all "normal" rows

      }

 

 

What the above code should do is, every row where the attribute SLS_MON_STAT equals to “R” should have a red background color. All other rows should have standard background color.

This works as expected so far, but the problem is that all red rows stay now in red forever. The “normal” rows (those that are not red) get a lightblue background as a temporary highlighting when the mouse hovers over them, and when a row is selected by clicking on it, it gets a darker blue background highlighting. But this highlighting does not work on the red rows.

 

How can I achieve that the highlighting works on all rows, even on those rows that are not in “default” background color?

 

 

 Answer:

In your getBackgroundFunction

 

Just add this condition:

 

 

if( grid.currentCell.rowInfo == cell.rowInfo){
         //this means cell is the same row that the mouse is over.
          return cell.getRolloverColor();

 

}


How to add custom interactive html from a labelFunction

clock March 16, 2016 18:47 by author htmltreegrid

Recently, we had a customer asking for a example of how to invoke custom logic from the code generated by a labelFunction.

for those of you who do not know what labelFunction is, it is a excellent mechanism to generate custom HTML for each cell. 

For more details, please refer:http://htmltreegrid.com/newdocs/html/Flexicious%20HTMLTreeGrid.html?ConfigurationOptionsInteractiveH.html 

 

In this example, we will see how you can get the labelFunction to return HTML with a call back function that gets you information about 

which cell the user clicked on. Note that the key is to pass in 'this' from the label functions output html, and navigate to the container cell.

The container cell can then give you a hook into the row, the data, and the cell.

 

custom-logic-labelfunction.html (3.90 kb)



How to add a custom tooltip to HTML TreeGrid DataGrid

clock February 28, 2016 06:25 by author htmltreegrid

Recently, we had a customer asking for some help implementing a tooltip. Out of the box, we provide an API that you can listen to. Using this API, you can plug in any custom tooltip implementation. 

In this example, we are going to use the jQuery tooltip component. Once implemented, this will look like the below screenshot:

 

And below is the sample code:

 

grid-cell-tooltip.html (20.50 kb)



How to highlight just a particular column in bold on selection

clock February 22, 2016 03:52 by author htmltreegrid

Recently had a question for a customer:

Would you have an example in your demo samples on your site to show how to set a specific row cell data to bold when the row is selected. I have a column called Product Id.

On row selection, the row has been highlighted but the user says they still want the product id set to bold so they can see that it is selected. I know the row is highlighted but it seems

 

 

It is not enough for them.  They want the product id in that selected row set to bold. 

 

What we currently do, is we attach the "Selected" style to each cell that is selected in the grid. This highlights the row in bold. But in this case we just want to highlight a single column in bold. 

So what we need to do, is to remove that style that highlights everything in bold.

We do this by

/* grid selected column styles reset. */
   
  .flexiciousGrid .selectedCell label{
  font-weight: normal !important;
  }

And then we assocaite a style with that column:

.flexiciousGrid .selectedCell .nameColumn{
  font-weight: bold !important;
  }
And finally, the column needs the nameColumn stytle
var customBoldStyleFunction = function(data, col){
  return "<span class='nameColumn'>"+data[col.getDataField()]+"</span>";
  };
   

Full example below:

 



grid-selected-column-bold-text.html (18.87 kb)



How to refresh only a node within the HTML TreeGrid DataGrid

clock February 18, 2016 18:37 by author htmltreegrid

 

 

Question : Currently, I am using Treegrid in full lazy load, when I clicked a parent node it displays all the child nodes. Now my question is there any way with which I can refresh the opened level ? I want to reload the child again from server.. but for only one parent.

Answer:

Basically, the approach is very similar to what you would do when you loaded the children the first time. 

Lets look at some sample code:

First, lets add the button:

+  <div class="toolbar">  <button onclick="onRefreshClick()">Refresh Children of First Parent</button>

+</div>

On Refresh, we will just reload the first child:

+         function refreshChildren(parent, level){   if(!parent || !level)

+                return;

+            $.ajax({

+                url : GridConFig.ApiCallBaseUrl,

+                data : {name : "child_data", parent_id : parent.id},

+                type : "GET",

+                success : function(res){

+                    var response = JSON.parse(res);

+                    if(response.success){

+                        level.grid.setChildData(parent, response.data, level);

+                    } else {

+                        alert(response.message);

+                    }

+                }

+            });

+        }

+

+        function onRefreshClick(){

+            var grid = document.getElementById("grid-container").component;

+            if(!grid || !grid.getDataProvider())

+                return;

+            refreshChildren(grid.getDataProvider()[0], grid.getColumnLevel())

         }

 

 

 

 

 



Focus in on TextInput on edit

clock February 4, 2016 07:44 by author htmltreegrid

Recently a customer asked a question that helps demonsrate a couple of concepts

Basically what they wanted to do was to highlight the entire cell when starting an edit session. The default behavior of this functionality is that when you start an edit session, it will focus at the end of the text box. Assumption is that you want to continue to add to the textbox, But in this case, since the client wanted customizaiton of this functionality, there are multiple ways to do it. Although ideally you would do something like this in itemEditBegin event handler, we wanted to demonstrate another nifty way of customizing the stock behavior. Lets look at the code:

flexiciousNmsp.FlexDataGridContainerBase.prototype.stockBeginEdit = flexiciousNmsp.FlexDataGridContainerBase.prototype.beginEdit;
flexiciousNmsp.FlexDataGridContainerBase.prototype.beginEdit = function(cell){
    this.stockBeginEdit(cell);
    if(this.getEditor().implementsOrExtends("TextInput")){
        var txt=this.getEditor().getText();
        if(txt.length>0)
            this.getEditor().setSelection(0,txt.length);
    }

};

So what we did here is interesting:
WE took the stock beginEdit function, and essentiall renamed it stockBeginEdit. 
Then we made a new beginEdit function, where we dutifully call the stockBeginEdit
And then finally, we added our logic to beginEdit to highlight the entire text of the cell.

What we did here was nothing extra ordinary - we just leveraged the 
tremendous power of JavaScript - the ability redefine functional behavior at runtime. 


React DataGrid - initializing HTMLTreeGrid in componentDidMount of a React Component

clock February 1, 2016 04:31 by author htmltreegrid

Update 01/2016: We now have a PURE REACT DataGrid component (built completely in react) http://www.reactdatagrid.com/

 

So of late, a lot of you have been asking for integration with the excellent React Framework. As most of you are aware, we already integrate with AngularJS as we talked about in this blog post : http://blog.htmltreegrid.com/post/Angular-JS-Support.aspx

Well, React is now gaining momentum, and some would argue is on track to bypass angular in terms of popularity. We spent some time trying to understand and look at how best to integrate with react, and there are basicaly 2 options:

1) Just drop a div in a react component, and in componentDidMount, call the constructor of the FlexDataGrid. Here is the crux of this code:

var FlexDataGridBasic = React.createClass({
componentWillMount: function() {
this.grid = new flexiciousNmsp.FlexDataGrid();
},
componentDidMount: function() {
this.grid.setDomElement(this.refs.gridContainer);
},
componentDidUnMount: function() {
this.grid.kill();
},
render: function() {
return (
<div ref="gridContainer" className="flexiciousGrid" style={this.props.divStyle}></div>
);
}
});
And then in your main app
var MyScreen = React.createClass({
onCreationComplete : function(evt){
var grid = evt.currentTarget;
console.log('This message is sent from a callback')
},
onItemClick : function(evt){
var grid = evt.currentTarget;
alert('You clicked' + grid.getSelectedIndex());
},
render: function() {
var divStyle={width:'100%',height:'100%'};

return (

<FlexDataGridBasic ref="secondGrid" divStyle={divStyle}>
</FlexDataGridBasic>

);
},
componentDidMount : function() {

this.refs.secondGrid.grid.delegate=this;
this.refs.secondGrid.grid.buildFromXml('<grid forcePagerRow="true" enableFilters="true"  creationComplete="onCreationComplete" itemClick="onItemClick" enableEagerDraw="true" ><columns>' + '<column headerText="Col1" dataField="col1"/><column headerText="Col2" dataField="col2"/></columns></grid>');
    }
});
ReactDOM.render(
<MyScreen/>,
document.getElementById('content')
);

The advantage of this approach is that you can reuse all your XML configuration as is 
- and the delegate is your screen for all the callbacks. 

Now, the other approach is more React centric. Here, we define the markup of the grid as "React Markup"
<FlexDataGrid ref="firstGrid" forcePagerRow="true" enableFilters="true" creationComplete={this.onCreationComplete} 
     itemClick={this.onItemClick} enableEagerDraw="true" divStyle={divStyle}>
    <FlexDataGridColumnLevel>
<FlexDataGridColumn headerText="Col1" dataField="col1"/>
<FlexDataGridColumn headerText="Col2" dataField="col2"/>
</FlexDataGridColumnLevel>
</FlexDataGrid>
What this does is that it makes the entire markup bindable. It has the added advantage of being more "Reacty". 
Which one you choose is upto you - As always, this is a fairly newly added feature, and 
we are looking for feedback on it, so please help us and submit your feedback!
One more thing - you will need the latest build to make this work, so please request one!
Below is the file that demonsrates both these approaches:

react.html (13.85 kb)



AngularJS DataGrid Component - Markup structure for Angular DataGrid

clock January 31, 2016 00:40 by author htmltreegrid

If you have looked at our demo page, you already know that HTMLTreeGrid is arguably among the most powerful datagrid options available for JavaScript SPA developers. With our integration with Angular, we expose the power of our product to developers of Angular apps in a way that feels natural. 

Angular JS is one of the most widely used framework among our customer base. React is catching up fast, and with Angular 2 being such a major rewrite, things are moving very fast in this arena. We are also working on a React component that wraps the HTMLTreeGrid, but that is a subject for another blog post. 

Today, we want to talk about our offering specifically as it relates to angular 1.x. 

One of the most powerful features of Angular is the ability to define all markup in the HTML (this becomes your 'view' in MVC). Almost all other third party components that integrate with angular do it in a way that defeats the purpose of Angular's elegance.

For example, you will see them have a directive like this (Note that there is a ton of JavaScript code JUST to do the configuration of the grid - this makes it a lot harder to understand the HTML markup and how it relates to the actual grid structure):

 

<!--THIS PART GOES SOMEWHERE BURIED IN YOUR VIEW HIERARCY-->
<div ng-app="app" ng-controller="MyCtrl">
<div third-party--grid-component component-options="componentOptions" />
</div>
<!--THIS PART GOES SOMEWHERE BURIED IN YOUR SCRIPTS-->
<script>
angular.module("app", [ "thirdPartyDirective" ]).controller("MyCtrl", function($scope) {
$scope.componentOptions = {
gridOption1 : "val1",
gridOption2 : "val2",
gridOption3 : "val3",
columns : [
{
columnOption1 : "val1",
columnOption2 : "val2",
columnOption3 : "val3",
},
{
columnOption1 : "val1",
columnOption2 : "val2",
columnOption3 : "val3",
}
]
};
});
</script>

Now contrast this with our Angular Datagrid declaration
<html>
<body> ..rest of the html
<div id="gridContainer" fd-grid="" ng-model="gridOptions" style="height: 725px;width: 100%;"...>
<level xirow-Height="49">
<columns>
<column xidata-Field="id" xiheader-Text="ID" xicolumn-Width-Mode="fixed" xiwidth="150" />
            <column xidata-Field="City Name" xiheader-Text="City Name" />
        </columns>
</level>
</div>
... rest of the html
Do you see the difference? Our Angular markup is clean, self contained, and requires very little JavaScript -
everything is loaded straight from the view which makes Clear separation of presentation and logic possible.


Another nice thing about our product is we hate to 'reinvent the wheel'. 
We rely on well established frameworks, plugins, and libraries that our customers are already using. 
For example, all of our UI is built using either jQuery UI, EXT, or DOJO 
in a plugin mechansim - (which allowed us to recently and quite easily add integration with Bootstrap).

If you like what you see, feel free to check out a few examples that use our AngularJS integration directive : 
http://blog.htmltreegrid.com/post/Angular-JS-Support.aspx


Inner Level Toolbars with v2.1

clock January 30, 2016 06:03 by author htmltreegrid

With the recent 2.1 release, we fixed a bug that is actually causing behavior that is different from the previous version. The behavior now is the correct one, but customers are used to the older behavior.

 

Here is a question we got: 

Question : With the new minified jquery file in with our existing treegrid files we noticed that in our grids which use nested hierarchical data the pager header shows up at the bottom of each nested level where as previously it did not. We aren't doing any paging but are using the forcePager attribute to show the icons for filtering and exporting. 

Solution:

This was actually a bug fix for another customer. If forcePagerRow is set to true, it is supposed to render a pager at each level. What you can do is set forcePagerRow=false at inner levels.  If you have dynamiclevels, you can set it in an event handler:

<grid dynamicLevelCreated="dynamicLevelsCreated(event)"

                  function dynamicLevelsCreated(event) {

                        if(event.level.getNestDepth()>1){

                             event.level.forcePagerRow=false;

                        }

 

                  }

 




HTMLTreeGrid - version 2.1 released

clock January 1, 2016 03:03 by author htmltreegrid

As we close out a terrific 2015 and ring in 2016, we have been hard at work here at HTMLTreeGrid wrapping up our newest release 2.1. As with the past couple releases, this one is huge as well, and the full scope of this release has been broken into almost half a dozen individual blog posts that we've been publishing over the past few weeks.

With no further ado, presenting HTMLTreeGrid v2.1:





  • Bug Fixes

    • Fixed issue with drag and drop enabled grids having scrolling issues with column resizing

    • Item filters setValue bugfix

    • Issue with scrollbar being shown when not necessary

    • Fixed issue with processSort with multiple column sort only the last sort was being added

    • Fixed issue with renderer height calculation for variable row heights. (When variableRowHeightUseRendererForCalculation = true)

    • Jquery adapter - fix issue with positioning – this caused the MSCB and the popups to render outside the default middle of the screen settings (and the MSCB dropdown to display below the screen)

    • MSCB added fix for this.allUnchecked not being updated correctly

    • footerOperationPrecision was being ignored

    • Fix for unnecessary horizontal scrollbar when scrollpolicy=auto

    • Fix for when headerText is numeric only, export does not work

    • Fix for format="currency" or format="number" formatterPrecision was being ignored.

    • Fix for Combobox data provider and selected issue change

    • Renamed hasHey to hasKey in KeyValuePairCollection

    • Fixed PdfExporter.js so it closes the popup window after export

    • IE 10 bug fix for HTMLTreeGrid not scrolling on select all

    • Bug fix for resize sometimes resizing the wrong column

    • Fix for filesaver and removal of popup after export

    • Close export options view when export is done

    • Support for disabling items in ComboBox

    • Bug fix for FlexDataGrid.js focus issue

    • Fixed CsvExporter.js to export numbers with a tab ahead

    • ensureAutoAjustHeight and horizontalScrollBar causes issues (Auto adjust does not account for scrollbar).

    • Fix to prevent text characters from being entered into Numeric RangeBox

    • Fix for XML Exporter not writing out footer.

    • Fix for when date picker opens in middle of edit, the textbox disappears.

    • Bug Fix to close the mscb when mouse down outside instead of mouseup

    • Bug FixScroll to the right in the table. Reorder one of the columns by dragging it to a new location. You’ll notice that the grid auto-scrolls all the way back to the reset position.



  • Enhancements

    • Changed signature of setEditedItemPosition to make it easier FlexDataGrid.prototype.setEditedItemPosition = function (rowIndex,colIndex)

    • Changes so that responsive behavior only kicks in once per resize

    • Added maxlength to TextInput.js.

    • Added documentation for responsive behaviors/ResponsiveBehavior.js

    • Updated build scripts to include new files for Responsive code

    • Changed the default for enhancedPDF to false

    • Added support for useEnhancedPDF + fixes for useEnhancedPrint.

    • Added pdfOptionsBasic when useEnhancedPDF =false.

    • Added Bug fix so no extra padding column needed to generate good quality print

    • Added printOptionsWindowTitle + printPreviewWindowTitle to PDFOptions

    • Added exportOptionsWindowTitle to ExportOptions.js

    • Bug Fix for useEnhancedPrint=false and the HTML print not printing

    • Upgraded js-pdf and js-pdf autotable plugin to latest versions

    • Added support for drag drop grouping from one grid to another

    • Added * @property enableSelectAllOnPageChange @type Boolean @default true - In server mode, if the user selects all and hits page change, this flag will control if the next page of newly loaded records is automatically selected.

    • Added @property enableMaintainSelectionOnSelectAll @type Boolean @default false- In server mode, if this flag is set to true and the user hits select all on a particular page, the grid will maintain the selections made on previous pages. If this flag is set to false, (default) selections on othere pages will be cleared.

    • Added flxConstants.DISABLE_POPUP_BLOCKERS – Message to show when print operation fails because of a popup blocker, instead of crapping out, display a nice friendly error message

    • Added event FlexDataGridEvent.WIDTH_CHANGED = "widthChanged";

    • Added support for exporting footer values

    • Added support for column headers to include the full column group text in the excel/word/html export (Not just the header text of the column, but also the concatenated column group header text)

    • Added support for export and print picker popup views to include full column group text.

    • Added Numeric Range Box Validation

    • Make JSPDF output landscape format and line height

    • Added support for hideHeaderText (when you set this flag to true, the header text is removed – this can be used to disable checkbox headers – so if you want the grid to not allow selectAll)

    • On select of a row, set the text in the entire row to bold – added via a css class - .flexiciousGrid .selectedCell

    • Maintain horizontal and vertical scroll position after a resize or a reorder.

    • Added support to filter by a specific Date instead of a Date Range – If you use Custom and enter the same Date for Start and End it will search on that specific date (from 00:00:00 to 11:59:59 PM).