RadComboBox with MetroTouch skin lose its style on RadGrid Ajax

[Vishnu]

Hi

I am having a master page-content page set up in my web application. One of the content page includes a RadGrid and a RadComboBox with MetroTouch skin. The RadGrid is ajaxified using the RadAjaxManagerProxy and the issue is, the RadComboBox is losing its default styling when the RadGrid initiates an Ajax Request.

This issue happens with the Metro, MetroTouch, & Silk skin and works fine with the Default, Web20 etc. Skins. You can view the unusual behavior here.

Here is the sample which illustrate the above mentioned issue.

Masterpage :

<form id="form1" runat="server">
<asp:ScriptManager ID="masterScriptManager" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="MasterAjaxManager" runat="server" DefaultLoadingPanelID="MasterLoadingPanel" />
<telerik:RadAjaxLoadingPanel ID="MasterLoadingPanel" runat="server" Skin="Web20" MinDisplayTime="1500" />
<div>
    <h1>
        Master Page Content</h1>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>

Content-page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadAjaxManagerProxy ID="ajaxManagerProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <h2>
        Content Page</h2>
    <div style="padding: 5%;">
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowPaging="true"
            PageSize="4" Width="100%" OnNeedDataSource="RadGrid1_NeedDataSource" AllowMultiRowSelection="true"
            Skin="Office2007">
            <MasterTableView DataKeyNames="Brand">
                <Columns>
                    <telerik:GridClientSelectColumn>
                    </telerik:GridClientSelectColumn>
                    <telerik:GridBoundColumn UniqueName="Brand" DataField="Brand" HeaderText="Brand">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Model" DataField="Model" HeaderText="Model">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings Selecting-AllowRowSelect="true" EnableRowHoverStyle="true">
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <br />
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="100%" EmptyMessage="Select"
            Height="120px" Skin="MetroTouch">
            <Items>
                <telerik:RadComboBoxItem runat="server" Text="Item 1" />
                <telerik:RadComboBoxItem runat="server" Text="Item 2" />
                <telerik:RadComboBoxItem runat="server" Text="Item 3" />
            </Items>
        </telerik:RadComboBox>
    </div>
</asp:Content>

Since the RadGrid is ajaxified, how its affecting the RadComboBox? Is this a bug?

Thanks,
Vishnu.

[Vishnu]

Hi telerik,

Please inspect the above mentioned issue and provide a fix.

Thanks.

[Nencho]

Hello Vishnu,

Indeed sometimes the Skin of a certain control is not correctly applied an ajax request. This is why you need to manually set the EnableAjaxSkinRendering property to false on the problematic control at the Page_Load in order to avoid such issues :

protected void Page_Load(object sender, EventArgs e)
   {
           RadComboBox1.EnableAjaxSkinRendering = false;
   }

This issue is described in our help article here :

http://www.telerik.com/help/aspnet-ajax/ajax-common-issues.html

Regards,
Nencho
Telerik

 

 

[Vishnu]

Hi Nencho,

I tried setting the EnableAjaxSkinRendering property to false but unfortunately that didn't help.

Here is the complete sample I tried so that you can replicate the issue and check what went wrong.

Thanks,
Vishnu.

[Vishnu]

Hi Nencho,

Please be kind enough to have a look at this sample which has the above mentioned issue even after setting the EnableAjaxSkinRendering  property to false.

Thanks.

[Nencho]

Hello Vishnu,

Could you try setting the RenderMode property of the RadComboBox to Lightweight and let us know if the problematic behavior persist?

Regards,
Nencho
Telerik

 

 

[Vishnu]

Hi Nencho,

Unfortunately that too didnt fixed the issue.

Please check the attached screenshot where you will be able to find a CSS glitch below the arrow. If you set RenderMode to Lightweight, the same issue can be replicated in the above sample as well.

Thanks,
Vishnu.

[Nencho]

Hello Vishnu,

Could you try placing the ScriptManager in your MasterPage bellow the RadAjaxManager, in order to properly load the needed scripts, in the following manner in order:

<telerik:RadAjaxManager ID="MasterAjaxManager" runat="server" DefaultLoadingPanelID="MasterLoadingPanel">
        </telerik:RadAjaxManager>
        <asp:ScriptManager ID="masterScriptManager" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxLoadingPanel ID="MasterLoadingPanel" runat="server" Skin="Web20" />

Regards,
Nencho
Telerik

 

 

[Vishnu]

Hi Nencho,

As you mentioned I moved the ASP ScriptManager below the RadAjaxManager and unfortunately now ajax is not at all working in my application. On changing the RadGrid page, a full postback is happening which can be replicated in the sample I posted above as well.
Please provide a working solution.

Thanks,
Vishnu.

[Nencho]

Hello Vishnu,

I would suggest you to add the RadComboBox in the UpdatedControls (for RadGrid) section of the RadAjaxManagerProxy. In addition, you should set the EnableAjaxSkinRendering of the RadComboBox to true. You could find the modified sample attached

Note : dlls are removed from the attachment.

Regards,
Nencho
Telerik

 

 

[Vishnu]

Hi Nencho,

Please let me know if this is a bug in the radcontrol. Still I didn't get how the radcombobox is getting affected on changing the radgrid page since the grid is already ajaxified.

I doubt whether the fix you provided is an optimum solution to this issue because changing the radgrid page has nothing to do with the radcombobox. So why I need to simply update the radcombobox.

Thanks,
Vishnu.

[Nencho]

Hello Vishnu,

Such issue, regarding the not proper loading of the skin, may arise after an ajax request, as stated in the previously referenced documentation article :

http://www.telerik.com/help/aspnet-ajax/ajax-common-issues.html

Regards,
Nencho
Telerik

 

 

[J2K]

Have some seen some bizaare behavior with rad controls, but loosing all "skin" styling when an ajax manager is used is way over the top, as is the proposed solutions here.  Just removed all rad controls from the page I was just updating, that worked, no more bizarre behavior.

[GDPR_erased]

I just upgraded to the latest Version of Telerik Web: 2017.1.330.45, and indeed this appears to be a bug. I entered a support ticket with all the information, but our application lost the styling for all combobox's for the Silk skin. (I didn't try the other skins)

Just a simple ComboBox on a simple page renders transparent with a black border in the classic render mode for the silk skin. If you change the render mode to LightWeight, it renders correctly for lightweight (White background with gray border), but the classic render mode use to also have a white background wit grey border. Can this be fixed please? see attached image.
~bg

[Vessy]

Hi Bill,

I have just answered your support ticket on this matter, for convenience I am copying my answer here as well:

Thank you for bringing this issue to our attention. I have logged it and you can track its progress here:
https://feedback.telerik.com/Project/108/Feedback/Details/215783

On a side note, please note that using mixed render modes for the same controls is highly not recommended and not supported and may lead to many missing/mixed styles. This is why I will suggest that you set the the same render modes for all RadComboboxes on the page. You can find details on this matter in the following help article:
http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#incorrect-or-distorted-appearance

Regards,
Vessy
Telerik by Progress