Radcombox (Checkboxes) reset to empty only the first time.

4 posts, 0 answers
  1. Omar
    Omar avatar
    2 posts
    Member since:
    Apr 2013

    Posted 08 Apr 2013 Link to this post

    Hello, I have several radcombobox controls in my aspx/c# web application.

    - The radcombobox has the "Checkbox" parameter set to "true"
    - the control is populated from codebehind on page load
    - the control is held within RadAjaxPanel and ASP UpdatePanel

    scenario: When i 'check' an item from the radcombobox, it shows the loading image and fires the OnSelectedIndexChanged event from code behind as supposed to. But when everything is completed, radcombobox on my page shows that no item has been selected... weird thing is when i select the same item from the same radcombox "again", it shows my selection properly.

    So to sum it up, I have to select the item 'twice' for it to work right.

    Am i doing something wrong? I just want the item to 'stay' selected from the first try without having to select it again.

    ASPX:

    <telerik:RadAjaxPanel ID="ProductsRadAjaxP" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" RequestQueueSize="50">
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                 <table width="100%">
                  <tr>
                    <td>
                      <asp:Label ID="lbl_Country" runat="server" Text="Country: " />
                     </td>
                     <td>
                      <telerik:RadComboBox ID="cmb_Country" runat="server" Height="200" Width="160" EmptyMessage="Choose Country" MarkFirstMatch="true" EnableLoadOnDemand="true" AutoPostBack="true" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Filter="Contains" OnSelectedIndexChanged="cmb_Country_SelectedIndexChanged">
                      </telerik:RadComboBox>
                     </td>
                    </tr>
                    <tr>
                     <td>
                        <asp:Label ID="lbl_Casa" runat="server" Text="Casa: " />
                     </td>
                     <td>
                      <telerik:RadComboBox ID="cmb_Casa" runat="server" Height="200" Width="160" EmptyMessage="Choose Casa" MarkFirstMatch="true" EnableLoadOnDemand="true" AutoPostBack="true" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Filter="Contains" OnSelectedIndexChanged="cmb_Casa_SelectedIndexChanged">
                                                    </telerik:RadComboBox>
                     </td>
                 </tr>
                      <!-- there are alot more controls, but all with the same parameter -->
             </table>
            </ContentTemplate>
        </asp:UpdatePanel>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1" Skin="Metro">
     </telerik:RadAjaxLoadingPanel>

    C#:

        protected void cmb_Country_SelectedIndexChanged(object sender, EventArgs e)
        {
            //I have a long process and SQL procedures... this is just an example of how i'm filling the control
            cmb_Casa.DataSource = DataHelper.GetCasa(cmb_Country.CheckedItems[0].Value);
               cmb_Casa.DataBind();
        }
    .
    .
    .
    .


  2. Nencho
    Admin
    Nencho avatar
    1876 posts

    Posted 10 Apr 2013 Link to this post

    Hello Omar,

    As I can see from the provided code snippet, you are enabling the Load On Demand functionality, along with the CheckBox feature of the RadComboBox. This is not a supported scenario, since the RadComboBox's items loaded on demand are not accessible on the server, which is needed for the CheckBox feature.

    In addition, I noticed that you had enabled the MarkFirstMatch and the Filter properties of the control. Please note, that this is also a not supported scenario when the CheckBox feature is enabled. The reason is that the CheckBox selection is different from the standard RadComboBox's selection - there is no single selected item.

    Please refer to this documentation article, where the above limitations are listed.


    Kind regards,
    Nencho
    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.
  3. Omar
    Omar avatar
    2 posts
    Member since:
    Apr 2013

    Posted 11 Apr 2013 Link to this post

    Hello Nencho,

    Thank you for replying, I did remove the Load On Demand functionality, the MarkFirstMatch and Filter from my web application, and the problem still exists... I thought I'd do a small demo project containing my scenario just to show you what's happening simply because i have no idea what more snippets to include in the post here.

    Steps:

    1. Run the web application (aspx and c# pages below)
    2. Select "any" item from Casa from the second combobox
    3. Wait until loading screen has finished
    4. Notice that No Selection has been made to Casa
    5. Select the same or another item from Casa
    6. Wait until loading screen has finished
    7. Notice that There Is Selection made to Casa


    here's the complete aspx and c# pages which are ready to build and debug:

    .aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadComboboxProblemDemo.Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadAjaxPanel ID="ProductsRadAjaxP" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" RequestQueueSize="50">
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
                     <table>
                        <tr>
                            <td>
                                <asp:Label ID="lbl_Country" runat="server" Text="Country: " />
                            </td>
                            <td>
                                <telerik:RadComboBox ID="cmb_Country" runat="server" Height="200" Width="160" EmptyMessage="Choose Country"
                                        AutoPostBack="true" CheckBoxes="true"
                                    EnableCheckAllItemsCheckBox="true" OnSelectedIndexChanged="cmb_Country_SelectedIndexChanged">
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="lbl_Casa" runat="server" Text="Casa: " />
                            </td>
                            <td>
                                <telerik:RadComboBox ID="cmb_Casa" runat="server" Height="200" Width="160" EmptyMessage="Choose Casa"
                                        AutoPostBack="true" CheckBoxes="true"
                                    EnableCheckAllItemsCheckBox="true" OnSelectedIndexChanged="cmb_Casa_SelectedIndexChanged">
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                     </table>
                </ContentTemplate>
            </asp:UpdatePanel>
            </telerik:RadAjaxPanel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1" Skin="Metro">
            </telerik:RadAjaxLoadingPanel>
        </div>
        </form>
    </body>
    </html>


    .cs page:

    using System;
    using System.Data;
     
    namespace RadComboboxProblemDemo
    {
        public partial class Default : System.Web.UI.Page
        {
            protected int DefaultCountry;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack && !IsCallback)
                {
                    DefaultCountry = 1;
     
                    cmb_Country.DataTextField = "COUNTRY_NAME";
                    cmb_Country.DataValueField = "COUNTRY_ID";
                    cmb_Country.DataSource = new DataView(CreateTable()).ToTable(true, new string[] { "COUNTRY_ID", "COUNTRY_NAME" });
                    cmb_Country.DataBind();
     
                    cmb_Casa.DataTextField = "CASA_NAME";
                    cmb_Casa.DataValueField = "CASA_ID";
     
                    for (int i = 0; i < cmb_Country.Items.Count; i++)
                    {
                        if (int.Parse(cmb_Country.Items[i].Value) == DefaultCountry)
                        {
                            cmb_Country.Items[i].Checked = true;
                            rebind(1);
                            break;
                        }
                    }
                }
            }
     
            protected void cmb_Country_SelectedIndexChanged(object sender, EventArgs e)
            {
                rebind(1); //Selecting a country displays related Casas
            }
     
            protected void cmb_Casa_SelectedIndexChanged(object sender, EventArgs e)
            {
                //Do Other things with Casa.
            }
     
            private void rebind(int rebindID)
            {
                switch (rebindID)
                {
                    case 1:
                        DataTable MergedSource = new DataTable();
                        foreach (var item in cmb_Country.CheckedItems)
                        {
                            DataTable tmp = CreateTable().Select("COUNTRY_ID=" + item.Value).CopyToDataTable();
                            MergedSource.Merge(tmp);
                        }
                        cmb_Casa.DataSource = MergedSource;
                        cmb_Casa.DataBind();
                        break;
                    default:
                        cmb_Casa.DataSource = new DataView(CreateTable()).ToTable(true, new string[] { "CASA_ID", "CASA_NAME" });
                        cmb_Casa.DataBind();
                        break;
                }
            }
            private DataTable CreateTable()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("COUNTRY_ID", typeof(int));
                dt.Columns.Add("COUNTRY_NAME", typeof(string));
                dt.Columns.Add("CASA_ID", typeof(int));
                dt.Columns.Add("CASA_NAME", typeof(string));
     
                dt.Rows.Add(1, "USA", 10, "California");
                dt.Rows.Add(1, "USA", 11, "Florida");
                dt.Rows.Add(1, "USA", 12, "Hawaii");
                dt.Rows.Add(2, "Australia", 13, "Melborn");
                dt.Rows.Add(2, "Australia", 14, "Sydney");
                dt.Rows.Add(3, "France", 15, "Paris");
     
                return dt;
            }
        }
    }




    Please check it out and advise if I'm doing something wrong here.

    Thank you for your time.
    Omar.

    Edit:
    PS: Tested on Firefox 20.0 and Chrome 26.0.1410.64 m

  4. Nencho
    Admin
    Nencho avatar
    1876 posts

    Posted 12 Apr 2013 Link to this post

    Hello Omar,

    The issue you that are facing is caused by the fact that you handle the OnSelectedIndexChanged event, instead of OnItemChecked, which is the appropriate one to handle in a CheckBox scenario. This reflects as firing the SelectedIndexChanged event of the first RadComboBox (Country), which rebind the Casa combobox.

    Please consider handling the OnItemChecked event, in order to overcome the problematic behavior. I have prepared a sample page for you, demonstrating the correct implementation. In addition, here is a video demonstrating the behavior at my end. Please find the sample attached.

    All the best,
    Nencho
    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.
Back to Top