inconsistent rendering

[Martin Roussel]

Hi, I have a very annoying problem with my comboboxes that occurs not everytime but i would say ~5% of the time, testing on IE8 and FF 14.0.1. My scenario (using Q2 2012):

Im having 2 related comboboxes in a RadAjaxPanel which are filled once from a database. Each combobox filters each other since the first one contains the parents of the second. Im using server-side coding to do the filtering (by using item visibility, based on Parent (Attribute) property).

95%, everthing works like it should but i noticed that sometimes the filtering does not occur (selecting an element in the first combobox doesnt filter the second one at all...it visible items stays like there were). I though first that the postback was not occuring on those times but after investigation, it is (OnSelectedIndexChanged gets called and item visibility is set correctly for all items). It's just the displaying that dont get refreshed somehow. The only way I can do something is selecting something else in the first combobox and reselecting the one i really wanted (to force an index change)...then it filters.

I initially had AutoPostBack=True on both comboboxes and tried to put them to false and handle it on client-side (OnClientSelectedIndexChanged), like someone did on a forums. Problem still occuring ...but seems like less often so i kept it like that.

Here's a trimmed down version of my code:

aspx

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
               <div class="EnterpriseNodes1">
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo1" NoWrap="True" OnItemDataBound="RadComboBox1_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox1_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox1_OnClientSelectedIndexChanged">
                    </telerik:RadComboBox>
                    <br />
                    <telerik:RadComboBox ID="RadComboBox2" runat="server" Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo2" NoWrap="True" OnItemDataBound="RadComboBox2_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox2_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox2_OnClientSelectedIndexChanged">
                    </telerik:RadComboBox>
                    <br />
    </div>
</telerik:RadAjaxPanel>

js

function RadComboBox1_OnClientSelectedIndexChanged(sender, args) {
    __doPostBack('RadComboBox1', '');
}

function RadComboBox2_OnClientSelectedIndexChanged(sender, args) {
    __doPostBack('RadComboBox2', '');
}

cs

protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
             RadComboBoxItem item = null;

            item = new RadComboBoxItem();
            item.Value = "1";
            item.Text = "Canada";

            RadComboBox1.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "2";
            item.Text = "USA";

            RadComboBox1.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "3";
            item.Text = "BC";

            RadComboBox2.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "4";
            item.Text = "NB";

            RadComboBox2.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "5";
            item.Text = "ON";

            RadComboBox2.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "6";
            item.Text = "CAL";

            RadComboBox2.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "7";
            item.Text = "FLA";

            RadComboBox2.Items.Add(item);

            item = new RadComboBoxItem();
            item.Value = "8";
            item.Text = "NY";

            RadComboBox2.Items.Add(item);


            RadComboBox1.Text = "";
            RadComboBox1.ClearSelection();
            RadComboBox1.Visible = true;

            RadComboBox2.Text = "";
            RadComboBox2.ClearSelection();
            RadComboBox2.Visible = true;
        }

     }

protected void RadComboBox1_OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {

        FilterNext(ref RadComboBox1, ref RadComboBox2);

    }

private void FilterNext(ref RadComboBox cbCurrent, ref RadComboBox cbNext)
     {
         if (cbCurrent.Text == "Canada")
         {
             for (int i = 0; i <= cbNext.Items.Count - 1; i++)
             {
                 if (cbNext.Items[i].Text == "BC" || cbNext.Items[i].Text == "NB" || cbNext.Items[i].Text == "ON")
                 {
                     cbNext.Items[i].Visible = true;
                     //WriteLog("true " + cbNext.Items[i].Text);
                 }
                 else
                 {
                     cbNext.Items[i].Visible = false;
                     //WriteLog("false " + cbNext.Items[i].Text);

                 }
             }
         }

         if (cbCurrent.Text == "USA")
         {
             for (int i = 0; i <= cbNext.Items.Count - 1; i++)
             {
                 if (cbNext.Items[i].Text == "CAL" || cbNext.Items[i].Text == "FLA" || cbNext.Items[i].Text == "NY")
                 {
                     cbNext.Items[i].Visible = true;
                     //WriteLog("true " + cbNext.Items[i].Text);
                 }
                 else
                 {
                     cbNext.Items[i].Visible = false;
                     //WriteLog("false " + cbNext.Items[i].Text);
                 }
             }
         }

         cbNext.DataBind();
     }

For those who want to test it out...please spend time on selection changing.. I usually need  to spend like 2-3min to making it fail.

Please help and TIA

[Ivana]

Hi Martin,

