PDA

View Full Version : [CLOSED] Multicombo with group and treeview



WHISHWORKS
Nov 04, 2013, 10:26 AM
Hello,

We are trying to create multicombo with groups. To achive this we have embeded a tree control within combo box. UI is looking good but when we are trying to set the selected items text in combo textbox, the dropdown is getting closed. Below is the code snippet. Is there any property that can stop the dropdown from getting closed.



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ComboTree.aspx.cs" Inherits="ComboTree" %>

<%@ 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></title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style>
.complete .x-grid-cell-inner
{
font-weight: bold;
color: #777;
}
.folder-create
{
background-image: url(images/circlebluessmall.png) !important;
}
</style>
<script type="text/javascript">
function ddlbind() {
var msg = "",
selChildren = App.TreePanel1.getChecked();
Ext.each(selChildren, function (node) {
if (msg.length > 0) {
msg += ", ";
}
msg += node.data.text;
});
if (msg.length > 0) {
App.ddlSkill.setValue(msg);
} else {
App.ddlSkill.setValue('Select Skill Set');
}
return msg;
};
</script>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
treebind();
}
}

private void treebind()
{
Ext.Net.Node root = new Ext.Net.Node()
{
};
root.Expanded = true;
TreePanel1.Root.Add(root);

for (int i = 1; i <= 1; i++)
{
Ext.Net.Node compositionNode = new Ext.Net.Node()
{
Text = "Category" + i
//IconCls = "folder-create"
};
root.Children.Add(compositionNode);

for (int j = 1; j <= 5; j++)
{
Ext.Net.Node pieceNode = new Ext.Net.Node()
{
Text = "Skill" + j,
Leaf = true,
NodeID = Convert.ToString(j),
Checked = false
//IconCls = "folder-create"
};
compositionNode.Children.Add(pieceNode);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:DropDownField ID="ddlSkill" runat="server" TriggerIcon="Combo" Cls="combo_box"
Width="295" EmptyText="Select Skill Set">
<Component>
<ext:TreePanel ID="TreePanel1" runat="server" Height="400" Width="250" Frame="false"
UseArrows="true" AutoScroll="true" Animate="true" RootVisible="false">
<Listeners>
<CheckChange Handler="var node = Ext.get(this.getView().getNode(item));ddlbind();
node[checked ? 'addCls' : 'removeCls']('complete');" />
<Render Handler="this.getRootNode().expand(true);" Delay="50" />
</Listeners>
</ext:TreePanel>
</Component>
</ext:DropDownField>
</form>
</body>
</html>

Daniil
Nov 04, 2013, 11:03 AM
Hi @WHISHWORKS,

Please pass "false" to the setValue calls:

App.ddlSkill.setValue(msg, false);

App.ddlSkill.setValue('Select Skill Set', false);

As here:
http://examples2.ext.net/#/Form/DropDownField/Overview/