This is a migrated thread and some comments may be shown as answers.

RadComboBox with MetroTouch skin lose its style on RadGrid Ajax

14 Answers 91 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Vishnu
Top achievements
Rank 1
Vishnu asked on 13 Jun 2014, 11:38 AM
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.

14 Answers, 1 is accepted

Sort by
0
Vishnu
Top achievements
Rank 1
answered on 17 Jun 2014, 03:20 AM
Hi telerik,

Please inspect the above mentioned issue and provide a fix.

Thanks.
0
Nencho
Telerik team
answered on 18 Jun 2014, 08:00 AM
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
 

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.

 
0
Vishnu
Top achievements
Rank 1
answered on 18 Jun 2014, 12:03 PM
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.
0
Vishnu
Top achievements
Rank 1
answered on 21 Jun 2014, 05:21 AM
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.
0
Nencho
Telerik team
answered on 23 Jun 2014, 08:38 AM
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
 

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.

 
0
Vishnu
Top achievements
Rank 1
answered on 23 Jun 2014, 12:18 PM
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.
0
Nencho
Telerik team
answered on 26 Jun 2014, 08:04 AM
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
 

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.

 
0
Vishnu
Top achievements
Rank 1
answered on 27 Jun 2014, 03:46 AM
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.
0
Nencho
Telerik team
answered on 01 Jul 2014, 02:52 PM
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
 

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.

 
0
Vishnu
Top achievements
Rank 1
answered on 05 Jul 2014, 06:54 AM
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.
0
Nencho
Telerik team
answered on 10 Jul 2014, 06:52 AM
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
 

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.

 
0
J2K
Top achievements
Rank 1
answered on 15 Mar 2017, 05:27 PM
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.
0
GDPR_erased
Top achievements
Rank 1
answered on 20 Apr 2017, 01:40 PM

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

0
Vessy
Telerik team
answered on 21 Apr 2017, 12:55 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Vishnu
Top achievements
Rank 1
Answers by
Vishnu
Top achievements
Rank 1
Nencho
Telerik team
J2K
Top achievements
Rank 1
GDPR_erased
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or