I was unable to replicate the described behavior under the specified browsers. Have you considered using the load-on-demand feature of RadCombox to implement the related RadComboBoxes scenario?
In order to use the load-on-demand functionality you can take advantage of the client API of the control -- more specifically the requestItems method. 
The aforementioned approach is shown in the following online demo: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx.

Regards,
Ivana
the Telerik team

[Martin Roussel]

Thanks Ivana for spending time for my case. I must admit that it's not easy to recreate the problem since it's not often and it seems to be totally random...Ill try to figure and replication pattern to make it easier.

Regarding the load-on-demand, im not sure if im interested since I very like the "1-DB trip only" method i use. I also like the fact that im not forced to select the parent combobox, then its child (everything is available at start so i can go directly in the child one if i want). The feature I like using the client API is the auto-dropdown of combobox when selecting its parent. Is there a way to do use this even if my logic is on server-side?

Thanks again

Martin

[Ivana]

Hello Martin,

You can use the client pageLoad method where based on some previously executed logic you will be able to determine which RadComboBox's drop-down list needs to be opened. For example, you can save the ID of the RadComboBox in question in a hidden field and on pageLoad on the client you can find the RadComboBox by that ID and call its showDropDown() method (which opens the drop-down list of the control). 

I hope this will help.

All the best,
Ivana
the Telerik team

[Martin Roussel]

thanks, ive manage to do something using your tip. Im using instead the "OnClientLoad" event of the first combobox (all comboboxes are in a RadAjaxPanel) and check which combobox needs to be dropped down (if any). Here's the code:

<script type="text/javascript">


        function RadComboBox1_OnClientLoad() {

            var i = 0;
            var combo;

            combo = $find("<%= RadComboBox1.ClientID %>")

            i = toggleDrop(combo);

            if (i == 0) {
                combo = $find("<%= RadComboBox2.ClientID %>")
                i = toggleDrop(combo);
            }
            else {
                return
            }

  }

function toggleDrop(combo) {

    if (combo == null) {
        return 1
    }

    if (combo.get_items().get_count() > 1 && combo.get_selectedIndex() == null) {
        combo.toggleDropDown();
        return 1
    }
    else {
        return 0
    }

}

    </script>

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">

               <div class="EnterpriseNodes1">
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo1" NoWrap="True" OnItemDataBound="RadComboBox1_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox1_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox1_OnClientSelectedIndexChanged" OnClientLoad="RadComboBox1_OnClientLoad">
                    </telerik:RadComboBox>

                    <br />

                    <telerik:RadComboBox ID="RadComboBox2" runat="server"   Skin="WebBlue" MarkFirstMatch="true" Visible="false" AllowCustomText="true" Filter="StartsWith" CssClass="combo2" NoWrap="True" OnItemDataBound="RadComboBox2_ItemDataBound" AutoPostBack="false" OnSelectedIndexChanged="RadComboBox2_OnSelectedIndexChanged" OnClientSelectedIndexChanged="RadComboBox2_OnClientSelectedIndexChanged"
                    </telerik:RadComboBox>
             </div>
</telerik:RadAjaxPanel>

btw, im still in the process of creating a trimmed-down sample containing the original problem mentioned in first post. Stay tuned....

[Ivana]

Hi Martin,

I am glad I have helped. As for the original problem please take your time.  I will be happy to help you once you have the project ready.

All the best,
Ivana
the Telerik team

[Martin Roussel]

Ok Ive sent the app through General Feedback (ticket # 586603). Ive also attached 2 screenshots showing the erroneous results I get when it occurs.

To reproduce the problem, just continuously swap the selection in the first combobox (and see the selection available in the second one). You will likely have to play with it lot of times (I manage to usually create the problem within 2 minutes or so). I seem to experiencing it more when the page is loaded (and sitting still) for a period of time and I come back to it.

Note that the code will create a log file on your C:\ drive named "TestLogFile.txt" logging the item visibility being set up in the child box...(the last 6 lines represent your last selection)

BTW, you will have to reference the Telerik dll's since my zip was too big when including them.

Please tell me im not crazy :P ...and BIG thanks in advance

[Ivana]

Hi Martin,

I have answered to your query in the support ticket you have send on the matter.
Here is the answer for community reference:

Having loaded all the items in the RadComboBox and setting their visibility to false is not a very common scenario. It might be better to follow the following approach:

protected void RadComboBox1_OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

    FilterNext(ref RadComboBox1, ref RadComboBox2);

}

 

private void FilterNext(ref RadComboBox cbCurrent, ref RadComboBox cbNext)

