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)

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. 

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

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:

On Refresh, we will just reload the first child:

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. 

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)