Custom template DropDownList search issue

2 posts, 0 answers
  1. Fran
    Fran avatar
    1 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2015 Link to this post

    Hello Guys,

    I have the following dropdownlist with a custom template:

               .HtmlAttributes(new { style = "width:100%; " })
               .Template("<input type='checkbox' id='#=data.Id #' name='superPlayer#=data.Id #' value='#=data.IsSelected #' />" + "   " + "${ data.DisplayValue}")
               .Events(ev => ev.Close("cb_SuperPlayer_closed"))

    If i open the dropdownlist and check some of the checkboxes, on the close event i will correctly get the ones checked into an array. 
    The problem is when i use the search textbox of the control to filter the items, if i check some of them, after the dropdownlist closes the selections are all cleared..

    So for example lets say that my collection has: [Whatever, Test1, Test2, SomeOtherText]. If i just open the dropdownlist and select whatever and test1 and then close it, after i collapse it again, my checkboxes are still checked.

    If i open the dropdownlist and search for "test", and check test1, test2, close the dropdownlist and then collapse it again, the two selections are cleared.

    Hope you can help me figure this out.

    P.S: This is the method for onclosed to get the checked selections

          function cb_SuperPlayer_closed() {
            var selShops = new Array();
            var doc = document.getElementById("cb_SuperPlayer_listbox");
            var chkBoxes = doc.getElementsByTagName("input");
            for (var i = 0; i < chkBoxes.length; i++) {
                if (chkBoxes[i].checked)




  2. Alexander Popov
    Alexander Popov avatar
    1436 posts

    Posted 02 Mar 2015 Link to this post

    Hi Fran,

    This happens, because the DropDownList items are redrawn each time the DataSource is being filtered. You can preserve the checkboxes state by updating the underlying data items, as shown in this example.

    Alexander Popov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top