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

CSS Formatting Lost

14 Answers 536 Views

Ajax

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

Joe asked on 13 Aug 2009, 12:13 AM

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

14 Answers, 1 is accepted

Accepted

answered on 13 Aug 2009, 01:01 PM

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.

answered on 09 Oct 2009, 01:09 PM

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>

answered on 09 Oct 2009, 01:24 PM

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.

answered on 20 Mar 2014, 01:15 PM

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#?

answered on 31 Mar 2014, 11:59 AM

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.

answered on 01 Apr 2014, 11:27 AM

afterpostback.png

beforepostback.png

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;
}

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

CSS Formatting Lost

14 Answers, 1 is accepted