I have a RadListBox with a filter where I set the visibility of items based on the filter, however when I do a postback on SelectedIndexChanged on the RadListBox it loses the visibility set on the list items so that invisible items become visible again after the postback. It's in a user control so I don't have access to the body onload to filter the list again. I have tried onload on other controls but I get an error and I'm not sure why. Does anyone have a suggestion as to how I can keep these list items invisible after a postback?
Thanks.
5 Answers, 1 is accepted
If you make any changes to a control on the client-side and you want to persist these changes after post back you should call trackChanges() and commitChanges() methods of the particular control.
In your case you shoud call trackChanges method before you start editing the visibility of the items and when you are finished editing, you should call commitChanges method.
More information you could find here.
Greetings,
Dimitar Terziev
the Telerik team
Rank 1
Could you show me your code, where you are setting the visibility of the listbox items.
This way it would be easy to check what is causing the problem you are experiencing.
In general there should be no problems setting certain changes on the client side and persisting them after post-back, when trackChanges and commitChanges are used.
Kind regards,
Dimitar Terziev
the Telerik team
Rank 1
#region JavaScript
var script = @"<script type=""text/javascript"">
// Filter the list of users and ephasise the matching characters in the user items.
function FilterUsers() {
var userList = $find(""" + UserSelectionControl.ClientID + @""");
var filterBox = document.getElementById(""" + UserFilterControl.ClientID + @""");
var filter = filterBox.value;
userList.trackChanges();
ClearListEmphasis(userList);
FilterList(userList, filter);
userList.commitChanges();
}
// Filter a list of items and ephasise the matching characters in the items.
function FilterList(list, filter) {
var items = list.get_items();
items.forEach
(
function (item) {
var itemText = item.get_text();
if (itemText.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
var regFilter = filter.replace(""\\"",""\\\\""); // Escape the back slashes and brackets.
regFilter = regFilter.replace("")"",""\\)"");
regFilter = regFilter.replace(""("",""\\("");
var regEx = new RegExp(regFilter, ""i"");
item.set_text(itemText.replace(regEx, ""<em>"" + itemText.match(regEx) + ""</em>"")); // See sims.css for emphasis style.
item.set_visible(true);
}
else {
item.set_visible(false);
}
}
)
}
// Clear the emphasis from any matching characters in the list.
function ClearListEmphasis(list) {
var regEx = new RegExp(""</{0,1}em>"", ""gi"");
var items = list.get_items();
var itemText;
items.forEach
(
function (item) {
itemText = item.get_text();
item.set_text(itemText.replace(regEx, """"));
}
)
}
// Show a water mark in the search text boxes.
var defaultText = ""Search..."";
function WaterMark(txt, evt) {
if (txt.value.length == 0 && evt.type == ""blur"") {
txt.style.color = ""gray"";
txt.value = defaultText;
}
if (txt.value == defaultText && evt.type == ""focus"") {
txt.style.color = ""black"";
txt.value = """";
}
}
</script> ";
#endregion
After further investigation on this problem, it seems that these changes are not persisted on the server side in purpose. The general idea is that if you set that a particular item won't be visible and persist this change, the next time when the page is loaded this item won't be rendered. This will make a big confusion if you then try to make it again visible, because this item won't be physically present in the listbox items collection. This is why this visibility change is ignored by the server. As a solution to this constrain you may save the indexes of the items which has been invisible in a hidden field and when the page is loaded , subscribe on the client-side pageLoad event and again set them to be invisible.
Regards,
Dimitar Terziev
the Telerik team