Server control lost its CSS style when update panel is used

Question

I am using this template for my project. I have used updatepanel in the form and inside the update panel I have taken different dropdownlist control of asp.net. Now the issue is when the page get post back the css style apply to the dropdown gets lost... As I have no detail idea about the CSS.. So please help

Now there are 2 possibility

Not to apply css to the dropdown at all
apply CSS to the dropdown after postback

If i simply drag and drop the dropdown control to the form the dropdown appears with the css.

I also used masterpage of this...I don't want to apply css to the dropdown... what to do then.. Please suggest me...

Image when page loads

enter image description here

Image after postback( if updatepanel is used) enter image description here

.aspx code

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <div class="s" runat="server" id="divError">
        <div class="round">
            <span>
                <img alt="" src="img/Error.png" />
            </span><span runat="server" id="lblError"></span>
        </div>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="drplstStd" />
    </Triggers>
        <ContentTemplate>
            <div class="actions">
                <div class="left">
                    <asp:Button ID="btnBack" runat="server" Text="Add new" Height="25px" OnClick="btnBack_Click" />
                    <br />
                    <br />
                    <br />
                    <asp:DropDownList ID="drplstStd" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
                        onselectedindexchanged="drplstStd_SelectedIndexChanged">
                        <asp:ListItem Selected="True" Text=" --Select Standard-- " Value="0"></asp:ListItem>
                    </asp:DropDownList>
                    <br />
                     <asp:DropDownList ID="drplstSem" runat="server">

                    </asp:DropDownList>
                    <br />
                    <asp:DropDownList ID="drplstSubj" runat="server" AppendDataBoundItems="true">
                        <asp:ListItem Selected="True" Text=" --Select Subject-- " Value="0"></asp:ListItem>
                    </asp:DropDownList>
                    <asp:TextBox ID="txtChapterSearch" runat="server"></asp:TextBox>
                    <asp:Button ID="btnSearch" runat="server" Text="Search" Height="25px" OnClick="btnSearch_Click" />
                </div>
            </div>
            <fieldset>
                <legend>Chapter details </legend>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand"
                    AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="10"
                    CssClass="grid" CellPadding="3" BorderColor="#CCCCCC" BorderWidth="1px" BackColor="White"
                    BorderStyle="None">
                    <RowStyle BackColor="#F6F6F6" ForeColor="#333333" />
                    <Columns>
                        <asp:TemplateField HeaderText="Id" Visible="False">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("ChapterID") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle Width="30px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Standard">
                            <ItemTemplate>
                                <asp:Label ID="Label2" runat="server" Text='<%# Bind("Standard") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle Height="50px" />
                            <ItemStyle Height="25px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Semester">
                            <ItemTemplate>
                                <asp:Label ID="Label3" runat="server" Text='<%# Bind("Semester") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Subject">
                            <ItemTemplate>
                                <asp:Label ID="Label4" runat="server" Text='<%# Bind("Subject") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Chapter">
                            <ItemTemplate>
                                <asp:Label ID="Label5" runat="server" Text='<%# Bind("ChapterName") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ShortForm">
                            <ItemTemplate>
                                <asp:Label ID="Label6" runat="server" Text='<%# Bind("ChapterSName") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField ShowHeader="False">
                            <ItemTemplate>
                                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandArgument='<%#((GridViewRow)Container).RowIndex%>'
                                    Text="Edit" CommandName="EditDetails"></asp:LinkButton>
                            </ItemTemplate>
                            <ItemStyle Width="100" />
                        </asp:TemplateField>
                        <asp:TemplateField ShowHeader="False">
                            <ItemTemplate>
                                <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandArgument='<%#((GridViewRow)Container).RowIndex%>'
                                    Text="Delete" CommandName="DeleteDetails" OnClientClick="if (!window.confirm('Are you sure you want to delete this item?')) return false;"></asp:LinkButton>
                            </ItemTemplate>
                            <ItemStyle Width="100" />
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <PagerStyle CssClass="rowheader" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle CssClass="rowheader" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="#FDFDFD" ForeColor="#284775" />
                </asp:GridView>
             <legend>
                    <asp:ImageButton ID="btnDisplay" runat="server" ImageUrl="~/Admin/img/view_refresh.png"
                        Height="16px" Width="16px" OnClick="btnDisplay_Click" />
                    <asp:Label ID="lblDisplay" runat="server" Text="Label"></asp:Label>
                </legend>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Aghilas Yakoub · Accepted Answer · 2013-03-19 10:34:09Z

1

You can register your css in OnInit event

string cssLocalisation  = string.Format("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />", ResolveUrl(YourFile));

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    var scriptManager = ScriptManager.GetCurrent(Page);
    if ( ! scriptManager.IsInAsyncPostBack)
    {
         ScriptManager.RegisterClientScriptBlock(this, typeof(YourControl), "YourKey", cssLocalisation, false);
    }
 }

answered Mar 19, 2013 at 10:34

Aghilas Yakoub

29k5 gold badges49 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Server control lost its CSS style when update panel is used

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related