Client-side check on click

10 posts, 0 answers
  1. Jacob
    Jacob avatar
    21 posts
    Member since:
    Jan 2010

    Posted 14 Feb 2010 Link to this post

    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 ?
  2. Joshua Holt
    Joshua Holt avatar
    23 posts
    Member since:
    Jan 2010

    Posted 15 Feb 2010 Link to this post

    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





  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jacob
    Jacob avatar
    21 posts
    Member since:
    Jan 2010

    Posted 16 Feb 2010 Link to this post

    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 ?
  5. Joshua Holt
    Joshua Holt avatar
    23 posts
    Member since:
    Jan 2010

    Posted 16 Feb 2010 Link to this post

    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


  6. Jacob
    Jacob avatar
    21 posts
    Member since:
    Jan 2010

    Posted 16 Feb 2010 Link to this post

    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.
  7. Jacob
    Jacob avatar
    21 posts
    Member since:
    Jan 2010

    Posted 01 Mar 2010 Link to this post

    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)
  8. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 02 Mar 2010 Link to this post

    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.
  9. Jacob
    Jacob avatar
    21 posts
    Member since:
    Jan 2010

    Posted 02 Mar 2010 Link to this post

    2009.3 1314

    You will be able to reproduce if you will use RadFormDecorator on the same page.
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 05 Mar 2010 Link to this post

    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.
  11. Chris
    Chris avatar
    2 posts
    Member since:
    Nov 2008

    Posted 18 Jun 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017