{

    if (cbCurrent.Text == "Canada")

    {

       

            RadComboBox2.Items.Clear();

            RadComboBox2.Items.Add(new RadComboBoxItem("BC", "4"));

            RadComboBox2.Items.Add(new RadComboBoxItem("NB", "5"));

            RadComboBox2.Items.Add(new RadComboBoxItem("ON", "6"));

      

    }

 

    if (cbCurrent.Text == "USA")

    {

       

            RadComboBox2.Items.Clear();

            RadComboBox2.Items.Add(new RadComboBoxItem("CAL", "4"));

            RadComboBox2.Items.Add(new RadComboBoxItem("FLA", "5"));

            RadComboBox2.Items.Add(new RadComboBoxItem("NY", "6"));

       

    }

}

I hope you find it helpful.

Regards,
Ivana
the Telerik team

[Martin Roussel]

Ivana, sorry for the late reply.

Im still experiencing the same issue with your provided solution. Can you build a sample on your side so I can test it out? Also, do you want me the send my modified sample?

Thanks,

Martin

[Ivana]

Hi Martin,

Attached is the sample page I have been testing locally. Please take a look at it and let me know whether you replicate the same troubled behavior on it as well.

Thank you!

Kind regards,
Ivana
the Telerik team

[Martin Roussel]

Ivana, I still didnt fully tested your app but may be on a track. I noticed that my app is sometimes not posting back when it should. I noticed that it does that for another portion of my site (another RadAjaxPanel) but suspect the same behavior happening to the RadAjaxPanel that my RadComboboxes are sitting in (assuming the AutoPostBack is failing somehow). Here is the topic I created: TOPIC. Maybe you can help? Ill try to get back with results of your sample.

Thanks again,

Martin

[Ivana]

Hello Martin,

Since the subject discussed in the specified topic is a question concerning another RadControl I suggest to wait for the response in there as this way your question will be addressed more properly.

Regards,
Ivana
the Telerik team

[Martin Roussel]

Ivana, im reporting the results with your sample: Seems I cant reproduce it with yours. Strangely, I cant reproduce it anymore with my own trimmed sample (that ive previously reported to fail on Sep 18, 2012). However, Im still (and often) experiencing it with my real app...and it's almost ruining it.

The only thing I can do I think is adding more and more logic to my sample until I can reproduce it and spot the problem :(

[Ivana]

Hello Martin,

I am very sorry for the inconvenience that this has caused you. What I recommend in this case is to try to upgrade the version of RadControls for ASP.NET to the very latest version and see if the problem still occurs. Also, make sure that the items you add in the Items collection of the cascaded RadComboBox (when loading them on demand) have no duplicate values. And make sure you clear the items in the  Items collection every time you add a new batch of items in it.

Unfortunately, since we can not replicate the problem at our end there is not much we can do to help you to resolve the problem. However, once you will be able to isolate it in a sample project we will be happy to help you.

Regards,
Ivana
the Telerik team

[Martin Roussel]

Ivana, Im using Q2 2012 (RadControlsForAspNetAjaxSetup_2012_2_607). Is it the latest version?

Ive also noticed that when the problem occurs, the selected combobox has it's small arrow icon that remains dark blue (im using webblue skin)...exact same color when I click on it to select an item. Ive attached a screenshot when it happened minutes ago in my real app. This is the state after I selected an item in the third box (and no postback generated). I precise that my mouse is not hovering the control, and If I click somewhere else, its color comes back white. It feels like the control is some kind stuck without anything really selected.

UPDATE: tried without using skin and same problem...new attachment added.


Does it trigger any clue?

[Ivana]

Hi Martin,

The different styles in the appearance of RadComboBox are to show the different state of the control -- when it is blurred, hovered, or focused. The skin should not have any impacts on the callback that should be generated when an item is selected.

Would you at least provide me with a live URL to your website?

As for the last version, you could download the latest internal build right from your telerik account. The following help article contains more information on how to upgrade to a newer version: http://www.telerik.com/support/kb/aspnet-ajax/general/updating-radcontrols-for-asp-net-to-another-version-or-license.aspx.

I hope this will help.

Regards,
Ivana
the Telerik team

[Martin Roussel]

Just wanted to post a headsup and also for other users who might experience the same problem. Yesterday, we've upgraded to a LICENCED version of Q3 2012 (2012_3_1205) and problem seem to be gone since then. I was also experiencing similar and occasional problems when cliking on RadMenu items (that were supposed to refresh my RadSplitter content RadPane) and I had to click a second time on the item to make it work.

Im pretty confident that running a trial version (that sometimes puts  "Thank you for using Telerik..." everywhere) might be the reason of all this. While one of the latest occurance of the problem, I had Chrome dev tool opened at same time and saw the trial "thank you" message popping in its console view.

thanks for your help