This is a migrated thread and some comments may be shown as answers.

Client-side check on click

9 Answers 336 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 14 Feb 2010, 11:22 PM
Hi ,
I wrote very simple javascript to check listbox item checkbox after this item is clicked :
    function lboxItemClicked(sender, args) { 
 
        var i = args.get_item(); 
        i.set_checked(!i.get_checked()); 
 
        args.set_cancel(true); 
    } 
it does what it is supposed to do but when i click on checkbox it wont work , I guess recursion occurs and so it looks like nothing happed.
Is there any quick solution to get it working regardless if the item was clicked or checkbox ?

9 Answers, 1 is accepted

Sort by
0
Joshua Holt
Top achievements
Rank 2
answered on 16 Feb 2010, 12:16 AM
Hi Jacob,
What event are you handling client side for the list box?  I was able to have it work as expected using your code, and handling the onClientSelectedIndexChanged event.
 My code is as follows:
<telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="True"  
        DataKeyField="id" DataSortField="group_name" DataSourceID="SqlDataSource1"  
        DataTextField="group_name" DataValueField="id"  
        onclientselectedindexchanged="itemClicked"  
        style="top: 0px; left: 0px; height: 229px"
    </telerik:RadListBox> 
And the JS is:
function itemClicked(sender, args) { 
 
            var i = args.get_item(); 
            i.set_checked(!i.get_checked()); 
 
            //args.set_cancel(true); 
        } 

This worked perfect for me in Firefox and IE. 
Please let me know if this does not help you.

Thank you,
Joshua Holt





0
Jacob
Top achievements
Rank 1
answered on 16 Feb 2010, 09:40 AM
I was quite puzzled when I tried it on a new web page and it worded as you said, after short deduction I saw that checking checkbox on my website casused selected index change event and it didn't on a clean page , the causer was RadFormDecorator , without it my script works just fine.
I consider this to be a bug , am I right ?
0
Joshua Holt
Top achievements
Rank 2
answered on 16 Feb 2010, 04:00 PM
Hi Jacob,
I was able to reproduce the issue you are having with the Form Decorator, and will look into why this is happening.   However, I was able to get it to work correctly using the following code: 

 function itemClicked(sender, args) { 
 
            var i = args.get_item(); 
            var chk = i.get_checkBoxElement(); 
            chk.checked = !chk.checked; 
            //args.set_cancel(true); 
        } 

I changed the event i was handling to the changing event, it didnt work as well for me in IE when using the changed event. 
 <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="True"  
        DataKeyField="id" DataSortField="group_name" DataSourceID="SqlDataSource1"  
        DataTextField="group_name" DataValueField="id"  
        onclientselectedindexchanging="itemClicked"  
        style="top: 0px; left: 0px; height: 229px"
    </telerik:RadListBox> 
I hope this helps you. 

Thank you,
Joshua Holt


0
Jacob
Top achievements
Rank 1
answered on 16 Feb 2010, 09:39 PM
Thanks for the tip Joshua !
Although I experience small pause after clicking the item it does the job , on the other hand it must be the browser javascript engine because it pauses only in IE and FF , in Opera it works flawlessly.
0
Jacob
Top achievements
Rank 1
answered on 01 Mar 2010, 07:21 PM
I jut noticed that this solution actually doesn't set the checbox checked , I didn't notice that at first but after postback , items which were 'selected' this way weren't actually selected in code. (ie.: they won't be visible in lbox.CheckedItems)
0
Genady Sergeev
Telerik team
answered on 02 Mar 2010, 10:05 AM
Hello guys,

Which version of the RadControls do you talk about? We have fixed some annoying bugs with the check functionality for the latest version, however, we might have missed something. Using the latest version I was not able to reproduce the issues that you have mentioned.

Sincerely yours,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Jacob
Top achievements
Rank 1
answered on 02 Mar 2010, 10:10 AM
2009.3 1314

You will be able to reproduce if you will use RadFormDecorator on the same page.
0
Genady Sergeev
Telerik team
answered on 05 Mar 2010, 09:45 AM
Hello guys,

We were able to reproduce the issue based on your feedback. I have updated your telerik points for pointing us to this issue.

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Chris
Top achievements
Rank 1
answered on 18 Jun 2010, 10:00 PM
There is an easy fix for the postback issue: use the inbuilt RadListBox client API ;)
If you change your code into
    function itemClicked(sender, args) { 
        var item = args.get_item(); 
        if (item.get_checked()) { 
            item.uncheck(); 
        } 
        else { 
            item.check(); 
        } 
    } 
then the values are kept during postbacks.

As an additional bonus, I wanted to keep the checked items selected, without requiring the users to press CTRL (this was the solution until now, but wasn't accepted by the client). Here you go:
    var sema_used; 
    function itemClicked(sender, args) { 
        if (!sema_used) { 
            sema_used = true
            var item = args.get_item(); 
            if (item.get_checked()) { 
                item.uncheck(); 
                item.unselect(); 
            } 
            else { 
                item.check(); 
                item.select(); 
            } 
            selectCheckedItems(item.get_listBox()); 
            sema_used = false
        } 
    } 
 
    //Select all checked entries 
    function selectCheckedItems(listbox) { 
        if (listbox) { 
            var items = listbox.get_checkedItems(); 
            for (var i in items) { 
                items[i].select(); 
            } 
        } 
    } 
The use of the semaphor variable in the 2nd solution is required to prevent infinite recursion caused by the item.select() call.



Note that you have to call that method at two events, otherwise checking an item by clicking on the checkbox does not work:
<telerik:RadListBox OnClientSelectedIndexChanged="itemClicked" OnClientItemChecked="itemClicked" ...> 

Cheers,
Chris
Tags
ListBox
Asked by
Jacob
Top achievements
Rank 1
Answers by
Joshua Holt
Top achievements
Rank 2
Jacob
Top achievements
Rank 1
Genady Sergeev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or