PDA

View Full Version : [CLOSED] Grid cell tooltip



marco.morreale
Oct 11, 2012, 7:05 AM
Is there a way to set a tooltip for specific columns cell?
Thanks in advance
Marco Morreale

CarWise
Oct 11, 2012, 7:42 AM
Is there a way to set a tooltip for specific columns cell?
Thanks in advance
Marco Morreale

http://examples2.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

Good luck !

Martin

marco.morreale
Oct 11, 2012, 7:55 AM
Thank you Martin,
but that will set tooltip for cells in all columns.

I want to set it just for some columns.

Marco

Daniil
Oct 11, 2012, 11:55 AM
Hi Marco,

Return false from a ToolTip BeforeShow listener to prevent a tip from appearing. Within this listener you can determine a column and, respective, a tip should appear or not.

marco.morreale
Oct 11, 2012, 12:20 PM
Please Daniil, can you provide an example?

I tried this but ToolTip shows with last valid cell content.



<script type="text/javascript">
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 onBeforeShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = store.getAt(rowIndex),
column = view.getHeaderByCell(toolTip.triggerElement),
data = record.get(column.dataIndex);

// I don't want ToolTip for date, decimal. (Format is wrong)
switch (column.dataIndex) {
case "Importo", "DatOrdine", "Quantity":
return false;
break;
default:
toolTip.update(data);
break;
}

};
</script>



M

Daniil
Oct 11, 2012, 3:58 PM
In the example below a ToolTip appears for the second column only.

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)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

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

<script type="text/javascript">
var onBeforeShow = function (toolTip) {
var grid = App.GridPanel1,
view = grid.getView(),
store = grid.getStore(),
column = view.getHeaderByCell(toolTip.triggerElement),
rowIndex,
record,
data;

if (column.dataIndex !== "test2") {
return false;
}

rowIndex = view.findItemByChild(toolTip.triggerElement).viewI ndex,
record = store.getAt(rowIndex);
data = record.get(column.dataIndex)
toolTip.update(data);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>

<ext:ToolTip
runat="server"
Target="={#{GridPanel1}.getView().el}"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<BeforeShow Fn="onBeforeShow" />
</Listeners>
</ext:ToolTip>
</body>
</html>

marco.morreale
Oct 15, 2012, 10:28 AM
Thank you Daniil.
Please, mark as closed.
M

jwhitmire36
Dec 20, 2012, 2:30 PM
Hi Danill,
I'm trying to use this example to only have a tooltip on 1 cell in a grid, but this code is not quite working right. If I initially hover over column 2 I get the tip, then move over to column 3 and it goes away. But if I go Back to column 2 the tip doesn't show, unless I hover off the grid completely then go back to column 2 and it shows up again. It seems like as soon as False is returned from the Listener it get's completely disabled? Hopefully this makes sense.

Thanks,
Jason W

Daniil
Dec 21, 2012, 4:16 AM
Hi Jason,

Welcome to Ext.NET forums!

I am unable to reproduce. Please clarify what Ext.NET sources are you testing with?

jwhitmire36
Dec 21, 2012, 2:18 PM
Danill,
I've been testing with Version 2.0.0 Release, I saw a new version is out so I downloaded 2.1.1 and now the Tooltip is behaving correctly using the new version. Thanks for responding so quickly.

JW