PDA

View Full Version : [CLOSED] [#671] Grid cell's tooltip



RCN
Jan 27, 2015, 1:03 PM
On version 2.x, grid cell's tooltip works as expected: http://examples2.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

But on version 3.1, at revision 6281, it doesn't. Its possible to reproduce the issue on: http://examples.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

Thanks in advance

RCN
Jan 27, 2015, 1:16 PM
Going further, when tooltip is placed inside grid's bin, the layout breaks. On version 2.x, everything works as expected.


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var onShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
data = record.get(column.dataIndex);

toolTip.update(data);
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500" Height="500">
<Store>
<ext:Store AutoLoad="true" ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="LastName" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
<ext:Column Text="Last Name" DataIndex="LastName" runat="server" />
<ext:Column Text="Address" DataIndex="Address" runat="server" />
</Columns>
</ColumnModel>
<Bin>
<ext:ToolTip
runat="server"
Target="={#{_grd}.getView().el}"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<Show Handler="onShow(this, #{_grd});" />
</Listeners>
</ext:ToolTip>
</Bin>
</ext:GridPanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeRecords()
{
List<Entity> lst = new List<Entity>();

for (int index = 0; index < 15; index++)
{
lst.Add(new Entity
{
ID = index,
Name = string.Format("Name - {0}", index),
LastName = string.Format("Last Name - {0}", index),
Address = string.Format("Address - {0}", index)
});
}

return new StoreResult(lst, lst.Count());
}
}

[Serializable]
public class Entity
{
public int ID { get; set; }

public string Name { get; set; }

public string LastName { get; set; }

public string Address { get; set; }
}
}

Dimitris
Jan 27, 2015, 1:24 PM
Just to add that a javascript error occurs:


SyntaxError: An invalid or illegal string was specified

RCN
Jan 27, 2015, 1:47 PM
Just to add that a javascript error occurs:

SyntaxError: An invalid or illegal string was specified

Mimisss, can you give me more details?

RCN
Jan 27, 2015, 1:47 PM
I got the following error:

19561

Dimitris
Jan 27, 2015, 2:02 PM
In both tooltip examples (grid cell and row) error


SyntaxError: An invalid or illegal string was specified

is shown.

That's why the tooltip is not showing up, probably.

-- Edit:

Did some digging... the javascript error seems to boil down to


"Invalid id selector: "App.GridPanel1.getView().el""

so I set GridView's ID and used it in the tooltip's Target property and it works.



...
<View>
<ext:GridView runat="server" ID="GridView1" />
</View>
...

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

Can you confirm?

RCN
Jan 27, 2015, 2:40 PM
I was not able to reproduce on version 3.1, at revision 6281.

Can you tell me the class name and method name where this error was thrown?

Going further, can you try the following?


<ext:ToolTip
runat="server"
Target="App._grd.getView().el"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<Show Handler="onShow(this, App._grd);" />
</Listeners>
</ext:ToolTip>

Dimitris
Jan 27, 2015, 3:10 PM
Let me clarify that I am referring to the tooltip online examples (and not your code).

Your suggestion does not work either.

The only way I've managed to make the tooltip work property without causing the "Invalid id selector: "App.GridPanel1.getView().el"" error (which I think is the reason why the tooltips are not working properly as you've reported in your original post) is by setting the GridView's ID as the value of the Tooltip's Target property. Didn't it work for you?

RCN
Jan 27, 2015, 3:21 PM
I got it. Let's gonna wait a position from Daniil.

Daniil
Feb 03, 2015, 6:37 PM
Hello everybody,

Created an Issue:
https://github.com/extnet/Ext.NET/issues/671

It has been fixed in the revision #6299 (trunk). It goes to 3.1.0 beta.

As for the scenario with putting a ToolTip into a GridPanel's Bin. Yes, it works with Ext.NET v2, but it was kind of hacky behavior. The ToolTip is created and the target is assigned before rendering on that target. So, a null target is assigned to the ToolTip. To get it working I would suggest you the following.

1. Remove the ToolTip's Target.
2. Set this for the GridPanel.

<Listeners>
<AfterRender Handler="this.getBinComponent(0).setTarget(this.getView().e l);" />
</Listeners>

RCN
Feb 03, 2015, 7:48 PM
Thank you Daniil. I am gonna review.

RCN
Feb 04, 2015, 4:30 PM
I confirm that it's working as expected.

Once again, thank you Daniil.