CSS Formatting Lost

15 posts, 1 answers
  1. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 12 Aug 2009 Link to this post

    I have a custom user control that I use within a Master Page.  The user control has a mix of Telerik and asp.net controls.  I am using an Ajax manager on the Master Page with a Proxy on the user control.  Everything updates fine but 2 of my Label controls loose there formatting when they are "Ajaxified".  Removing the Ajax manager from the Master page immediately restores the formatting, but of course the Proxy won't work without the manager.  Placing the manager directly in the user control has the same effect.

    Basically I am using the label controls as tokens and I need them to remain inline. e.g.  Hello<asp:Label> NOT
    Hello
    <asp:Label>

    Here is some sample code.  I shortened it for brevity as my user control has lots of fields and panels (a survey type user control).
    FYI.  This is all being done in a Sitefinity site.

    MasterPage
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SingleCenterColumn.master.cs" 
        Inherits="App_Master_SingleCenterColumn" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <div id="wrapper"
            <form id="form2" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <telerik:RadAjaxManager ID="AjaxManager1" runat="server"
            </telerik:RadAjaxManager> 
            <div id="centerwrapper"
                <div id="header" class="borders"> ...
    UserControl.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="NeedsSurvey.ascx.cs" Inherits="NeedsSurvey_NeedsSurvey" 
        ClassName="NeedSurvey" %> 
    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="Button1"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="percentage" /> 
                    <telerik:AjaxUpdatedControl ControlID="number" /> 
                    <telerik:AjaxUpdatedControl ControlID="panel1" /> 
                    <telerik:AjaxUpdatedControl ControlID="panel2" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
    </telerik:RadAjaxLoadingPanel> 
    <h1> 
        Needs Assessment Survey</h1> 
    <div id="slider"
        <asp:Label ID="percentage" runat="server" Text="0"></asp:Label>% Complete. Question 
        <asp:Label ID="number" runat="server" Text="0"></asp:Label>&nbsp;of 12 Completed. 
        <telerik:RadSlider ID="RadSlider1" runat="server"
        </telerik:RadSlider> 
    </div> 
    <asp:Panel runat="server" ID="panel1"
        1. Which of the following best describes the personal needs you feel are the most 
        immediate? 
        <br /> 
        <br /> 
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            <asp:ListItem>Help with everday expenses</asp:ListItem> 
            <asp:ListItem>Paying off debt</asp:ListItem> 
            <asp:ListItem>Taking a vacation</asp:ListItem> 
            <asp:ListItem>Home improvements</asp:ListItem> 
            <asp:ListItem>Better medical coverage</asp:ListItem> 
        </asp:RadioButtonList> 
        <br /> 
        <asp:Button ID="Button1" runat="server" OnClick="btn_Click1" /> 
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="RadioButtonList2" 
            ErrorMessage="Please select an answer"></asp:RequiredFieldValidator> 
    </asp:Panel>... 
    On each button click the code behind updates the visibility of the current and next panel, updates the label control, and changes the status of a slider (like a progress bar).
    CodeBehind ascx.cs
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Net.Mail; 
    using System.Net.Mime; 
    using System.Reflection; 
    using System.Collections.Specialized; 
     
     
    public partial class NeedsSurvey_NeedsSurvey : System.Web.UI.UserControl 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            
        } 
     
        #region EventHandlers 
     
       protected void btn_Click1(object sender, EventArgs e) 
        { 
            panel1.Visible = false
            panel2.Visible = true
            RadSlider1.Value = 1; 
            percentage.Text = "8"
            number.Text = "1"
        } 
        protected void btn_Click2(object sender, EventArgs e) 
        { 
            panel2.Visible = false
            panel3.Visible = true
            RadSlider1.Value = 2
            percentage.Text = "16"
            number.Text = "2"
        }... 
    CSS
    #centercolumn 
        width: 900px; 
        margin-top: 25px; 
        margin-left: auto; 
        margin-right: auto; 
        padding: 10px 25px 25px 25px; 
        background-color: #fff; 
        color: #000; 
    #slider 
        width: 300px; 
        margin: 0 auto; 
    It would be great if after all of this someone pointed out a CSS problem, but I don't think thats it.  Remove AJax and everything formats properly.  What is interesting is that when Ajax is used the controls in question stack exactly as they are displayed in the Ajax Tree.

    ???
    Thanks.
    Joe
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Aug 2009 Link to this post

    Hi Joe,

    Ajaxifying a control adds an update panel around it. By defualt, update panels are block-level elements, i.e. they force new lines.

    You can set all generated update panels to be inline with UpdatePanelsRenderMode="Inline" set to the RadAjaxManager, but a better option is to make inline only selected update panels. The AjaxSettingCretaed event should be used, like this:

        protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)  
        {  
            if (e.Updated.ID == "My_Label_ID")  
            {  
                e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;  
            }  
        }  


    In the next version of RadControls for ASP.NET AJAX (Q2 2009 SP1, due in late August) you will be able to do the above declaratively in the RadAjaxManager (or its proxies).


    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 13 Aug 2009 Link to this post

    Thanks for replying Dimo.  Your post came 2 minutes after I figured out the gist of what you were talking about.  I actually found a CSS solution (which I was sure I never would).  I just made all of my text and controls "float" and they lined up properly.

    Where I lost my focus was how they originally lined (prior to Ajax) up properly inline.  I got so hung up on the Ajax changing that, that I lost focus on why.

    DUHHH.

    Thanks Dimo.
    Joe
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Aug 2009 Link to this post

    Hello Joe,

    Floating elements can really solve such issues, however, it can also make your layout and CSS code more complicated, and (not to forget) trigger some IE bugs or cross-browser issues. So unless you are sure no problems will arise, I recommend making the update panels inline, as suggested in my previous post.

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Daniel Elliott
    Daniel Elliott avatar
    3 posts
    Member since:
    Oct 2009

    Posted 05 Oct 2009 Link to this post

    What event do I tie "inline only" example above. I'm using 2009 Q1 with Masterpages and the Ajax Proxy.
  7. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 05 Oct 2009 Link to this post

    This was posted a while back.  I don't remember specifically what I did (I ended up using CSS because it only involved 2 label controls), but I think you can add that to the Page_Load event. I haven't tested this but since it only involves how the element is to be formatted it would make sense on Page_Load.  Good luck. joe
  8. Daniel Elliott
    Daniel Elliott avatar
    3 posts
    Member since:
    Oct 2009

    Posted 09 Oct 2009 Link to this post

    I'm really not having any luck with this. How did you handle this with CSS? Below is an example of what I'm doing.

    <%@ Page Language="VB" %> 
     
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server">  
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)  
     
        End Sub  
          
        Protected Sub RadAjaxManager1_AjaxSettingCreated(ByVal sender As Object, ByVal e As AjaxSettingCreatedEventArgs)  
            e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline  
        End Sub  
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <rad:RadScriptManager ID="RadScriptManager1" runat="server">  
        </rad:RadScriptManager> 
        <div> 
            <rad:radajaxmanagerproxy id="RadAjaxManagerProxy" runat="server">  
            <AjaxSettings> 
                  
                <rad:AjaxSetting AjaxControlID="drpWty">  
                    <UpdatedControls> 
                        <rad:AjaxUpdatedControl ControlID="lblWtyexpdt" /> 
                        <rad:AjaxUpdatedControl ControlID="txtWtyexpdt" /> 
                        <rad:AjaxUpdatedControl ControlID="lblWtyremarks" /> 
                        <rad:AjaxUpdatedControl ControlID="txtWtyremarks" /> 
                    </UpdatedControls> 
                </rad:AjaxSetting> 
                  
            </AjaxSettings> 
        </rad:radajaxmanagerproxy> 
        <fieldset> 
            <legend>AWARD INFORMATION</legend> 
            <asp:PlaceHolder ID="phWty" runat="server">  
                <asp:Label ID="lblWty" runat="server" Text="Warranty Info:" Width="175px" /> 
                <rad:radcombobox id="drpWty" runat="server" width="75px" emptymessage="Select" allowcustomtext="True" maxheight="500px" autopostback="True">  
                    <Items> 
                        <rad:RadComboBoxItem runat="server" Text="Yes" Value="Yes" /> 
                        <rad:RadComboBoxItem runat="server" Text="No" Value="No" /> 
                    </Items> 
                </rad:radcombobox> 
                <asp:Label ID="lblWtyexpdt" runat="server" Text="Expiration Date:" Width="140px" /> 
                <rad:raddatepicker skin="WebBlue" id="txtWtyexpdt" runat="server" width="110px" dateinput-displaydateformat="dd MMM yyyy" dateinput-emptymessage="MM/DD/YYYY" sharedcalendarid="calSharedCalendar" enabled="false" /> 
                <asp:Label ID="lblWtyremarks" runat="server" Text="Remarks:" Width="90px" Enabled="true" /> 
                <asp:TextBox ID="txtWtyremarks" runat="server" Width="200px" TextMode="MultiLine" Enabled="false" /> 
                <hr /> 
            </asp:PlaceHolder> 
        </fieldset> 
          
          
        <rad:RadCalendar ID="calSharedCalendar" runat="server" EnableMultiSelect="False" RangeMinDate="1900-01-01" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" FastNavigationStep="12" ShowRowHeaders="False" Skin="WebBlue" SelectedDate="">  
            <SpecialDays> 
                <rad:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday">  
                </rad:RadCalendarDay> 
            </SpecialDays> 
        </rad:RadCalendar> 
          
          
        </div> 
        </form> 
    </body> 
    </html> 
     
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Oct 2009 Link to this post

    Hi Daniel,

    The AjaxSettingCreated handler is not executed at all. You have to hook it up via the main RadAjaxManager control on the page. This code library entry shows how to do it:

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            AddHandler RadAjaxManager.GetCurrent(Page).AjaxSettingCreated, AddressOf RadAjaxManager1_AjaxSettingCreated
        End Sub


    By the way:
    1) if all update panels must be inline, you can set that declaratively to the RadAjaxManager.
    2)  if you are using the latest version of RadControls (2009.2.826), you can specify inline mode declaratively for a specific updated control:

    <telerik:RadAjaxManagerProxy>
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="drpWty">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblWtyexpdt" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>



    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Daniel Elliott
    Daniel Elliott avatar
    3 posts
    Member since:
    Oct 2009

    Posted 09 Oct 2009 Link to this post

    Thanks Dimo! That is what I needed. Since I use 2009 Q1, I had to add an event handler. All is well.

    Protected Sub Page_Load(ByVal sender As ObjectByVal e As EventArgs)  
        AddHandler RadAjaxManager.GetCurrent(Page).AjaxSettingCreated, AddressOf RadAjaxManager1_AjaxSettingCreated  
    End Sub 
     
  11. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 20 Mar 2014 Link to this post

    Here is my code.     

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="pagerMetadata">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rlvMetadata" UpdatePanelRenderMode="Inline" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>

    but I lost css in aspx side. how can I do that using c#?
  12. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Mar 2014 Link to this post

    Hi Baris,

    In order to avoid the problematic behavior please try to set EnableAjaxSkinRendering property of the "rlvMetadata" control to true on Page_Load on every post back.

    Give it a try and verify if it works.

    Regards,
    Maria Ilieva
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  13. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 26 Mar 2014 in reply to Maria Ilieva Link to this post

    Hi Maria,

    I tried that, but nothing changed. Any idea?
  14. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 31 Mar 2014 Link to this post

    Hi Baris,

    Could you please elaborate a bit more on the exact issue you are facing?

    Is the problem related with missing controls styles after the Ajax request? If this is the case please send us a screenshot that presents the correct look of the controls before the request and the problematic look after it.
    Also if the issue appear only in IE browser with version earlier than IE10, please make sure that you do not hit the IE 31 style sheet limitation described below:

    Internet Explorer CSS limits

    Regards,
    Maria Ilieva
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  15. Baris
    Baris avatar
    34 posts
    Member since:
    Jul 2013

    Posted 01 Apr 2014 Link to this post

    Hi Maria,

    I attached files which beforepostback and afterpostback. 

    here is my radajaxmanager code 

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelsRenderMode="Inline" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="pagerMetadata">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lvMetadata" UpdatePanelRenderMode="Inline" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>


    and here is my listview code which lost css when postback occur


    <telerik:RadListView ID="lvMetadata" OnPreRender="lvMetadata_PreRender" EnableViewState="true" runat="server" OnItemDataBound="RadListView1_ItemDataBound" AllowPaging="true" ItemPlaceholderID="itemHolder" OnDataBound="lvMetadata_DataBound">
                    <ItemTemplate>
                        <div class="matedata_liste">
                            <div class="w-22">
                                <fieldset class="checkboxes" style="margin-left: -8px; margin-top: 8px">
                                    <div>
                                        <telerik:RadButton ID="btnSelect" runat="server"
                                            Text="" ButtonType="StandardButton" AutoPostBack="false" ToggleType="CheckBox" OnClick="btnSelect_Click">
                                            <ToggleStates>
                                                <telerik:RadButtonToggleState Text="" PrimaryIconUrl="images/checkbox-sp-mini-2.png" />
                                                <telerik:RadButtonToggleState Text="" PrimaryIconUrl="images/checkbox-sp-mini.png" />
                                            </ToggleStates>
                                        </telerik:RadButton>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="w-120 ftext">
                                <span onmouseover="fullFtext(1);" onmouseout="fullFtextHide();">
                                    <asp:Label runat="server" ID="lblColumnName" Text='<%# Eval("ColumnName").ToString()+"..." %>'></asp:Label></span>
                                <div id="ftext-1" class="fullftext">
                                    <div class="sign"></div>
                                    <div class="full-ftext">
                                        <asp:Label runat="server" ID="lblColumnFull" Text='<%# Eval("ColumnName").ToString() %>'></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div class="w-129">
                                <asp:DropDownList ID="ddMeasurementType" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("MeasurementType") %>' OnSelectedIndexChanged="ddMeasurementType_SelectedIndexChanged" AutoPostBack="true">
                                    <asp:ListItem Text="Numaric" Value="Numaric"></asp:ListItem>
                                    <asp:ListItem Text="Nominal" Value="Nominal"></asp:ListItem>
                                    <asp:ListItem Text="Scale" Value="Scale"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                            <div class="w-138">
                                <asp:DropDownList ID="ddColumnRole" AutoPostBack="true" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("ColumnRole") %>' OnSelectedIndexChanged="ddColumnRole_SelectedIndexChanged">
                                    <asp:ListItem Text="Input" Value="Input"></asp:ListItem>
                                    <asp:ListItem Text="Segmenter" Value="Segmenter"></asp:ListItem>
                                    <asp:ListItem Text="Target" Value="Target"></asp:ListItem>
                                    <asp:ListItem Text="Non-Segmenter" Value="Non-Segmenter"></asp:ListItem>
                                    <asp:ListItem Text="Rejected" Value="Rejected"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                            <div class="w-93">
                                <asp:DropDownList ID="ddModellingCategory" runat="server" CssClass="app-select-centered" OnSelectedIndexChanged="ddModellingCategory_SelectedIndexChanged" AutoPostBack="true">
                                    <asp:ListItem Text="seç" Value="seç"></asp:ListItem>
                                    <asp:ListItem Text="seç2" Value="seç2"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                            <div class="w-93">
                                <asp:DropDownList ID="ddCoarseClass" runat="server" AutoPostBack="true" CssClass="app-select-centered" OnSelectedIndexChanged="ddCoarseClass_SelectedIndexChanged">
                                    <asp:ListItem Text="Yes"></asp:ListItem>
                                    <asp:ListItem Text="No"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                            <div id="<%# GetDataAfterInc() %>">

                                <div class="w-129" onclick="default_values($(this).parent().attr('id'));">

                                    <telerik:RadListView AutoPostBack="true" ID="lvDefaultValues" runat="server" ItemPlaceholderID="ProductItemContainer" AllowPaging="True" OnItemDeleting="lvDefaultValues_ItemDeleting">
                                        <LayoutTemplate>
                                            <div class="defaultDiv">
                                                <span class="deger">
                                                    <input type="text" name="default_values" value="-1" /></span>
                                                <span class="add-buttons">Add</span>
                                            </div>

                                            <div id="default_values_<%# GetDefaultValuesDataAfterInc() %>" class="default_values_style">

                                                <asp:Panel ID="ProductItemContainer" runat="server">
                                                </asp:Panel>

                                            </div>
                                        </LayoutTemplate>

                                        <ItemTemplate>

                                            <div>
                                                <span class="value-style">0</span>
                                                <asp:Button ID="Button1" runat="server" Text="Button" CssClass="value-delete" CommandName="delete" />
                                            </div>

                                        </ItemTemplate>
                                    </telerik:RadListView>
                                </div>
                            </div>

                            <div class="w-121">
                                <asp:DropDownList AutoPostBack="true" ID="ddMonotonicity" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("Monotonicity").ToString() %>' OnSelectedIndexChanged="ddMonotonicity_SelectedIndexChanged">
                                    <asp:ListItem Text="Monoton" Value="Monotone"></asp:ListItem>
                                    <asp:ListItem Text="Monoton Inc" Value="Monotone Inc"></asp:ListItem>
                                    <asp:ListItem Text="Monoton Dec" Value="Monotone Dec"></asp:ListItem>
                                    <asp:ListItem Text="NonMonoton" Value="NonMonotone"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                            <div class="w-93">
                                <span>
                                    <asp:DropDownList AutoPostBack="true" ID="ddTrafficLight" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("TrafficLightFlag").ToString() == bool.TrueString ?  "true" : "false" %>' OnSelectedIndexChanged="ddTrafficLight_SelectedIndexChanged">
                                        <asp:ListItem Text="Yes" Value="true"></asp:ListItem>
                                        <asp:ListItem Text="No" Value="false"></asp:ListItem>
                                    </asp:DropDownList>
                                </span>

                            </div>
                            <div class="w-93">
                                <span>
                                    <asp:DropDownList AutoPostBack="true" ID="ddUnivariatePerformance" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("PerformanceFlag").ToString() == bool.TrueString ?  "true" : "false" %>' OnSelectedIndexChanged="ddUnivariatePerformance_SelectedIndexChanged">
                                        <asp:ListItem Text="Yes" Value="true"></asp:ListItem>
                                        <asp:ListItem Text="No" Value="false"></asp:ListItem>
                                    </asp:DropDownList>
                                </span>
                            </div>
                            <div class="w-110">
                                <span>
                                    <asp:DropDownList AutoPostBack="true" ID="ddPSI" runat="server" CssClass="app-select-centered" SelectedValue='<%# Eval("PsiFlag").ToString() == bool.TrueString ?  "true" : "false" %>' OnSelectedIndexChanged="ddPSI_SelectedIndexChanged">
                                        <asp:ListItem Text="Yes" Value="true"></asp:ListItem>
                                        <asp:ListItem Text="No" Value="false"></asp:ListItem>
                                    </asp:DropDownList>
                                </span>
                            </div>
                        </div>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <asp:PlaceHolder ID="itemHolder" runat="server"></asp:PlaceHolder>
                        <telerik:RadDataPager ID="pagerMetadata" runat="server" Style="border: none;" EnableAjaxSkinRendering="true" EnableViewState="true" RenderMode="Auto" OnPageIndexChanged="pagerMetadata_PageIndexChanged" PagedControlID="lvMetadata" PageSize="10">

                            <Fields>

                                <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>

                                <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>

                                <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>

                                <telerik:RadDataPagerGoToPageField></telerik:RadDataPagerGoToPageField>

                            </Fields>

                        </telerik:RadDataPager>
                    </LayoutTemplate>
                </telerik:RadListView>

    and I added this code to codebehind

            protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
            {
                if (e.Updated.ID == "lvMetadata")
                {
                    e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
                }

            }



  16. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 04 Apr 2014 Link to this post

    Hello Baris,

    Could you please try to set the RadAjaxManager's EnablePageHeadUpdate property to true. If this can't help please open a support ticket and send us a small runnable project that we can test and debug locally. It is essential to include all custom styles too.

    Regards,
    Venelin
    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