PDA

View Full Version : [CLOSED] GridPanel ToolTip does not fire BeforeShow and Show events when grid.EnableLocking = true



Tarun_Chand
Apr 02, 2013, 1:13 PM
Team,

I have a grid where I have to show the tooltip on GridPanel cells, on mouse over.

So I have added the below code to do that.


ToolTip toolTip = new ToolTip
{
ID = grid.ID + "_ToolTip",
Target = "={#{" + grid.ID + "}.getView().el}",
Delegate = ".x-grid-cell",
//TrackMouse = true,
Closable = true,
AutoHide = false,
Draggable = true,
AutoFocus = true,
MouseOffset = new int[] { -9, -9 }
//Resizable = true,
};

//toolTip.HideMode = HideMode.Display;

toolTip.Listeners.BeforeShow.Handler = "return onBeforeShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
toolTip.Listeners.Show.Handler = "onShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
grid.ToolTips.Add(toolTip);


I have some data to be checked in BeforeShow event which decide whether the tooltip should be given to a cell/not.

This works fine with the grid, but when I enable the Locking property to the grid,



grid.EnableLocking = true;


both the listeners specified for the ToolTip, BeforeShow and Show will not be fired hence I am not able to give the tooltip for the cells.


Please help out if there is anything else which we have to specify for the tooltip when we enable column locking property for the GridPanel.

The Ext.dll version I am using is 2.1

Daniil
Apr 02, 2013, 1:35 PM
Hi Tarun,

You should correct the Target.

The locking grid consists of, actually, two grids.

App.GridPanel1.lockedGrid
App.GridPanel1.normalGrid

Tarun_Chand
Apr 02, 2013, 1:49 PM
Hi Tarun,

You should correct the Target.

The locking grid consists of, actually, two grids.

App.GridPanel1.lockedGrid
App.GridPanel1.normalGrid

Daniil,

Appreciate your quick response, can you please guide me what would be the exact target data which I should specify...

Do I need to specify the target as below ??


ToolTip toolTip = new ToolTip
{
ID = grid.ID + "_ToolTip",
//Target = "={#{" + grid.ID + "}.getView().el}",
Target = "={#{" + grid.ID + "}.normalGrid.getView().el}",
//App.GridPanel1.lockedGrid
//App.GridPanel1.normalGrid
Delegate = ".x-grid-cell",
//TrackMouse = true,
Closable = true,
AutoHide = false,
Draggable = true,
AutoFocus = true,
MouseOffset = new int[] { -9, -9 }
//Resizable = true,
};


I tried this which did not work...!

And can I specify multiple targets for the same tooltip, as now for a single grid I will be having two grids(normalgrid and lockedgrid)


Cheers...

Daniil
Apr 02, 2013, 2:06 PM
There is no way to set up multiple targets.

But I would try to set a Target which would contains the both targets you need.

Target = grid.ClientID

Tarun_Chand
Apr 02, 2013, 2:17 PM
There is no way to set up multiple targets.

But I would try to set a Target which would contains the both targets you need.

Target = grid.ClientID


Daniil,

That helps, the events fire now but I get some javascript error on mouse over, which says Object doesn't support this property or method in BeforeShow event where I read the current row index to read the record, here below is the C# and js code which I have used.

=========== C# ================



ToolTip toolTip = new ToolTip
{
ID = grid.ID + "_ToolTip",
//Target = "={#{" + grid.ID + "}.getView().el}",
//Target = "={#{" + grid.ID + "}.normalGrid.getView().el}",
Target = grid.ClientID,

//App.GridPanel1.lockedGrid
//App.GridPanel1.normalGrid
Delegate = ".x-grid-cell",
//TrackMouse = true,
Closable = true,
AutoHide = false,
Draggable = true,
AutoFocus = true,
MouseOffset = new int[] { -9, -9 }
//Resizable = true,
};

//toolTip.HideMode = HideMode.Display;

toolTip.Listeners.BeforeShow.Handler = "return onBeforeShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
toolTip.Listeners.Show.Handler = "onShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
grid.ToolTips.Add(toolTip);




========== JS Code ==============


var onBeforeShow = function(toolTip, grid) {

var view = grid.getView(),
store = grid.getStore(),

//the below statement yeilds to the error, 'Object doesn't support this property or method'
rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = store.getAt(rowIndex),
column = view.getHeaderByCell(toolTip.triggerElement),
isToolTipToBeShown = false;

if (column !== undefined) {

//checking if the tooltip exists for this cell
//data+'_Tooltip'
var toolTipColumnIndex = column.dataIndex + '_Tooltip';
if (!(record.get(toolTipColumnIndex) == undefined || record.get(toolTipColumnIndex) == null || record.get(toolTipColumnIndex) == '')) {
isToolTipToBeShown = true;
}
}
return isToolTipToBeShown;
};

var onShow = function(toolTip, grid) {
//debugger;
//alert('Testing');
var view = grid.getView();
store = grid.getStore();
rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex;
record = store.getAt(rowIndex);
column = view.getHeaderByCell(toolTip.triggerElement);
if (column !== undefined) {

data = record.get(column.dataIndex);

//checking if the tooltip exists for this cell
//data+'_Tooltip'
var toolTipColumnIndex = column.dataIndex + '_Tooltip';
if (record.get(toolTipColumnIndex) !== undefined && record.get(toolTipColumnIndex) !== null && record.get(toolTipColumnIndex) !== '') {
data = record.get(toolTipColumnIndex);
toolTip.focus();
toolTip.show();
toolTip.update("This is custom Tooltip");
}
}
};



