So I’ve been trying to implement a devexpress multi-select drop down list box, and all is well except whenever you post back to the server – when the server returns the response to the browser, for some reason the text within the combo box gets cleared. I’m not sure if it’s something I am doing incorrectly with the JS, or the set up of the devexpress control but either way – I decided to work around it, here’s the end result (a fully functional multi-select drop down which persists the text value cross postback).
The key is creating a hidden field, and storing the text value (when updated on the client side) into it, then on pageload, reset the value back into the text field so that when the postback returns, we refresh it with the value we posted to the server. I’m still unsure as to why it’s losing its state, but this fixes it anyway. Oh – and I’ve added in a ‘clear all’ function as well which wasn’t part of the original devexpress examples. Enjoy!
NOTE: When you enable auto postback on the checkboxes, you’ll run into some timing issues in the JS, I couldn’t solve this, so for now, no autopostback on the checkboxes, sorry!
<asp:HiddenField runat=”server” ID=”multiChildText” />
<script type=”text/javascript”>
var textSeparator = “;”;
function OnListBoxSelectionChanged(listBox, args) {
UpdateText();
}
function ClearAll() {
checkListBox.UnselectAll();
UpdateText();
}
function UpdateText() {
var selectedItems = checkListBox.GetSelectedItems();
var txt = GetSelectedItemsText(selectedItems);
checkComboBox.SetText(txt);
// Now, also set the hidden field!
document.getElementById(“<%= multiChildText.ClientID %>”).value = checkComboBox.GetText();
}
function SynchronizeListBoxValues(dropDown, args) {
UpdateText(); // for remove non-existing texts
}
function GetSelectedItemsText(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
texts.push(items[i].text);
return texts.join(textSeparator);
}
function GetValuesByTexts(texts) {
var actualValues = [];
var value = “”;
for (var i = 0; i < texts.length; i++) {
value = GetValueByText(texts[i]);
if (value != null)
actualValues.push(value);
}
return actualValues;
}
function GetValueByText(text) {
var text = Trim(text).toUpperCase();
for (var i = 0; i < checkListBox.GetItemCount(); i++)
if (checkListBox.GetItem(i).text.toUpperCase() == text)
return checkListBox.GetItem(i).value;
return null;
}
function Trim(str) {
return str.replace(/\s*((\S+\s*)*)/, “$1″).replace(/((\s*\S+)*)\s*/, “$1″);
}
function pageLoad() {
//setTimeout(‘UpdateText();’, 1200); hmmm 
checkComboBox.SetText(document.getElementById(“<%= multiChildText.ClientID %>”).value);
}
</script>
<dxe:ASPxDropDownEdit ClientInstanceName=”checkComboBox” ID=”MultiChildren” SkinID=”CheckComboBox” runat=”server” CssClass=”child-multi-selection” EnableAnimation=”false”>
<DropDownWindowTemplate>
<dxe:ASPxListBox ID=”MultiChildrenList” ClientInstanceName=”checkListBox” SelectionMode=”CheckColumn”
runat=”server” SkinID=”CheckComboBoxListBox” CssClass=”child-multi-select-list” AutoPostBack=”false”>
<ClientSideEvents SelectedIndexChanged=”OnListBoxSelectionChanged” />
</dxe:ASPxListBox>
<table>
<tr>
<td >
<dxe:ASPxButton ID=”ClearAllButton” AutoPostBack=”False” runat=”server” Text=”Clear All”>
<ClientSideEvents Click=”function(s, e){ ClearAll(); }” />
</dxe:ASPxButton>
</td>
<td align=”right”>
<dxe:ASPxButton ID=”ASPxButton1″ AutoPostBack=”False” runat=”server” Text=”Close”>
<ClientSideEvents Click=”function(s, e){ checkComboBox.HideDropDown(); }” />
</dxe:ASPxButton>
</td>
</tr>
</table>
</DropDownWindowTemplate>
<ClientSideEvents TextChanged=”SynchronizeListBoxValues” DropDown=”SynchronizeListBoxValues” />
</dxe:ASPxDropDownEdit>
