RadAjaxManager ignores custom CSS assigned to RadGrid

2 posts, 0 answers
  1. Markus
    Markus avatar
    1 posts
    Member since:
    Jul 2013

    Posted 21 May 2014 Link to this post

    Hi folks,

    i'm using a RadGrid with a custom CSS. When additionally using a RadAjaxManager, the assigned CSS is ignored and the Default is used.
    I tried it like described here 
    but no success so far.

    So summarized i got this.

    I have a global CSS style to add a border to all input type=submit:

    1.body input[type=submit] {
    2.        background-color: #bdb69e;
    3.        border: 1px solid #bdb69e;
    4.        min-width: 200px;
    5.        min-height: 35px;
    6.        box-shadow: 0 0 0 1px rgba(254,254,254,0.5), 0 0 0 2px #bdb69e;
    7.    }

    Because i dont want to have this border for the paging buttons in a RadGrid i'm using:

    1..RadGrid input[type=submit] {
    2.    border: none !important;
    3.    box-shadow: none !important;
    4.    width: 25px !important;
    5.    min-width: 25px !important;

    As said before this works fine with no RadAjaxManager. But with RadAjaxManager the borders appear.
    Currently i'm using the RadAjaxManager like this:

    01.<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
    02.        <AjaxSettings>
    03.            <telerik:AjaxSetting AjaxControlID="btn_Search">
    04.                <UpdatedControls>
    05.                    <telerik:AjaxUpdatedControl ControlID="rg_Translation" UpdatePanelCssClass="ForcedRadGridStyle" UpdatePanelRenderMode="Inline" />
    06.                </UpdatedControls>
    07.            </telerik:AjaxSetting>
    08.        </AjaxSettings>

    I even tried to assign a other custom class with some radical colors for testing purposes, but nothing changes.

    1..ForcedRadGridStyle {
    2.    color: rgb(182, 255, 0) !important;
    3.    background-color: rgb(182, 255, 0) !important;

    How can i get this working?
    What am i missing?

  2. Venelin
    Venelin avatar
    352 posts

    Posted 26 May 2014 Link to this post

    Hi Markus,

    I don't think the Ajax Manager affected the css. I have created a test page that works as expected with, and without the ajax settings: the second css rule overwrites the firs, which is expectedt. Please examine the sample and see if it helps you resolving the issue.

    Also, the mentioned help topic is more about the UpdatePanelRenderMode property which is used to control the rendering of the AjaxPanel's wrapper element. As far as I understand this is not what you are looking for.

    One more thing, this rule won't change the input's text color:

    .ForcedRadGridStyle {
        color: rgb(182, 255, 0) !important;
        background-color: rgb(182, 255, 0) !important;

    because it targets the ajax update panel instead of the input which has more local settings that will overwrite this one.


    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