PDA

View Full Version : [CLOSED] How would I selected an item in TreePanel from the codebehind ???



Fahd
Jul 25, 2012, 7:03 PM
Your example online.

http://examples2.ext.net/#/TreePanel/Basic/Built_in_CodeBehind/ (http://examples2.ext.net/#/TreePanel/Basic/Built_in_CodeBehind/)

Daniil
Jul 25, 2012, 7:13 PM
Hi,

1. Initially.

Please handle the TreePanel ViewReady event and the client side select method of the selection model.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.selection.Model-method-select)

2. During DirectEvent/DirectMethod.

Please use the SelectionModel Select method.

TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);

Fahd
Jul 25, 2012, 9:40 PM
I'm not too familiar with this TreePanel control. I have created a sample where I need your help just to highlight any child item.

In Page Load I commented out your Line of Code, can you help there?

// NOTE: Need help here... (If I need to select the node 'Insufficient Workers' ReasonId = 6, how would I do it)
//TreePanel1.GetSelectionModel().Select(id, index, node);




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

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

protected void Page_Load(object sender, EventArgs e)
{
var root = new Node
{
Text = "Downtime",
Icon = Icon.TimeRed,
Expanded = true
};
TreePanel1.Root.Add(root);

var downtimes = GetData();

foreach (var downtime in downtimes)
{
var downtimeNode = new Node()
{
Text = downtime.Type.ToString(),
Icon = Icon.WrenchOrange
};
root.Children.Add(downtimeNode);

foreach (var reason in downtime.Reason)
{
var reasonNode = new Node()
{
NodeID = @"_" + reason.ReasonId,
Text = reason.Description,
Icon = Icon.Wrench,
Leaf = true
};
downtimeNode.Children.Add(reasonNode);
}
}

// NOTE: Need help here... (If I need to select the node 'Insufficient Workers' ReasonId = 6, how would I do it)
//TreePanel1.GetSelectionModel().Select(id, index, node);
}


public List<DownTime> GetData()
{
var mechanical = new DownTime(DowntimeType.Mechanical);
var scheduled = new DownTime(DowntimeType.Scheduled);
var production = new DownTime(DowntimeType.Production);
var electrical = new DownTime(DowntimeType.Electrical);
var labor = new DownTime(DowntimeType.Labor);

mechanical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Line Failure",
ReasonId = Convert.ToString(1)
},
new Reason
{
Description = "Maintenance",
ReasonId = Convert.ToString(2)
}
});


scheduled.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Meeting",
ReasonId = Convert.ToString(3)
}
});

production.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Order Change",
ReasonId = Convert.ToString(4)
}
});

electrical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Power Outage",
ReasonId = Convert.ToString(5)
}
});

labor.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Insufficient Workers",
ReasonId = Convert.ToString(6)
}
});


return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
}


public class DownTime
{
public DownTime() { }

public DownTime(DowntimeType type)
{
this.Type = type;
}

public DowntimeType Type { get; set; }

private List<Reason> reason;
public List<Reason> Reason
{
get
{
if (this.reason == null)
{
this.reason = new List<Reason>();
}
return this.reason;
}
}
}

public class Reason
{
public Reason() { }

public Reason(string description, string reasonId)
{
this.Description = description;
this.ReasonId = reasonId;
}

public string Description { get; set; }
public string ReasonId { get; set; }
}

public enum DowntimeType
{
Mechanical,
Scheduled,
Production,
Electrical,
Labor
}

</script>
<!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 id="Head1" runat="server">
<title>Multi Node TreePanel built using markup - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Multi Node TreePanel built using markup & Code Behind</h1>
<br />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
Title="Downtimes" AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
<BeforeSelect Handler="return record.isLeaf();" />
<AfterRender Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:TreePanel>
</form>
</body>
</html>



Hi,

1. Initially.

Please handle the TreePanel ViewReady event and the client side select method of the selection model.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.selection.Model-method-select)

2. During DirectEvent/DirectMethod.

Please use the SelectionModel Select method.

TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);

Daniil
Jul 26, 2012, 9:25 AM
Following this recommendation.



1. Initially.

Please handle the TreePanel ViewReady event and the client side select method of the selection model.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-select (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.selection.Model-method-select)


Example

TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById('_6'));";

Fahd
Jul 26, 2012, 3:03 PM
That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

Can that be resolved? I looked in both IE8 & Firefox, same issue...


Following this recommendation.



Example

TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById('_6'));";

Fahd
Jul 26, 2012, 3:21 PM
Sample below:



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

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

