Jul 06, 2015, 12:45 AM
[OPEN] [#828] JavaScript error unhiding TreeGrid headers
Hi,
I'm trying to write a block of code that would hide the TreeGrid headers displaying an "empty" message in the title if no nodes exists. Alternatively, the headers should be back and the title disappear if at least one node is present. I'm getting a JavaScript error. Please review the code snippet below to reproduce the error in IE11.
I'm trying to write a block of code that would hide the TreeGrid headers displaying an "empty" message in the title if no nodes exists. Alternatively, the headers should be back and the title disappear if at least one node is present. I'm getting a JavaScript error. Please review the code snippet below to reproduce the error in IE11.
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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">
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<title>TreeGrid - Ext.NET Examples</title>
<script type="text/javascript">
var addNode = function () {
X.AddNode({
eventMask: { showMask: true },
success: function (result) {
var nodes = eval(result);
if (nodes.length > 0) {
TreeGrid1.initChildren(nodes);
}
else {
TreeGrid1.getRootNode().removeChildren();
}
}
});
};
var deleteNode = function () {
X.DeleteNode({
eventMask: { showMask: true },
success: function (result) {
var nodes = eval(result);
if (nodes.length > 0) {
TreeGrid1.initChildren(nodes);
}
else {
TreeGrid1.getRootNode().removeChildren();
}
}
});
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (ExtNet.IsAjaxRequest) return;
TreeGrid1.HideHeaders = true;
TreeGrid1.Title = "You have no records at this time.";
}
[DirectMethod]
public string AddNode()
{
TreeGrid1.RemoveAll();
TreeGrid1.Root.Add(new Ext.Net.TreeNode { NodeID = "Root", AllowDrag = false });
var rootNode = TreeGrid1.Root.FirstOrDefault(r => r.NodeID.Equals("Root")) as Ext.Net.TreeNode;
rootNode.Nodes.Add(new Ext.Net.TreeNode { NodeID = "Node1", Expanded = true, AllowDrag = false });
var bookNode = rootNode.Nodes.FirstOrDefault(r => r.NodeID.Equals("Node1")) as Ext.Net.TreeNode;
bookNode.CustomAttributes.Add(new ConfigItem { Name = "Record", Value = "First Node", Mode = ParameterMode.Value });
bookNode.CustomAttributes.Add(new ConfigItem { Name = "CreatedOn", Value = "", Mode = ParameterMode.Value });
bookNode.CustomAttributes.Add(new ConfigItem { Name = "UpdatedBy", Value = "", Mode = ParameterMode.Value });
// This statement throws a client error
TreeGrid1.HideHeaders = false;
//TreeGrid1.Title = "";
var nodes = TreeGrid1.Root;
return nodes.ToJson();
}
[DirectMethod]
public string DeleteNode()
{
TreeGrid1.RemoveAll();
var nodes = TreeGrid1.Root;
return nodes.ToJson();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="X" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true">
<Columns>
<ext:TreeGridColumn Header="Record" Width="300" DataIndex="Record" />
<ext:TreeGridColumn Header="Created On" Width="150" DataIndex="CreatedOn" />
<ext:TreeGridColumn Header="Updated By" Width="150" DataIndex="UpdatedBy" />
</Columns>
<BottomBar>
<ext:PagingToolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add" Icon="Add" Width="80">
<Listeners>
<Click Fn="addNode" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Delete" Icon="Delete" Width="80">
<Listeners>
<Click Fn="deleteNode" />
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:TreeGrid>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by fabricio.murta; Jul 14, 2015 at 11:08 PM.