Check the item onclick Checkboxes=true

11 posts, 0 answers
  1. Raghavendra
    Raghavendra avatar
    6 posts
    Member since:
    Dec 2011

    Posted 16 Jan 2012 Link to this post

    I have a RadComboBox with CheckBoxes="true". Everything is working fine. However, the user has to click exactly on the checkbox to check/uncheck the item. How to enable the item to toggle checked state when the user clicks anywhere within the item?

    I have also set the AutoPostBack="true" for this combobox. In the earlier version, the user could check/uncheck as many items as they want and the postback would occur on taking focus out of the combobox. I updated the project to use Telerik.Web.UI.dll v2011.3.1305.40. But now the control does a postback every time an item is checked/unchecked. How to revert it back to the old behavior?

    Thanks,
    Raghu
  2. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 17 Jan 2012 Link to this post

    Hi,
    Please try this.

    JavaScript:

    <script type="text/javascript">
    function toggle(chk , button)
    {
        if(document.getElementById(button).value == 'P')
        {
            document.getElementById(chk).disabled = true;
        }
        else
        {
            document.getElementById(chk).disabled = false;
        }
    }
    </script>


    C#:

    protected void Page_Load(object sender, EventArgs e)
     
     
     
    {
     
     
     
        foreach( RadComboBoxItem item in RadComboBox1.Items)
     
     
     
        {
     
     
     
            CheckBox chk = (CheckBox)item.FindControl("B");
     
     
     
      
     
     
     
            RadioButton PButton = (RadioButton)item.FindControl("P");
     
     
     
            PButton.Attributes.Add("onclick", "toggle('" + chk.ClientID + "','" + PButton.ClientID + "')");
     
     
     
              
     
     
     
            RadioButton QButton = (RadioButton)item.FindControl("Q");
     
     
     
            QButton.Attributes.Add("onclick", "toggle('"+chk.ClientID+"','"+QButton.ClientID+"')");
     
     
     
        }
     
     
     
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 18 Jan 2012 Link to this post

    Hello,

    Regarding your first question: “How to enable the item to toggle checked state when the user clicks anywhere within the item?” - I am afraid that this is not a supported behaviour. In order to check an item user needs to check the checkbox.

    The second issue that you describe is quite strange and I was not able to reproduce it.
    Please try reproducing it on your side with this RadComboBox definition:
    <telerik:RadComboBox ID="RadComboBox2" runat="server"
    CheckBoxes="true" EnableCheckAllItemsCheckBox="true"
    AutoPostBack="true">
        <Items>
            <telerik:RadComboBoxItem Text="Arts" />
            <telerik:RadComboBoxItem Text="Biographies" />
            <telerik:RadComboBoxItem Text="Children's Books" />
            <telerik:RadComboBoxItem Text="Computers" />
            <telerik:RadComboBoxItem Text="Cooking" />
            <telerik:RadComboBoxItem Text="History" />
            <telerik:RadComboBoxItem Text="Fiction" />
            <telerik:RadComboBoxItem Text="Mystery" />
            <telerik:RadComboBoxItem Text="Nonfiction" />
            <telerik:RadComboBoxItem Text="Romance" />
            <telerik:RadComboBoxItem Text="Science Fiction " />
            <telerik:RadComboBoxItem Text="Travel" />
        </Items>
    </telerik:RadComboBox>


    Regards,
    Kalina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. croach01
    croach01 avatar
    22 posts
    Member since:
    Aug 2007

    Posted 07 Mar 2012 Link to this post

    Handle the item click event via jQuery:

    function pageLoad()
    {
         $('.rcbItem').click(checkBoxItemClicked);
    }
     
    function checkBoxItemClicked(sender)
    {
        var checkBox = $(sender.target).find(':checkbox');
        checkBox.prop('checked', !checkBox.is(':checked'));
    }
  6. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 23 Jul 2012 Link to this post

    I realize this is a somewhat old post, but was curious if I could get some input. I've implemented the method that croach01 mentioned, but I would really like it if it would update the combox box text similar to how it is when you actually click on the checkbox. It seems like it would be a better idea if we were to actually use the findItemByValue and select the actual item, but I can't figure out how. Any ideas?
  7. croach01
    croach01 avatar
    22 posts
    Member since:
    Aug 2007

    Posted 23 Jul 2012 Link to this post

    Building upon the method I described earlier, replace the checkBoxItemClicked method with the below code (Replace the id of testBox with the id of your RadComboBox):

    function checkBoxItemClicked(sender, e)
    {
        // get the combo control
        var comboBox = $find($('div[id$=testBox]:first').get(0).id);
     
        var itemElement = $(sender.target);
     
        // get the item by it's index.  The index of the object
        // in the DOM is the same as the index of the item in
        // the combo's list of items.
        var itemIndex = itemElement.index();
        var item = comboBox.get_items().getItem(itemIndex);
     
        // is the item checked?
        if (itemElement.find(':checkbox').is(':checked'))
            item.uncheck();
        else
            item.check();
    }
  8. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 23 Jul 2012 Link to this post

    Wow, I honestly didn't think I'd get a response back that quickly. That method worked perfectly. I happen to have two ComboBoxes on the page, and wasn't sure if there's an easy way to get the radcombobox from the item element. For now, I just put two different click methods for both comboboxes...

    I can't thank you enough for your help with this.

    function pageLoad() {
        $("#ctl00_contentBody_rcbLocations_DropDown > div > ul > li.rcbItem").click(LocationCheckBoxItemClicked);
        $("#ctl00_contentBody_rcbSalesReps_DropDown > div > ul > li.rcbItem").click(SalesRepCheckBoxItemClicked);
    }
     
    function LocationCheckBoxItemClicked(sender, e) {
        // get the combo control
        var comboBox = $find("<%=rcbLocations.ClientID %>");
     
        var itemElement = $(sender.target);
     
        // get the item by it's index.  The index of the object
        // in the DOM is the same as the index of the item in
        // the combo's list of items.
        var itemIndex = itemElement.index();
        var item = comboBox.get_items().getItem(itemIndex);
     
        // is the item checked?
        if (itemElement.find(':checkbox').is(':checked'))
            item.uncheck();
        else
            item.check();
    }
     
    function SalesRepCheckBoxItemClicked(sender, e) {
        // get the combo control
        var comboBox = $find("<%=rcbSalesReps.ClientID %>");
     
        var itemElement = $(sender.target);
     
        // get the item by it's index.  The index of the object
        // in the DOM is the same as the index of the item in
        // the combo's list of items.
        var itemIndex = itemElement.index();
        var item = comboBox.get_items().getItem(itemIndex);
     
        // is the item checked?
        if (itemElement.find(':checkbox').is(':checked'))
            item.uncheck();
        else
            item.check();
    }
  9. croach01
    croach01 avatar
    22 posts
    Member since:
    Aug 2007

    Posted 23 Jul 2012 Link to this post

    No problem.  You might try the following line to get the combo box control so that you can minimize the functions:

    var comboBox = $find(itemElement.parents('div.RadComboBoxDropDown').get(0).id.replace('_DropDown', ''));
  10. AJ
    AJ avatar
    33 posts
    Member since:
    Jun 2011

    Posted 05 Sep 2012 Link to this post

    Sorry for the late reply back. Moved homes and then just got busy and forgetful. However, your suggestion works like a charm and I greatly appreciate your help! Here is the final version:

    function checkBoxItemClicked(sender, e) {
        var itemElement = $(sender.target);
        // get the combo control
        var comboBox = $find(itemElement.parents('div.RadComboBoxDropDown').get(0).id.replace('_DropDown', ''));
     
        // get the item by it's index.  The index of the object
        // in the DOM is the same as the index of the item in
        // the combo's list of items.
        var itemIndex = itemElement.index();
        var item = comboBox.get_items().getItem(itemIndex);
     
        // is the item checked?
        if (itemElement.find(':checkbox').is(':checked'))
            item.uncheck();
        else
            item.check();
    }

    Thank you again!
     - Andrew
  11. Mark
    Mark avatar
    64 posts
    Member since:
    Nov 2009

    Posted 10 Jul 2014 in reply to Kalina Link to this post

    Kalina said:Hello,

    Regarding your first question: “How to enable the item to toggle checked state when the user clicks anywhere within the item?” - I am afraid that this is not a supported behaviour. In order to check an item user needs to check the checkbox. 


    Hi Kalina,

    Is this function something which will be addressed in coming releases? I have had to add a note by the control for the user advising to only click on the checkbox, and nowhere else on the row. Currently the checked state will not be reflected correctly on the OnItemChecked method through an autopostback if anything but the checkbox is clicked on within the item's row.
  12. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 15 Jul 2014 Link to this post

    Hi Matt,

    This behavior has been changed. You can test it here:
    http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx

    <telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" AutoPostBack="true" OnItemChecked="RadComboBox1_ItemChecked">
        <Items>
            <telerik:RadComboBoxItem Text="Item 1" Value="1"/>
            <telerik:RadComboBoxItem Text="Item 2" Value="2"/>
        </Items>
    </telerik:RadComboBox>


    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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