RadComboBox not initially displaying items. New problem with build 619

[Clyde]

I just updated to build 619 and on all pages with a RadComboBox, the box looks empty. It's actually not empty, but there is a display issue when you have a RadFormDecorator and a RadStyleSheetManager on the same page.

I just tested this and if I remove either one, the problem goes away. This problem has just been introduced with build 619.

My code is below, test for yourself.

    <form id="form1" runat="server">
    <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" />
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div>

        <telerik:RadComboBox ID="ddlMembershipType" Runat="server" Skin="Vista">
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1"
                    Value="RadComboBoxItem1" />
                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2"
                    Value="RadComboBoxItem2" />
                <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3"
                    Value="RadComboBoxItem3" />
            </Items>
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </telerik:RadComboBox>

    </div>
    </form>

I will disable the RadStyleSheetManager for now to get around this, but please let me know if there is another solution.

Thanks
Clyde

[Clyde]

I'll also add that this is happening on pages that just have RasFormDecorator and RadScriptManager added. So it may not only be with the Stylesheetmanager.

[Rumen]

Hi Clyde,

Please, excuse us for the inconvenience.

We made a sticky note in the RadFormDecorator forum about the problem:
Problem with RadFormDecorator and RadStyleSheetManager on the same page.

We are not aware of any scenarios that can produce this problem without the presence of RadStyleSheetManager manager on the page.

Could you please remove the RadStyleSheetManager from your pages? In case you still experience this problem, please send us a sample running project that demonstrates the issue. We will examine it and do our best to provide a solution.

Thank you for your assistance in advance.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Clyde]

Update: Problem still exists even without the StyleSheetManager if your RadComboBox is within a table.

I've updated my ticket on this subject with a sample.

Thanks
Clyde

[Kevin Schneider]

I can confirm this - I don't use a stylesheet manager on my application yet one of my forms has a combobox loading with no default value in IE7, it displays correctly in Firefox though.

It was working correctly prior to SP1.  There are no javascript errors happening on my page either.

I've also tried removing the decorator and the combobox displays correctly.

[Helen]

Hi Kevin,

Just to clarify - is the problem that no item is selected when you load the page and RadFormDecorator is used?

Sincerely yours,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kevin Schneider]

Exactly, and I am not using the RadStyleSheetManager.

In FireFox though the first item is selected correctly.

It is just a display issue though, when I open the dropdown it correctly selects the first item in the popdown.

[Clyde]

I concur with Kevin, it seems to be specific to IE. It seems to work fine with Firefox.

Thanks
Clyde

[Rosi]

Hello all,

We are aware of this problem and are working on a solution.  We believe that this issue is caused from a bug in IE when table with table-layout = fixed is placed inside another table (RadComboBox represents a table with  table-layout = fixed ) and RadFormDecorator applies its styles.

You can workaround it as follows:

1. Place RadFormDecorator in the beginning of the page.
2. Hook on OnClientEvent of RadComboBox and execute the following code.

  <script type="text/javascript">
            function OnClientLoad(sender)
            {
                var input = sender.get_inputDomElement();
                if (input.style.cssText != null) input.style.cssText = input.style.cssText;
            }
            </script>

Please find attached a project illustrating the workaround.

Greetings,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Daniel Plomp]

Hi Rosi,

I also had this problem with my r.a.d.combobox. I just want to confirm that your solution is working okay and the items are now showing up.

Daniel

[Daniel Plomp]

Other things I noticed:

PROBLEM (1)
When I use a GridDropDownColumn inside a r.a.d.grid I have the same problem that the selected item is not showing up inside the r.a.d.combobox.

WORKAROUND (1)
I have set the DropDownControlType to DropDownList for the time beeing.

PROBLEM (2)
When I placed a RadFormDecorator on my masterpage, all the images/icons used inside the r.a.d.grid are not visible. So the images for e.g. previous and next page, new record, refresh are not visible.

WORKAROUND (2)
None. I just disabled the RadFormDecorator on the masterpage.

Hopefully you guys know some better 'workarounds'!

Greetings,
Daniel

[Tsvetie]

Hello Daniel,
Regarding your first problem, please refer to the Reported Q1 SP2 (build 2008.1.619) problems and their solutions forum topic (the attached page in particular). There we have described the best workaround we have found so far.

As for your second problem - I was able to reproduce it  and we found out what caused it. Unfortunately, it turned out to be more complex then it looks and we will have to make some changes to the RadGrid, not only the RadFormDecorator, in order to get the two controls to work together as expected. In general, the problem is caused by the fact that the images/icons you do not see, are actually styled INPUTs (e.g. INPUTs with background image, set from the skin of the RadGrid, and no text). The RadFormDecorator iterates though all INPUTs on the page (the ones in the RadGrid in particular), applies the styles from its CSS file and thus overrides the styles of the INPUTs. However, those INPUTs have no text between their opening and closing tags and that is why once the FormDecorator removes their background image, you do not see anything.

Unfortunately, the only workaround we can offer is not to decorate the RadGrid - you can split your page in two decoration zones:

1. RadGrid - for this zone use the DecorationZoneID property in combination with the DecoratedControls property of the control to decorate all but the buttons in the RadGrid.
2. The rest of the page you want to decorate - for this zone, use another RadFormDecorator with DecoratedControls=All.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Daniel Plomp]

Okay, that is maybe a good solution then just turn the FormDecorator off.

Thanks!
Daniel