I seek your help to resolve this problem.


Cheers...

Daniil
Apr 02, 2013, 3:17 PM
Please try to replace

rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = store.getAt(rowIndex)
with

record = view.getRecord(view.findItemByChild(toolTip.trigge rElement))

Does it help?

Tarun_Chand
Apr 02, 2013, 3:35 PM
Please try to replace

rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = store.getAt(rowIndex)
with

record = view.getRecord(view.findItemByChild(toolTip.trigge rElement))

Does it help?

Daniil,

I checked this, but no luck, it throws the same error...!
i.e 'Object doesn't support this property or method'. Check this screenshot...5945

=========== Modified JS Code ====================


var onBeforeShow = function(toolTip, grid) {

var view = grid.getView(),
store = grid.getStore(),

//the below statement yeilds to an error
//rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
//record = store.getAt(rowIndex),
column = view.getHeaderByCell(toolTip.triggerElement),
isToolTipToBeShown = false;

if (column !== undefined) {

//checking if the tooltip exists for this cell
//data+'_Tooltip'
var toolTipColumnIndex = column.dataIndex + '_Tooltip';
if (!(record.get(toolTipColumnIndex) == undefined || record.get(toolTipColumnIndex) == null || record.get(toolTipColumnIndex) == '')) {
isToolTipToBeShown = true;
}
}
return isToolTipToBeShown;
};

Daniil
Apr 03, 2013, 5:02 AM
Yes, it requires more modifications. A Show handler can look like this.

var onShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
item = view.lockedView.findItemByChild(toolTip.triggerEle ment) || view.normalView.findItemByChild(toolTip.triggerEle ment),
record = view.getRecord(item),
column = view.lockedView.getHeaderByCell(toolTip.triggerEle ment) || view.normalView.getHeaderByCell(toolTip.triggerEle ment),
data = record.get(column.dataIndex);

toolTip.update(data);
};

Here is a full example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};

this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var onShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
item = view.lockedView.findItemByChild(toolTip.triggerEle ment) || view.normalView.findItemByChild(toolTip.triggerEle ment),
record = view.getRecord(item),
column = view.lockedView.getHeaderByCell(toolTip.triggerEle ment) || view.normalView.getHeaderByCell(toolTip.triggerEle ment),
data = record.get(column.dataIndex);

toolTip.update(data);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Locked="true" />
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" TrackOver="true" />
</View>
</ext:GridPanel>

<ext:ToolTip
runat="server"
Target="GridPanel1"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<Show Handler="onShow(this, #{GridPanel1});" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>

Tarun_Chand
Apr 03, 2013, 11:27 AM
Yes, it requires more modifications. A Show handler can look like this.


Daniil,

You have been wonderful support since the first day, first I appreciate all your efforts.

I tried the sample you posted but it looks like it is breaking, showing a javascript error during page load.
1st screenshot : 5949
2nd screenshot : 5950

But I modified my existing code as below which works well...

============= JS Code ================


var onBeforeShow = function(toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),

//added below lines of code, which made the code working.
item = view.lockedView.findItemByChild(toolTip.triggerEle ment) || view.normalView.findItemByChild(toolTip.triggerEle ment),
record = view.getRecord(item),
column = view.lockedView.getHeaderByCell(toolTip.triggerEle ment) || view.normalView.getHeaderByCell(toolTip.triggerEle ment),

isToolTipToBeShown = false;
if (column !== undefined) {

//checking if the tooltip exists for this cell
//data+'_Tooltip'
var toolTipColumnIndex = column.dataIndex + '_Tooltip';
if (!(record.get(toolTipColumnIndex) == undefined || record.get(toolTipColumnIndex) == null || record.get(toolTipColumnIndex) == '')) {
isToolTipToBeShown = true;
}
}
return isToolTipToBeShown;
};

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


================== C# ================================================== =


ToolTip toolTip = new ToolTip
{
ID = grid.ID + "_ToolTip",
//Target = "={#{" + grid.ID + "}.getView().el}",
//Target = "={#{" + grid.ID + "}.normalGrid.getView().el}",

//changed the target as below
Target = grid.ClientID,

Delegate = ".x-grid-cell",
Closable = true,
AutoHide = false,
Draggable = true,
AutoFocus = true,
MouseOffset = new int[] { -9, -9 }
};

toolTip.Listeners.BeforeShow.Handler = "return onBeforeShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
toolTip.Listeners.Show.Handler = "onShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
grid.ToolTips.Add(toolTip);

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


This code is working without any problem, thanks again Daniil.

You can mark this thread as closed.

Cheers...

Daniil
Apr 03, 2013, 11:57 AM
Thank you for your appreciation!




I tried the sample you posted but it looks like it is breaking, showing a javascript error during page load.
1st screenshot : 5949
2nd screenshot : 5950



Please clarify does exactly my example throw that error or when you applied it in your real page?

Tarun_Chand
Apr 03, 2013, 7:53 PM
Thank you for your appreciation!



Please clarify does exactly my example throw that error or when you applied it in your real page?


Daniil,

I copied the sample you gave to a new .aspx file and tried, it's the exact code. But anyways, the code I have modified, which I posted in my previous reply works for me...

The following data might be useful,

IE Version: 8.0
Ext Version : 2.1


Cheers...

Daniil
Apr 04, 2013, 5:49 AM
Ext Version : 2.1


This is a key point. I missed it. If you upgrade to v2.2 you will need to apply the changes which is in my code.