unhighlight items when unselected

5 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 14 Feb 2011 Link to this post

    I wish to use a single RadListBox as a replacement for a CheckBoxListControl. I am only really interested in the Checked functionality of the listbox items. Their selected state is irelevant. Therefore, I would like to prevent the items from ever being "Selected" and force users to use the checkboxes. I found a handy example which allows me to check/uncheck the checkboxes if the user clicks on an item by handling the selectedindexchanged event:
     

    var sema_used; 
           function listItemClicked_BSC(sender, eventArgs) {
               if (!sema_used) {  
                   sema_used = true;
                   var item = eventArgs.get_item();  
                   if (item.get_checked()) {  
                       item.uncheck();  
                   }  
                   else {  
                       item.check();   
                   }
                   item.set_selected(false);
                   sema_used = false;  
               }  
           }


    However, even though I call item.set_selected(false), the item still apears to be highlighted in the listbox. I believe this is probably because the selectedindex does not always change when a user clicks on an item. Is there a way to make sure all items are unselected (unhighlighted) in a listbox. Or is there a way to disable item selectiong, but keep the checkbox functionality? Ideally, there should be a client-side event for ItemClicked and ItemClicking, rather than just the current SelectedIndexChanged.

  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 18 Feb 2011 Link to this post

    Hello Albert Shenker,

    Please try the following code:

    <script type="text/javascript">
           Sys.Application.add_load(function() {
               var listBox = $find("RadListBox1");
               var $ = $telerik.$;
     
               $(".rlbItem", listBox._getGroupElement())
                   .die("click")
                   .live("click", function(e) {
                       listBox._isLeftButtonPressed = false;
                       listBox._dragSelector = null;
     
                       var item = listBox._extractItemFromDomElement(e.target);
                       item.set_checked(!item.get_checked());
                       $(item.get_element()).removeClass("rlbSelected rlbHovered rlbActive");
                   });
           });
        
       </script>
      
       <telerik:RadListBox runat="server" ID="RadListBox1" CheckBoxes="true">
           <Items>
               <telerik:RadListBoxItem Text="Text1" />
               <telerik:RadListBoxItem Text="Text1" />
               <telerik:RadListBoxItem Text="Text1" />
               <telerik:RadListBoxItem Text="Text1" />
               <telerik:RadListBoxItem Text="Text1" />
               <telerik:RadListBoxItem Text="Text1" />
           </Items>
       </telerik:RadListBox>

    Is this closer that what you are targeting? Basically the new click handler will remove all css classes that would mark an item as selected.

    Greetings,
    Genady Sergeev
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 21 Feb 2011 Link to this post

    This creates the appropriate behavior, but isn't it a really fragile solution... dependant on your style class structure. If  Telerik intends to implement an itemclicking event and item.unhighlight method soon then I suppose this would be ok as a stopgap.
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 25 Feb 2011 Link to this post

    Hi Albert,

    There is a private method _unhighlight(), which could fit your scenario:

    Sys.Application.add_load(function() {
        var listBox = $find("RadListBox1");
        var $ = $telerik.$;
     
        $(".rlbItem", listBox._getGroupElement())
           .die("click")
           .live("click", function(e) {
               listBox._isLeftButtonPressed = false;
               listBox._dragSelector = null;
     
               var item = listBox._extractItemFromDomElement(e.target);
               item.set_checked(!item.get_checked());
               item._unhighlight();
           });
    });

    I hope this would help you out.


    Regards,
    Dimitar Terziev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 01 Mar 2011 Link to this post

    Hey Albert and Dimitar,

    I'm working on the same scenario here...well, sort of.  :)

    Checking RadListBoxItems on the SelectedIndexChanged event creates an undesired effect, in addition to what is reported by you, Albert.  Users that use the keyboard arrows to navigate up and down in the list would have the items checking and unchecking each time they press up or down.  That side effect of using that event prevents it from being an acceptable solution for me.

    I really was hoping there were OnClientItemClick(ed|ing) events similar to the existing OnClientItemCheck(ed|ing) and OnClientItemDoubleClick(ed|ing) events, but alas no such luck.

    Dimitar - Tomorrow I'm going to try to see if replacing the click handler with what you gave Albert can allow me to get around this particular issue, but until then I thought I'd chime in on this post while it was top of mind for me.

    Thad
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017