PDA

View Full Version : [CLOSED] How can I Create Dynamic Tree Panel?



mis@adphk.com
Jan 15, 2013, 7:09 AM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmTest.aspx.cs" Inherits="prjAllCo.test.frmTest" %>
<%@ Import Namespace="System"%>
<%@ Import Namespace="System.Data.SqlClient"%>

<!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></title>
<script type="text/javascript">
var getValues = function (tree) {
var msg = [],
selNodes = tree.getChecked();


Ext.each(selNodes, function (node) {
msg.push(node.data.id);
});
return msg.join(",");
};

var getText = function (tree) {
var msg = [],
selNodes = tree.getChecked();
msg.push("[");

Ext.each(selNodes, function (node) {
if (msg.length > 1) {
msg.push(",");
}

msg.push(node.data.text);
});

msg.push("]");

return msg.join("");
};

var syncValue = function (value) {
var tree = this.component;

var ids = value.split(",");
tree.setChecked({ ids: ids, silent: true });

tree.getSelectionModel().deselectAll();
Ext.each(ids, function (id) {
var node = tree.store.getNodeById(id);

if (node) {
tree.getSelectionModel().select(node, true);
}
}, this);
};
</script>

</head>
<body>
<form id="form1" runat="server">
<div>

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<br />
<ext:DropDownField ID="prodGroup" runat="server" UnderlyingValue="*" Text="Select Product Groups" Width="300" Mode="ValueText" TriggerIcon="SimpleArrowDown">
<Component>
<ext:TreePanel runat="server" Title="All of product groups" Icon="Accept" Height="300" UseArrows="true" AutoScroll="true" Animate="true" Enabled="true" RootVisible="false">
<Root>
<ext:Node>
<Children>
<ext:Node NodeID="Item12" Text="Cat" Leaf="true" Checked="False" />
<ext:Node NodeID="Item13" Text="Dog" Leaf="true" Checked="False" />
<ext:Node NodeID="Item14" Text="Animal" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Root>
<Listeners>
<CheckChange Handler="this.dropDownField.setValue(getValues(this), getText(this), false);" />
</Listeners>
</ext:TreePanel>
</Component>
</ext:DropDownField>
</div>
</form>
</body>
</html>


Bold text need to generate data from database, below is I code at asp program.


<script runat="server">
int iLanguageID = 2;

protected void getCheckBoxToTree(String sql)
{
String strConnectionString = ConfigurationManager.ConnectionStrings["IKBConnectionStringWithoutProvider"].ConnectionString;
using (SqlConnection oconn = new SqlConnection(strConnectionString))
{
oconn.Open();
using(SqlCommand cmd = new SqlCommand(sql, oconn))
using(SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
Response.Write("<ext:Node NodeID='" +dr.GetString(0)+ "' Text='" + dr.GetString(0) + "' Leaf='true' Checked='False' />");
}
}
}
}
</script>

Now I don't know how to call this function from first program.

Anybody can help me?

Daniil
Jan 15, 2013, 11:03 AM
Hi @mis@adphk.com,

Please wrap the code in [CODE] tags.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

Daniil
Jan 15, 2013, 2:47 PM
Thank you for wrapping in the code tags.

I think this won't work with native ASP.NET controls as well.

Response.Write("<ext:Node NodeID='" +dr.GetString(0)+ "' Text='" + dr.GetString(0) + "' Leaf='true' Checked='False' />");



Please clarify the requirement.

Generally, there are DirectEvent and DirectMethod things to perform AJAX with Ext.NET. And, commonly, Response.Write should not be used.

Here are a few examples of using DirectEvents and DirectMethods.
http://examples2.ext.net/#/search/directevents
http://examples2.ext.net/#/search/directmethods