I'm still having some trouble with this. The dropdown/tree panel code I'm using is:
fields.Add(Html.X().DropDownField()
.FieldLabel("Product/Service Type")
.ID("ddtServiceType")
.Margins("0 0 0 0")
.LabelWidth(200)
.Width(400)
//.SubmitValue(false)
.Note("Check multiple products/services as required")
.EmptyText("--- Please Select ---")
.Cls("form-label")
.Mode(DropDownMode.ValueText)
.SyncValue(syncValue => syncValue.Fn = "syncValue")
.CustomConfig(customConfig => customConfig.Add(new ConfigItem("getHiddenStateName", "function () {return this.getValue();}", ParameterMode.Raw)))
.Listeners(listeners =>
{
listeners.Expand.Handler = "this.component.getRootNode().expand(true);";
listeners.Expand.Single = true;
listeners.Expand.Delay = 10;
})
.Component(treePanel => treePanel.Add(Html.X().TreePanel()
.Height(300)
.Width(500)
.MinWidth(500)
.RootVisible(false)
.SelectionModel(selectionmodel => selectionmodel.Add(Html.X().TreeSelectionModel().Mode(SelectionMode.Multi)))
.Listeners(listeners =>
{
listeners.CheckChange.Handler = "this.dropDownField.setValue(getValues(this), getText(this), false);";
})
.Root(root =>
{
#region VPLS
root.Add(new Node { Text = "Root" });
root[0].Children.Add(new Node()
{
Text = "VPLS",
NodeID = "ndPrdVPLS",
Leaf = false
});
root[0].Children[0].Children.Add(new Node()
{
Text = "VPLS Access Service",
NodeID = "ndSvcVPLSAccessService",
Leaf = true,
Checked = false
});
root[0].Children[0].Children.Add(new Node()
{
Text = "VPLS Service Delivery Point",
NodeID = "ndSvcVPLSSDP",
Leaf = true,
Checked = false
});
#endregion
#region SDH
root[0].Children.Add(new Node()
{
Text = "SDH",
NodeID = "ndPrdSDH",
Leaf = false
});
root[0].Children[1].Children.Add(new Node()
{
Text = "SDH Access Service",
NodeID = "ndSvcSDHAccessService",
Leaf = true,
Checked = false
});
root[0].Children[1].Children.Add(new Node()
{
Text = "SDH Interface",
NodeID = "ndSvcSDHInterface",
Leaf = true,
Checked = false
});
#endregion
#region EoSDH
root[0].Children.Add(new Node()
{
Text = "EoSDH",
NodeID = "ndPrdEoSDH",
Leaf = false
});
root[0].Children[2].Children.Add(new Node()
{
Text = "EoSDH Access Service",
NodeID = "ndSvcEoSDHAccessService",
Leaf = true,
Checked = false
});
root[0].Children[2].Children.Add(new Node()
{
Text = "EoSDH Interface",
NodeID = "ndSvcEoSDHInterface",
Leaf = true,
Checked = false
});
#endregion
//root[0].Children.Add(new Node()
//{
// Text = "Data Centre Connect",
// NodeID = "ndPrdDCC",
// Leaf = false
//});
//root[0].Children[5].Children.Add(new Node()
//{
// Text = "Access Service",
// NodeID = "ndSvcDCCAccessService",
// Leaf = true,
// Checked = false
//});
//root[0].Children[5].Children.Add(new Node()
//{
// Text = "Interface",
// NodeID = "ndSvcDCCInterface",
// Leaf = true,
// Checked = false
//});
root[0].Children.Add(new Node()
{
Text = "HDDC",
NodeID = "ndPrdHDDC",
Leaf = false
});
root[0].Children[3].Children.Add(new Node()
{
Text = "Cabinet Product",
NodeID = "ndPrdHDDCCabinet",
Leaf = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Floor Space Reservation Service",
NodeID = "CF_HDDC_FloorSpaceReservationService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Cabinet Service",
NodeID = "CF_HDDC_CabinetService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Customer Supplied Cabinet Service",
NodeID = "CF_HDDC_CustomerSuppliedCabinetService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Power Service",
NodeID = "CF_HDDC_CabinetPowerService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Portal Service",
NodeID = "CF_HDDC_PortalService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[0].Children.Add(new Node()
{
Text = "Access Key Service",
NodeID = "CF_HDDC_AccessKeyService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children.Add(new Node()
{
Text = "Access Product",
NodeID = "ndPrdHDDCAccess",
Leaf = false
});
root[0].Children[3].Children[1].Children.Add(new Node()
{
Text = "Access Card Service",
NodeID = "CF_HDDC_AccessCardService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children.Add(new Node()
{
Text = "Maintenance Product",
NodeID = "ndPrdHDDCMaintenance",
Leaf = false
});
root[0].Children[3].Children[2].Children.Add(new Node()
{
Text = "Cleaning Service",
NodeID = "CF_HDDC_Maintenance_CleaningService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[2].Children.Add(new Node()
{
Text = "Waste Removal Service",
NodeID = "CF_HDDC_Maintenance_WasteRemovalService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[2].Children.Add(new Node()
{
Text = "Afterhour Service",
NodeID = "CF_HDDC_Maintenance_AfterhoursService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[2].Children.Add(new Node()
{
Text = "Penalty Service",
NodeID = "CF_HDDC_Maintenance_PenaltyService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children[2].Children.Add(new Node()
{
Text = "Miscellaneous Service",
NodeID = "CF_HDDC_Maintenance_MiscellaneousService",
Leaf = true,
Checked = false
});
root[0].Children[3].Children.Add(new Node()
{
Text = "Cross Connect Product",
NodeID = "ndPrdHDDCCrossConnect",
Leaf = false
});
root[0].Children[3].Children[3].Children.Add(new Node()
{
Text = "Cross Connect Service",
NodeID = "CF_HDDC_CrossConnectService",
Leaf = true,
Checked = false
});
root[0].Children.Add(new Node()
{
Text = "P2P Switched Ethernet",
NodeID = "ndPrdSwitchedEthernet",
Leaf = false
});
root[0].Children[4].Children.Add(new Node()
{
Text = "Access Service",
NodeID = "ndSvcSwitchedEthernetAccessService",
Leaf = true,
Checked = false
});
root[0].Children[4].Children.Add(new Node()
{
Text = "Service Delivery Point",
NodeID = "ndSvcSwitchedEthernetSDP",
Leaf = true,
Checked = false
});
})
)));
}));
}
and the javascript
:
<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().clearSelections();
Ext.each(ids, function (id) {
var node = tree.store.getNodeById(id);
if (node) {
tree.getSelectionModel().select(node, true);
}
}, this);
};
</script>
I can see that the javascript is running as expected - i.e it appears that the selected nodeids are set as the values and the names are displayed in the drop down field. However when I do a Request.Form["ddtServiceType"] I receive the names and not the nodeIds - I want to see (for example) "CF_HDDC_AccessCardService,CF_HDDC_Maintenance_Cle aningService" but instead I get "[Access Service, Cleaning Service]". What am I doing wrong?