PDA

View Full Version : [CLOSED] After I added the SelectionModel to the TreePanel, the deselect does NOT work anymore...



Fahd
Aug 02, 2012, 7:19 PM
In the TreePanel, I set up the property AllowDeselect="true" and when I added to code below, it does not work anymore...



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




<%@ 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 & 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>
<br />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
AllowDeselect="true" Title="Downtimes" AutoScroll="true" Animate="true" AnimCollapse="true"
TabIndex="1">
<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>
<SelectionModel>
<ext:TreeSelectionModel runat="server" />
</SelectionModel>
</ext:TreePanel>
</form>
</body>
</html>

Daniil
Aug 02, 2012, 8:31 PM
Hi,

In that case you should define AllowDeselect for the TreeSelectionModel.

<ext:TreeSelectionModel runat="server" AllowDeselect="true" />

Fahd
Aug 02, 2012, 9:21 PM
I added the code below so when the user Select & Deselect it update the Status Bar, it works for this part, I have to add a 'Delay="500" ' to get it to work


<Deselect Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>NONE</b>', clear: false})};" Delay="500" />


But if the user selects another item in the List while ONE is checked, it displays 'NONE' in my Status Bar.
How can I get this to behave correctly??

I there a method name, "record.isDeselect" or something like that I can you?

Any ideas??




<%@ 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 & 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>
<br />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="450" Icon="Lorry"
Title="Downtimes" AutoScroll="true" Animate="true" AnimCollapse="true" TabIndex="1">
<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" 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();" />
<Deselect Handler="if(record.isLeaf()){#{StatusBar1}.setStatus({text: 'Downtime Selected: <b>NONE</b>', clear: false})};" Delay="500" />
</Listeners>
<SelectionModel>
<ext:TreeSelectionModel runat="server" AllowDeselect="true" />
</SelectionModel>
</ext:TreePanel>
</form>
</body>
</html>



Hi,

In that case you should define AllowDeselect for the TreeSelectionModel.

<ext:TreeSelectionModel runat="server" AllowDeselect="true" />

Daniil
Aug 03, 2012, 11:45 AM
I would implement it this way.

Example

<Listeners>
<AfterRender Handler="#{TreePanel1}.expandAll();" />
<BeforeSelect Handler="return record.isLeaf();" />
<SelectionChange Handler="var tpl = 'Downtime Selected: <b>{0}</b>',
msg = 'NONE';

if (selected.length > 0) {
msg = selected[0].get('text')
}
#{StatusBar1}.setStatus(Ext.String.format(tpl, msg));" />
</Listeners>

Fahd
Aug 08, 2012, 7:28 PM
Thanks, it works great.

I would have never figure out that I can do it this way...


I would implement it this way.
Example

<Listeners>
<AfterRender Handler="#{TreePanel1}.expandAll();" />
<BeforeSelect Handler="return record.isLeaf();" />
<SelectionChange Handler="var tpl = 'Downtime Selected: <b>{0}</b>',
msg = 'NONE';

if (selected.length > 0) {
msg = selected[0].get('text')
}
#{StatusBar1}.setStatus(Ext.String.format(tpl, msg));" />
</Listeners>