Jul 25, 2018, 2:03 PM
[CLOSED] Hidden GridPanel + Locked Column + ToolTip not working
Hello, I have a trouble working with a Hidden GridPanel + a Locked Column + ToolTip together
The row tooltip's are not displaying if those elements are together
based in this example https://examples4.ext.net/#/Miscella...l_Row_Tooltip/
I added
if I remove the Hidden="true" the tooltips show, or if i remove the Locked="true" the tooltips show too, but together don't show
by boss requeriments we need this properties working together
here is whe example code (we are using ext.net 4.5.1.0)
The row tooltip's are not displaying if those elements are together
based in this example https://examples4.ext.net/#/Miscella...l_Row_Tooltip/
I added
- Hidden="true" property for GridPanel1
- Locked="true" Width="100" for the company Column
- a Button to set DataSource of GridPanel1 and show it
if I remove the Hidden="true" the tooltips show, or if i remove the Locked="true" the tooltips show too, but together don't show
by boss requeriments we need this properties working together
here is whe example code (we are using ext.net 4.5.1.0)
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
}
}
protected void ButtonBuscar_Click(object sender, DirectEventArgs e)
{
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[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
Store1.DataBind();
GridPanel1.Show();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel Row with ToolTip - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<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(),
record = view.getRecord(toolTip.triggerElement),
data = Ext.encode(record.data);
toolTip.update(data);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>GridPanel Row with ToolTip</h1>
<ext:Button ID="ButtonBuscar" runat="server" Icon="Zoom" ToolTip="Buscar" Disabled="false">
<DirectEvents>
<Click OnEvent="ButtonBuscar_Click" />
</DirectEvents>
</ext:Button>
<br />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Hidden="true"
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" Width="100" />
<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}.getView().el}"
Delegate="={#{GridPanel1}.getView().itemSelector}"
TrackMouse="true">
<Listeners>
<Show Handler="onShow(this, #{GridPanel1});" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>
Last edited by fabricio.murta; Jul 27, 2018 at 6:08 AM.
