unhighlight items when unselected

[Albert Shenker]

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.

[Genady Sergeev]

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

[Albert Shenker]

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.

[Dimitar Terziev]

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

[Thad]

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