Uncheck does not clear checkbox for moved items

4 posts, 0 answers
  1. Vladimir
    Vladimir avatar
    2 posts
    Member since:
    Jun 2011

    Posted 15 Jun 2011 Link to this post

    Hello,

    I have listbox with checkboxes.
    I need to select/deselect item when checkbox is checked/unchecked and check/uncheck checkbox when item is selected/deselected.
    I have implemented this by adding handlers to OnClientSelectedIndexChanged and OnClientItemChecked events.

    <script type="text/javascript">
        var lock;
        var SelectedIndexChanged = function (sender, event) {
            if (!lock) {
                lock = true;
                var item = event.get_item();
                var listbox = item.get_listBox();
                 
                item.check();
                 
                var selectedItems = jQuery.makeArray(listbox.get_selectedItems());
                var checkedItems = listbox.get_checkedItems();
                var diffItems = [];
     
                for (var i = 0; i < checkedItems.length; i++) {
                    if (jQuery.inArray(checkedItems[i], selectedItems) == -1) {
                        diffItems.push(checkedItems[i]);
                    }
                }
     
                for (var i = 0; i < diffItems.length; i++) {
                    diffItems[i].uncheck();
                }
     
                lock = false;
            }
        }
     
        var ItemChecked = function (sender, event) {
            lock = true;
            var i = event.get_item();
            i.set_selected(i.get_checked());
            lock = false;
        }
    </script>

    <asp:ScriptManager ID="sc" runat="server">
        </asp:ScriptManager>
        <telerik:RadListBox ID="lstbx1" runat="server" AllowDelete="false" AllowReorder="true"
            CheckBoxes="true" AllowTransfer="false" AutoPostBack="false" DataKeyField="ID"
            DataTextField="Name" DataValueField="ID" SelectionMode="Multiple"
            EnableDragAndDrop="true" Height="210" Width="250"
            OnClientSelectedIndexChanged="SelectedIndexChanged"
            OnClientItemChecked="ItemChecked">
            
        </telerik:RadListBox>

    It works fine when single or multiple items are selected.
    But it does not work if items were moved by buttons or by mouse.
    When item "N1" (for example) is moved and then I select other item, listbox.get_checkedItems() returns this item and then I do uncheck for it in SelectedIndexChanged handler. But checkbox of this item is still checked, moreover listbox.get_checkedItems() does not return the item anymore. It looks like the item has 'not checked' status in object model but its checkbox is still checked.

    I use ASP.NET AJAX Q1 2011.

    /Vladimir

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 20 Jun 2011 Link to this post

    Hi Vladimir,

    I have already answered your support ticket regarding the same issue.

    To avoid duplication, please let continue our discussion into the support ticket.

    Greetings,

    Peter Filipov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    1 posts
    Member since:
    Oct 2012

    Posted 10 Oct 2012 Link to this post

    I'm running in the same issue; can you share the resolution?
    Thanks!

    Version=2011.2.712.40


                            <telerik:RadListBox ID="lstTemplates" runat="server"    
                                height="500px"
                                 AllowDelete="false"
                                AllowTransfer="false"
                                AllowTransferDuplicates="false"
                                AllowTransferOnDoubleClick="false"
                                PersistClientChanges="true"
                                CheckBoxes="true"
                                ButtonSettings-ShowReorder="false"
                                AllowReorder="true" EnableDragAndDrop="true"
                                Width="95%" />



    client script:

            function UnCheckAll() {
                var listbox = $find("<%= lstTemplates.ClientID %>");
                if (!listbox) return;

                var selections = listbox.get_checkedItems();
                if (selections && selections.length) {
                    for (var i = 0; i < selections.length; i++) {
                        selections[i].set_checked(false);
                    }
                }
            }




    After user drags and drop a list item (that is already checked); then invokes UnCheckAll() - the moved item is returned in the get_checkedItems() call, but calling set_checked(false) or uncheck() does not change the state of the UI element (the underlying object model is now 'unchecked however).

    If there is a work around for this version of the controls that would be appreciated - we can and do plan on upgrading to the current version soon-ish - but is not an immediately possibility.
    Thanks!



    [[
    My current work around, which is fine for unselecting all the checkbox is, is to simply do this after clearing the model's selected state in UnCheckAll() :

     $("#<%= lstTemplates.ClientID %> input[type=checkbox]").removeAttr("checked");

    ]]

     

     

     

     

     

     

     

     


  5. Vladimir
    Vladimir avatar
    2 posts
    Member since:
    Jun 2011

    Posted 11 Oct 2012 Link to this post

    var lock;
        this.SelectedIndexChanged = function (sender, event) {
            if (!lock) {
                lock = true;
                var item = event.get_item();
      
               
                item.check();
                $("input:checkbox", item.get_element())[0].checked= true;
      
                var listbox = item.get_listBox();
                var selectedItems = $.makeArray(listbox.get_selectedItems());
                var checkedItems = listbox.get_checkedItems();
                var diffItems = [];
      
                for (var i = 0; i < checkedItems.length; i++) {
                    if ($.inArray(checkedItems[i], selectedItems) == -1) {
                        checkedItems[i].uncheck();
                        $("input:checkbox", checkedItems[i].get_element())[0].checked= false;
                    }
                }
      
                lock = false;
            }
        }
      
        this.ItemChecked = function (sender, event) {
            lock = true;
            var i = event.get_item();
            i.set_selected(i.get_checked());
            lock = false;
        }
Back to Top