View Full Version : Datatip for Grid column and dynamic datatip

18 Oct 2010, 3:01 AM
After going through the following thread and using it in my application, I am able to configure the datatip for grid rows.

However, I have couple of questions and any kind of help will be greatful.
1. How can I configure the datatip for grid row cells?
2. How can I bind a server side method (using directJNgine) to load any data in the datatip?

18 Oct 2010, 5:31 AM
1. Change 'rowSelector' to 'cellSelector' in the beforeGridTipShow event handler registration. Next, change beforeGridTipShow to locate both the cell and the row (and record and field).

2. updateTip currently does a tip.update(data), which you would have to change in a tip.load({params: {...}}).

18 Oct 2010, 9:44 PM
Can you please give an example how to locate both cell and row in beforeGridTipShow method? as currently it is accessing the rec.data. How can i define each cell's seperate tip?
can you give me an example for how to load from server side method in tip.load()? Can I provide the directFn here?

18 Oct 2010, 10:38 PM
1. Example:

} else if (host instanceof Ext.grid.GridPanel) {
this.delegate = this.delegate || host.getView().cellSelector;
this.on('beforeshow', beforeGridTipShow);
} else if (host instanceof Ext.DataView) {

function beforeGridTipShow(tip) {
var rowIndex = grid.getView().findRowIndex(tip.triggerElement);
if (rowIndex !== false) {
var colIndex = grid.getView().findCellIndex(tip.triggerElement);
if (colIndex !== false) {
var record = grid.getStore().getAt(rowIndex),
dataIndex = grid.getColumnModel().getDataIndex(colIndex),
value = record.get(dataIndex);
updateTip(tip, {
rowIndex: rowIndex,
colIndex: colIndex,
record: record,
dataIndex: dataIndex,
value: value
2. No, you would have to call directFn yourself and in the callback update the tip body.

18 Oct 2010, 10:49 PM
Thanks condor. How can this be used in the datatip plugin config. As currently I have used it like this:

plugins: new Ext.ux.DataTip({
tpl: '<div>{attributeName}</div>'

How each column will have its own tooltip defined?

18 Oct 2010, 10:55 PM
After applying the changes I posted above you could use:

tpl: '<div>({rowIndex},{colIndex}) = {value}</div>'
(not very useful though)

What kind of tooltip do you actually want?

18 Oct 2010, 11:04 PM
The above code will only show the same column text in the tooltip.
I want to show different tooltips for different columns. How can I achieve this? Is it possible? What will be the configuration?

What if I want to load the data on the fly to show the underlying property details?
Basically I have a table which have a patientId column. I want when the user hover to that patientId column, I will be able to load its data from the directFn.

19 Oct 2010, 12:16 AM
Use a beforeshowtip handler on the GridPanel to poke around with the tip's contents, or even veto the show if you want.

20 Oct 2010, 3:31 AM
beforeshowtip of GridPanel is not fired so i used the beforeshow event of DataTip. But I am not been able to update the content of tip. Can you please give an example to do that?

Another question

tpl: '<div class="tooltipDiv">{record.data}</div>',
when i use the above config then following js error arises:
record is not defined
[Break on this error] eval(body);

Can anybody tell me the reason for this?

20 Oct 2010, 10:11 PM
Can anybody help me?