protected void Page_Load(object sender, EventArgs e)
{
var root = new Node
{
Text = "Downtime",
Icon = Icon.TimeRed,
Expanded = true
};
TreePanel1.Root.Add(root);

var downtimes = GetData();

foreach (var downtime in downtimes)
{
var downtimeNode = new Node()
{
Text = downtime.Type.ToString(),
Icon = Icon.WrenchOrange
};
root.Children.Add(downtimeNode);

foreach (var reason in downtime.Reason)
{
var reasonNode = new Node()
{
NodeID = @"_" + reason.ReasonId,
Text = reason.Description,
Icon = Icon.Wrench,
Leaf = true
};
downtimeNode.Children.Add(reasonNode);
}
}

//TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById('_6'));";
}


protected void Select(object sender, DirectEventArgs e)
{
TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById('_6'));";
//TreePanel1.UpdateLayout();
}

public List<DownTime> GetData()
{
var mechanical = new DownTime(DowntimeType.Mechanical);
var scheduled = new DownTime(DowntimeType.Scheduled);
var production = new DownTime(DowntimeType.Production);
var electrical = new DownTime(DowntimeType.Electrical);
var labor = new DownTime(DowntimeType.Labor);

mechanical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Line Failure",
ReasonId = Convert.ToString(1)
},
new Reason
{
Description = "Maintenance",
ReasonId = Convert.ToString(2)
}
});


scheduled.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Meeting",
ReasonId = Convert.ToString(3)
}
});

production.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Order Change",
ReasonId = Convert.ToString(4)
}
});

electrical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Power Outage",
ReasonId = Convert.ToString(5)
}
});

labor.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Insufficient Workers",
ReasonId = Convert.ToString(6)
}
});


return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
}


public class DownTime
{
public DownTime() { }

public DownTime(DowntimeType type)
{
this.Type = type;
}

public DowntimeType Type { get; set; }

private List<Reason> reason;
public List<Reason> Reason
{
get
{
if (this.reason == null)
{
this.reason = new List<Reason>();
}
return this.reason;
}
}
}

public class Reason
{
public Reason() { }

public Reason(string description, string reasonId)
{
this.Description = description;
this.ReasonId = reasonId;
}

public string Description { get; set; }
public string ReasonId { get; set; }
}

public enum DowntimeType
{
Mechanical,
Scheduled,
Production,
Electrical,
Labor
}

</script>
<!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 id="Head1" runat="server">
<title>Multi Node TreePanel built using markup & Code Behind - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Multi Node TreePanel built using markup & Code Behind</h1>
<ext:Button ID="Button1" runat="server" OnDirectClick="Select" Text="Select" />
<br />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
Title="Downtimes" AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
<BeforeSelect Handler="return record.isLeaf();" />
<AfterRender Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:TreePanel>
</form>
</body>
</html>




That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

Can that be resolved? I looked in both IE8 & Firefox, same issue...

Daniil
Jul 26, 2012, 3:35 PM
That works perfectly, but I notice my Status Bar doesn't show when the page first loads up.

Can that be resolved? I looked in both IE8 & Firefox, same issue...

Because there are no Items and no Height. Please add any item or set up Height explicitly.


Actually it DOES NOT work on a DirectEvent Method...

Setting up Listeners when a widget is already rendered doesn't affect on client.

Probably, you have missed the following comment.


2. During DirectEvent/DirectMethod.

Please use the SelectionModel Select method.

TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);

Fahd
Jul 26, 2012, 4:12 PM
First issue, I set up the Height explicity but when the Page first loads up, it doesn't show any text in my Status bar because my listener won't get fired until I actually click an item, How can I show the selected item either on Page Load or on a Direct Event ?? I would prefer on a Direct Event.

Secondly, when I try your example from the code below, I get an error:
Error: "Object reference not set to an instance of an object."



//TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);

protected void Select(object sender, DirectEventArgs e)
{
// NOTE: Should highlight 'Power Outage'
TreePanel1.GetSelectionModel().Select(5);
}


My Sample:


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

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

protected void Page_Load(object sender, EventArgs e)
{
var root = new Node
{
Text = "Downtime",
Icon = Icon.TimeRed,
Expanded = true
};
TreePanel1.Root.Add(root);

var downtimes = GetData();

foreach (var downtime in downtimes)
{
var downtimeNode = new Node()
{
Text = downtime.Type.ToString(),
Icon = Icon.WrenchOrange
};
root.Children.Add(downtimeNode);

foreach (var reason in downtime.Reason)
{
var reasonNode = new Node()
{
NodeID = reason.ReasonId,
Text = reason.Description,
Icon = Icon.Wrench,
Leaf = true
};
downtimeNode.Children.Add(reasonNode);
}
}
TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById(6));";
}


protected void Select(object sender, DirectEventArgs e)
{
// NOTE: Should highlight 'Power Outage'
TreePanel1.GetSelectionModel().Select(5);
}

