<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript" language="javascript"> function onChangeFilterByName(g, text) { var f = $find("<%= RadListBox1.ClientID %>"); if (f._enableMarkMatches && ($telerik.isIE || $telerik.isChrome)) { var h = g.keyCode == Sys.UI.Key.backspace || g.keyCode == Sys.UI.Key.esc || g.keyCode == Sys.UI.Key.space || g.keyCode == Sys.UI.Key.down || g.keyCode == Sys.UI.Key.up; if (h) { var j = f._onKeyPress(g); g.preventDefault(); if (j) { return; } } } f._onKeyDown(g); f._onKeyPress(g); } function onChangeFilterByName1(txtFilterByName) { var check = 0; var listbox = $find("<%= RadListBox1.ClientID %>"); var items = listbox.get_items(); var itemContainsSearchText = new Array(); var index = 0; { for (var i = 0; i <= items.get_count() - 1; i++) { var item = items.getItem(i); if (!item.get_checked() && item.get_text().toLowerCase().startsWith(txtFilterByName.value.toLowerCase())) { item.scrollIntoView(); item.ensureVisible(); var text = item.get_text(); var replace = String.format("<span class=\"rlbHighlight\">{0}</span>", text); item.set_text(replace); //break; } } } } function OnClientItemCheckedHandler(sender, eventArgs) { var item = eventArgs.get_item(); var checkedItem = sender.get_checkedItems(); checkedItem.sort(sortAscByText); var allItems = sender.get_items().toArray(); for (var i = 0; i < checkedItem.length; i++) { sender.reorderItem(checkedItem[i], i); } if (!item.get_checked()) { //removed checked items for (var i = 0; i < checkedItem.length; i++) { var index = allItems.indexOf(checkedItem[i]); allItems.splice(index, 1); } //reorder uncheck items. allItems.sort(sortAscByText); var index = checkedItem.length; for (var i = 0; i < allItems.length; i++) { sender.reorderItem(allItems[i], index); index = index + 1; } } } function sortAscByText(a, b) { return a.get_text() == b.get_text() ? 0 : a.get_text() < b.get_text() ? -1 : 1 } </script> </telerik:RadCodeBlock>
<div> <asp:TextBox ID="txtSort" runat="server" Width="195px" OnKeyUp="onChangeFilterByName(event,this)"></asp:TextBox><br /> <br /> <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" Width="200px" Height="200px" SelectionMode="Multiple" TabIndex="1" EnableMarkMatches="true" OnClientItemChecked="OnClientItemCheckedHandler"> <Items> <telerik:RadListBoxItem Text="Argentina" Value="1"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Australia" Value="2"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Brazil" Value="3"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Canada" Value="4"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Chile" Value="5"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="China" Value="6"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Egypt" Value="7"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="England" Value="8"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="France" Value="9"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Germany" Value="10"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="India" Value="11"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Indonesia" Value="12"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Kenya" Value="13"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="Mexico" Value="14"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="New Zealand" Value="15"></telerik:RadListBoxItem> <telerik:RadListBoxItem Text="South Africa" Value="16"></telerik:RadListBoxItem> </Items> </telerik:RadListBox> </div>
This code is contributed form Abidali Suthar [one of the developer in my team].