PDA

View Full Version : TreeGrid column header tooltip



Spamme
Feb 20, 2012, 8:02 AM
Can be added to the TreeGrid column header a tooltip like in the GridPanel?

Thanks



<TreeGrid>
<TreeGridColumn Header="T" Tooltip="This property is missing but it would be useful for smaller columns with a long header" />
</TreeGrid>

Daniil
Feb 20, 2012, 11:02 AM
Hi,

Yes, there is no such functionality and it would be good to have it.

For now, I can suggest the following solution.

Example

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>

<script type="text/javascript">
var onBeforeShow = function (toolTip, treeGrid) {
var id = toolTip.triggerElement.id,
index = id.substr(id.length - 1),
toolTipText = treeGrid.toolTips[index - 1];

if (toolTipText !== null) {
toolTip.body.update(toolTipText);
} else {
return false;
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Handler="ToolTip1.render(Ext.getBody());" />
</Listeners>
</ext:ResourceManager>
<ext:TreeGrid ID="TreeGrid1" runat="server" AutoHeight="true">
<Columns>
<ext:TreeGridColumn Header="Text" DataIndex="text" Width="100" />
<ext:TreeGridColumn Header="Test1" DataIndex="test1" Width="100" />
<ext:TreeGridColumn Header="Test2" DataIndex="test2" Width="100" />
</Columns>
<Root>
<ext:TreeNode>
<Nodes>
<ext:TreeNode Text="Node1">
<CustomAttributes>
<ext:ConfigItem Name="test1" Value="node1_test1" Mode="Value" />
<ext:ConfigItem Name="test2" Value="node1_test2" Mode="Value" />
</CustomAttributes>
<Nodes>
<ext:TreeNode Text="Node1.1">
<CustomAttributes>
<ext:ConfigItem Name="test1" Value="node1.1_test1" Mode="Value" />
<ext:ConfigItem Name="test2" Value="node1.1_test2" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<CustomConfig>
<ext:ConfigItem Name="toolTips" Value="['column1', null, 'column3']" Mode="Raw" />
</CustomConfig>
</ext:TreeGrid>
<ext:ToolTip
ID="ToolTip1"
runat="server"
Target="TreeGrid1.innerHd"
Delegate=".x-treegrid-hd">
<Listeners>
<BeforeShow Handler="return onBeforeShow(this, TreeGrid1);" />
</Listeners>
</ext:ToolTip>
</form>
</body>
</html>


We will consider to implement this functionality in Ext.NET v2.