public List<DownTime> GetData()
{
var mechanical = new DownTime(DowntimeType.Mechanical);
var scheduled = new DownTime(DowntimeType.Scheduled);
var production = new DownTime(DowntimeType.Production);
var electrical = new DownTime(DowntimeType.Electrical);
var labor = new DownTime(DowntimeType.Labor);

mechanical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Line Failure",
ReasonId = Convert.ToString(1)
},
new Reason
{
Description = "Maintenance",
ReasonId = Convert.ToString(2)
}
});


scheduled.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Meeting",
ReasonId = Convert.ToString(3)
}
});

production.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Order Change",
ReasonId = Convert.ToString(4)
}
});

electrical.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Power Outage",
ReasonId = Convert.ToString(5)
}
});

labor.Reason.AddRange(new List<Reason>
{
new Reason
{
Description = "Insufficient Workers",
ReasonId = Convert.ToString(6)
}
});


return new List<DownTime> { electrical, labor, mechanical, production, scheduled };
}


public class DownTime
{
public DownTime() { }

public DownTime(DowntimeType type)
{
this.Type = type;
}

public DowntimeType Type { get; set; }

private List<Reason> reason;
public List<Reason> Reason
{
get
{
if (this.reason == null)
{
this.reason = new List<Reason>();
}
return this.reason;
}
}
}

public class Reason
{
public Reason() { }

public Reason(string description, string reasonId)
{
this.Description = description;
this.ReasonId = reasonId;
}

public string Description { get; set; }
public string ReasonId { get; set; }
}

public enum DowntimeType
{
Mechanical,
Scheduled,
Production,
Electrical,
Labor
}

</script>
<!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 id="Head1" runat="server">
<title>Multi Node TreePanel built using markup & Code Behind - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
Multi Node TreePanel built using markup & Code Behind</h1>
<ext:Button ID="Button1" runat="server" OnDirectClick="Select" Text="Select" />
<br />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
Title="Downtimes" AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" Height="20" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>' + record.data.text + '</b>', clear: false})};" />
<BeforeSelect Handler="return record.isLeaf();" />
<AfterRender Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:TreePanel>
</form>
</body>
</html>



Because there are no Items and no Height. Please add any item or set up Height explicitly.



Setting up Listeners when a widget is already rendered doesn't affect on client.

Probably, you have missed the following comment.

Daniil
Jul 26, 2012, 4:38 PM
First issue, I set up the Height explicity but when the Page first loads up, it doesn't show any text in my Status bar because my listener won't get fired until I actually click an item, How can I show the selected item either on Page Load or on a Direct Event ?? I would prefer on a Direct Event.


Just set up the StatusBar Text property.



Secondly, when I try your example from the code below, I get an error:
Error: "Object reference not set to an instance of an object."



//TreePanel1.GetSelectionModel().Select(id | index | ModelProxy | etc.);

protected void Select(object sender, DirectEventArgs e)
{
// NOTE: Should highlight 'Power Outage'
TreePanel1.GetSelectionModel().Select(5);
}



Please apply these changes.

1. Define a SelectionModel for the TreePanel.

<SelectionModel>
<ext:TreeSelectionModel runat="server" />
</SelectionModel>

2. Add a Delay here:

TreePanel1.Listeners.ViewReady.Handler = "this.getSelectionModel().select(this.getStore().ge tNodeById(6));";
TreePanel1.Listeners.ViewReady.Delay = 100;

Because the ViewReady event is fired before you expands nodes here:

<AfterRender Handler="#{TreePanel1}.expandAll();" />

Generally, it would be best to select a node within a expandAll callback.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-method-expandAll

3. Regarding this.

// NOTE: Should highlight 'Power Outage'
TreePanel1.GetSelectionModel().Select(5);

The "Power Outage" node is 2 (zero-based). So, you should call:

TreePanel1.GetSelectionModel().Select(5);
to select this node.

Fahd
Jul 26, 2012, 4:52 PM
You meant

TreePanel1.GetSelectionModel().Select(2);

Anyway it works, but when I call the code above from the DirectEvent, my Status Bar does not get updated with the updated selection.



3. Regarding this.

// NOTE: Should highlight 'Power Outage'
TreePanel1.GetSelectionModel().Select(5);

The "Power Outage" node is 2 (zero-based). So, you should call:

TreePanel1.GetSelectionModel().Select(5);
to select this node.

Daniil
Jul 26, 2012, 11:30 PM
Anyway it works, but when I call the code above from the DirectEvent, my Status Bar does not get updated with the updated selection.

Well, because ItemClick event doesn't occur when you programmatically select an item. You should use the server side StatusBar SetStatus method.

Fahd
Jul 27, 2012, 3:22 PM
That works, thanks....


Well, because ItemClick event doesn't occur when you programmatically select an item. You should use the server side StatusBar SetStatus method.