PDA

View Full Version : ToolTip not loading on a grid row- URGENT NEED



Sai Dasika
19 Feb 2010, 1:38 AM
Hi,
I need a tooltip for my project which shows a individual row on mouse over,But tooltip is not loading.

I read many articles but couldn't find the solution

my code:
grid.on('mouseover',function(e,t)
{

var idx = grid.getView().findRowIndex(e.target);
var row = this.getStore().getAt(idx);
var rowID = row.id;
var Connection = new Ext.data.Connection();
Connection.request({
url: 'Handler.ashx',

method: 'post',
success: function(o)
{

Tooltip = new Ext.ToolTip({

target:this.view.mainBody,
title: 'Events',
autoHide: true,
showDelay:60,
hideDelay:0,
autoHeight:true,
width:400,
html: o.responseText
})

},
params:
{
get_data: 'toolTip',
get_id: rowID,
docRevId:docId
}
});
Tooltip.show();
});
handler .ashx is writing the following string as responce:

{success:true,o:<table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>}

Thanq,
Sai Dasika

tobiu
19 Feb 2010, 2:35 AM
a not shown tooltip is "URGENT"? *lol*

a closer look to the api of tooltip (delegate) shows this example:



var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.

var view = grid.getView(); // Capture the GridView.

myGrid.tip = new Ext.ToolTip({
target: view.mainBody, // The overall target element.

delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.

trackMouse: true, // Moving within the row should not hide the tip.

renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.

listeners: { // Change content dynamically depending on which element triggered the show.

beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
}
}
});
});


if you use the advanced forum-search for "grid tooltip" with titles only, you can find it quite fast.

kind regards,
tobiu

Eugen_
19 Feb 2010, 3:16 AM
ready to use

http://www.extjs.com/forum/showthread.php?p=436283#post436283

Sai Dasika
19 Feb 2010, 6:15 AM
Hi,
thanq Eugen,tobiu.
what i need is through a ajax request.I want it something like this

grid.on('mouseover',function(e,t)
{
if(grid.getView().findRowIndex(e.target)!=null)
{
var idx = grid.getView().findRowIndex(e.target);

var row = this.getStore().getAt(idx);
var rowID = row.id;
var Connection = new Ext.data.Connection();
Connection.request({
url: 'VersionHandler.ashx',

method: 'post',
success: function(object)
{


Ext.QuickTips.init(); //i am modifying the object and which should come in tooltip



Ext.apply(Ext.QuickTips.getQuickTip(), {
width: 200,


trackMouse: true,
text:object.responseText,
title:'Events'
});

},
params:
{
get_data: 'toolTip',
get_id: rowID,
docRevId:docRevId
}
});

}
});
return grid;

Eugen_
19 Feb 2010, 6:29 AM
Hi,
thanq Eugen,tobiu.
what i need is through a ajax request.I want it something like this

Why you don't want load a tooltip text in your grid store a priori?

Sai Dasika
19 Feb 2010, 6:31 AM
Hi,
I want the tooltip to have a tabular format with some styles and fonts,so i am trying to make it at a handler and trying to return it.

The tooltip is not visible on the screen.Please help me out.
Thanx,
Sai Dasika

Eugen_
19 Feb 2010, 6:41 AM
Hi,
I want the tooltip to have a tabular format with some styles and fonts,so i am trying to make it at a handler and trying to return it.

You can generate tooltip text:



<table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>


on the server side when you generate content for your grid store and put this text as additional field in the grid store.

For styles and fonts try to use css.

Sai Dasika
19 Feb 2010, 6:46 AM
You can generate tooltip text:



<table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>
on the server side when you generate content for your grid store and put this text as additional field in the grid store.

For styles and fonts try to use css.

We already have a long grid load time at the start due to many records.So,we want it to have a ajax request.We also have multiple grid refreshes..So,automatically this is the only option we were left with.

Please give some help to make tooltip visible.The object is getting returned in the correct form.So we want the tooltip to display.

rbastic
19 Feb 2010, 7:55 AM
#1: Use a PagingToolbar in combination with your grid to reduce the number of records loaded at once. You'll want to implement server-side paging as well so that the grid is only displaying something like 5-50 records at a time. Respond with a request for sample PagingToolbar code and I will provide some.

#2: If you're using something like PHP, or JSP, you should be able to get the necessary tooltips for the grid when the screen is loading, rather than as an AJAX request. Creating additional AJAX requests when unnecessary is always a performance issue. (Unless there's something I'm missing here, and you need to do it this way.)

Sai Dasika
19 Feb 2010, 7:59 AM
#1: Use a PagingToolbar in combination with your grid to reduce the number of records loaded at once. You'll want to implement server-side paging as well so that the grid is only displaying something like 5-50 records at a time. Respond with a request for sample PagingToolbar code and I will provide some.

#2: If you're using something like PHP, or JSP, you should be able to get the necessary tooltips for the grid when the screen is loading, rather than as an AJAX request. Creating additional AJAX requests when unnecessary is always a performance issue. (Unless there's something I'm missing here, and you need to do it this way.)


Everything is fine but the only problem is tooltip is not visible on the row.help needed to make tooltip visible.

Sai Dasika
19 Feb 2010, 9:54 AM
All,
thanx for helpting me.
I found the solution finally...posting it so that anyone like me can get it done.

grid.on('mouseover', function(e,t) {
var store = grid.getStore(); // Capture the Store.

var view = grid.getView(); // Capture the GridView.
var idx = view.findRowIndex(e.target);

var row = store.getAt(idx);
var rowID = row.id;
Ext.Ajax.request({

url: 'Handler.ashx',

method: 'post',
success: function(object)
{
grid.tip = new Ext.ToolTip({
target: view.mainBody,

delegate: '.x-grid3-row',

trackMouse: true,

renderTo: document.body, referenced prior to the first show.

animate:true,
listeners: {

beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
tip.body.dom.innerHTML = object.responseText;

}
}

});
},
params:
{
get_data: 'toolTip',
get_id: rowID,
docRevId:docRevId
}

});

});

Thanks,
Sai Dasika