RadComboBox with MetroTouch skin lose its style on RadGrid Ajax

12 posts, 0 answers
  1. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 13 Jun 2014 Link to this post

    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.
  2. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 16 Jun 2014 in reply to Vishnu Link to this post

    Hi telerik,

    Please inspect the above mentioned issue and provide a fix.

    Thanks.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 18 Jun 2014 Link to this post

    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.

     
  5. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 18 Jun 2014 in reply to Nencho Link to this post

    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.
  6. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 21 Jun 2014 in reply to Nencho Link to this post

    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.
  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 23 Jun 2014 Link to this post

    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.

     
  8. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 23 Jun 2014 in reply to Nencho Link to this post

    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.
  9. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 Jun 2014 Link to this post

    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.

     
  10. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 26 Jun 2014 in reply to Nencho Link to this post

    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.
  11. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 01 Jul 2014 Link to this post

    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.

     
  12. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 05 Jul 2014 in reply to Nencho Link to this post

    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.
  13. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 10 Jul 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017