Well of course it won't work as expected if I disable ajax. Isn't that what ajax is all about ... updating client side controls from server side code without having to update the entire page?
What this amounts to is Javascript editing the style of a control (setting display:none on a <li> element). This element is not included in the ajax update nor is it edited server-side. There is no error in the code logic. I've stepped through the entire codebehind line by line and at no point does the control get updated.
It is quite simple actually - the onkeyup event on an input control changes the style of a <li> element in a nested div. When the user clicks on one of the <li> elements, it fires a postback to update a different div.
I could understand there being a problem if the control was updating itself or if somewhere in the codebehind the control was being edited, but that isn't the case.
Consider this document:
<head>
<title>Test Page</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
DefaultLoadingPanelID="RadAjaxLoadingPanel1" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadListBox1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ContentDiv" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<asp:TextBox ID="TextBox1" AutoPostBack="false" runat="server" onkeyup="filterList();"></asp:TextBox>
<telerik:RadListBox ID="RadListBox1" runat="server" AutoPostBack="true">
</telerik:RadListBox>
</div>
<div id="ContentDiv" runat="server">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</div>
<script type="test/javascript">
function filterList() {
var listbox = $find('RadListBox1');
var textbox = $('#TextBox1');
createMatchingList(listbox, textbox.val());
}
function createMatchingList(listbox, filterText) {
if (filterText != "") {
filterText = escapeRegExCharacters(filterText);
var items = listbox.get_items();
var re = new RegExp(filterText, "i");
items.forEach
( function (item) {
var itemText = item.get_text();
if (itemText.match(re)) {
item.set_visible(true);
} else {
item.set_visible(false);
}
})
} else {
var items = listbox.get_items();
items.forEach
( function (item) {
item.set_visible(true);
})
}
}
function escapeRegExCharacters(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
</script>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
</telerik:RadAjaxLoadingPanel>
</form>
</body>
</html>
with this codebehind:
Now, whenever you first render the page, RadListBox1 will have 10 items "ListItem1" through "ListItem10"
When you type into TextBox1, the contents of RadListBox1 will filter according to what was entered. For example, if you enter "1" then the only items that will be visible are "ListItem1" and "ListItem10". Likewise, if you enter only "9" then "ListItem9" is the only one visible.
For this test, don't enter anything and just click on one of the items in RadListBox1. You will note that the other four textboxes are updated to show the value of the selected item, namely "ListItem n was selected" where n is the item in the list.
Now, type 1 in TextBox1. The contents of RadListBox1 is filtered to show only "ListItem1" and "ListItem10" - click one of them.
Notice that every item in RadListBox1 is now visible and that the value of the clicked item is now displayed in the other four textbox controls.
At no point is RadListBox updated in the codebehind. It is however, initialized on first render when Not Page.IsPostBack evaluates to True.
Also note that the RadAjaxManager does not update RadListBox1. It only updates ContentDiv. The div containing RadListBox1 is not a child control to ContentDiv.
Keep in mind that this isn't all of the code. I've pared it down to a simple example of the problem I am seeking to resolve.