I have created an .aspx page. The page contains one panel and within the panel, two update panels (right panel, left panel). In side the left update panel are two div tags, one representing the top half of the left update panel and the other div representing the bottom of the left update panel. It is the same with the right update panel. The bottom div in the left update panel has a Gridview.
I want to add a single (no-repeat) background image to the entire panel, so that the background image covers the whole of the panel area. When I add a background image to the panel, it only covers the top-left update panel and the top-right update panel, thereby leaving the bottom part of both update panels bare.
I have also used user controls to represent the Header, Left Navigation panel and the Right sliding panel. But I don't want the background image to be applied to the header or the two side panels, just the center panel.
I tried giving BackgroundImageURL to the panel, as well as, using CssClass attribute to link to a css class including the background image.
Here's my code (.aspx) :
<body>
<Header:main runat="server" ID="header"></Header:main>
<Leftpnl:left runat="server" ID="pnlLeft"></Leftpnl:left>
<RightPnl:right runat="server" ID="pnlRight"></RightPnl:right>
<div class="Title">
<h2>Tickets</h2>
<hr class="Sub_Title_HR" />
</div>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Pnl_New_First" runat="server">
<div class="Sub_Heading">
<asp:Label ID="Sub_1" runat="server" Text="Plan Your Trip"></asp:Label>
</div>
<asp:Panel ID="Panel_1" runat="server" CssClass="Pnl_BG">
<div class="New_Left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td class="Cell_Size">
<asp:Label ID="New_Dep_Title" runat="server" Text="Departure"></asp:Label>
</td>
<td class="Cell_Size">
<asp:Label ID="New_Arr_Title" runat="server" Text="Arrival"></asp:Label>
</td>
<td class="Cell_Size">
<asp:Label ID="New_Date_Title" runat="server" Text="Date"></asp:Label>
</td>
</tr>
<tr>
<td class="Cell_Size">
<asp:DropDownList ID="New_Dep_DDL" CssClass="DDL" runat="server">
<asp:ListItem>IND</asp:ListItem>
<asp:ListItem>KUL</asp:ListItem>
</asp:DropDownList>
</td>
<td class="Cell_Size">
<asp:DropDownList ID="New_Arr_DDL" CssClass="DDL" runat="server">
<asp:ListItem>CMB</asp:ListItem>
<asp:ListItem>KUL</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<telerik:RadDatePicker ID="New_Date1" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px">
</telerik:RadDatePicker>
</td>
<td>
<asp:Button ID="New_Search" runat="server" Text="Search" />
</td>
</tr>
<br /><br />
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table id="UL_Outbound_Tab">
<tr>
<td id="New_Outbound_Head">Outbound : <asp:Label ID="Dep_Airport" runat="server" Text=""></asp:Label> To <asp:Label ID="Arr_Airport" runat="server" Text=""></asp:Label>
</td>
</tr>
<asp:GridView ID="New_Outbound_Grid" runat="server">
</asp:GridView>
<tr>
<td>
<asp:Button ID="New_Add" runat="server" Text="Add" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="New_Right">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="New_My_Trip_Head" runat="server" Text="My Trip"></asp:Label>
<table id="New_My_Trip_Tab">
<asp:GridView ID="My_Trip_Grid" runat="server">
</asp:GridView>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="New_Tick_Val_Head" runat="server" Text="Ticket Validity Period"></asp:Label>
<table id="New_Tick_Val_Tab">
<tr>
<td>
<asp:Label ID="Val_From" runat="server" Text="Valid From : "></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="Val_From_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
</td>
<td style="width: 100%">
<asp:Label ID="Val_To" runat="server" Text="Valid To : "></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="Val_To_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
</td>
</tr>
<caption>
<tr style="margin-top: 5%">
<td style="width: 35%">
<asp:Label ID="Val_Com" runat="server" Text="User Comments : "></asp:Label>
</td>
<td>
<asp:TextBox ID="Val_Com_Txt" runat="server" Rows="5" TextMode="MultiLine" style="width: 150%; resize: none" placeholder="Text Here"></asp:TextBox>
</td>
</tr>
</caption>
</table>
<asp:ImageButton class="next1 Left_Right_Controls" runat="server" OnClientClick="next1()" ImageUrl="~/Images/Buttons/page_right_arrow.png" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:panel>
<div id="step_init" class="Steps">
<img src="Images/Steps/1.png" alt="" />
</div>
</asp:Panel>
</form>
</body>
Here's my CSS :
.Pnl_BG {
background-image: url(../Images/travelling.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
Please help...
Related
I have TabControl(AjaxToolKit) having 2 Nested ListViews.
code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TabContainer ID="tcQuestions" runat="server" ActiveTabIndex="0" OnDemand="true" AutoPostBack="false" TabStripPlacement="Top" ScrollBars="None" UseVerticalStripPlacement="false">
<asp:TabPanel ID="tpFirst" runat="server" HeaderText="Page 1" Enabled="true" ScrollBars="Auto"
OnDemandMode="Once">
<ContentTemplate>
<asp:Panel ID="pnlNoData" runat="server">
<asp:LinkButton ID="lbQuestionsAdd" Text="Add Question" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlListView" runat="server">
<asp:ListView ID="lsvQuestions" runat="server" ItemPlaceholderID="phItemPlaceHoler">
<EmptyDataTemplate>
<em>NO RECORD WAS FOUND</em>
</EmptyDataTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblQuestionID" Text='<%#Eval("intQuesId") %>' Visible="false" runat="server" />
<asp:Label ID="lblQuestionTitle" Text='<%#Eval("strQuesTitle") %>' runat="server" />
<%--1.Are you doing job?--%>
</td>
</tr>
<%--Inner Listview--%>
<asp:ListView ID="lsvAnswers" runat="server" ItemPlaceholderID="phItemPlaceHolerAnswers">
<LayoutTemplate>
<table runat="server" id="table1">
<tr runat="server" id="phItemPlaceHolerAnswers">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:PlaceHolder ID="plControl" runat="server" />
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<em>NO RECORD WAS FOUND</em>
</EmptyDataTemplate>
</asp:ListView>
</ItemTemplate>
<LayoutTemplate>
<table class="tblAll">
<tbody>
<tr>
<td style="width: 125px">
<asp:LinkButton ID="lbtnAddQuestions" runat="server">Add Questions</asp:LinkButton>
</td>
<td style="width: 316px">
<asp:LinkButton ID="lbtnDesignTools" runat="server">Design Tools</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/edit.png" />
<asp:LinkButton ID="lbEditProperties" runat="server" CssClass="lnkbuttonText">Edit Properties</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/Delete.png" />
<asp:LinkButton ID="lbCopyPage" runat="server" CssClass="lnkbuttonText">Copy Page</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/Copy.png" />
<asp:LinkButton ID="lbDeletePage" runat="server" CssClass="lnkbuttonText">Delete Page</asp:LinkButton>
</td>
<td style="width: 20px;">
<img class="imgicons" src="../Layout/images/left.png" />
</td>
<td style="width: 64px;">
<asp:Label ID="Label1" runat="server" CssClass="lnkbuttonText" Text="Move Page" />
</td>
<td style="width: 20px;">
<img class="imgicons" src="../Layout/images/right.png" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
<br />
<table class="tblAll">
<tbody>
<asp:PlaceHolder ID="phItemPlaceHoler" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</LayoutTemplate>
</asp:ListView>
</asp:Panel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Where, I am getting Question from Table "Question", and its answers from another table "Answers". Each Question is linked with a PageNumber.
so, i have to create TabPanels according to PageNumber from Question, Then Bind Question Label with that Question, and fill 2nd ListView with Answers of that Question.
These answers are dynamic controls based on db entries e.g textbox, checkboxlists, radiobutton lists and may vary for every question.
Now what i am doing is copying tabPanel 1 to new TabPanel and adding question and answers according to db values, but when i am creating 2nd TabPanel, it give me error that
Cannot unregister UpdatePanel with ID 'ContentPlaceHolder1_tcQuestions_tpFirst_updatePanel' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported.
What is the best approach to handle this scenerio.
something like SurverMonkey except i am using tabs for new page.
Ok so currently I have a ajax collapser for "advance search" options. Then I went to add a top bar for navigation which user can show/hide using ajax collapser aswell. By default that collapser is open and the search is closed. Now when i go to click to open the search options it closes the navigation panel.. I can't seem to figure out why it's doing that...Any help is more than appreciated.
<asp:UpdatePanel ID="upNorth" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlNavigation" runat="server" Width="100%">
<div style="float:left;">
<asp:Menu ID="NavOptions" CssClass="toolbar" runat="server" Orientation="Horizontal"
</asp:Menu>
</div>
<div style="float:right; margin-right:20px;">
<asp:Menu ID="NavActions" CssClass="toolbar" runat="server" Orientation="Horizontal"
</asp:Menu>
</div>
</asp:Panel>
<div id="CollapseBar" runat="server" class="bar"><asp:Image ID="iBar" runat="server" ImageUrl="../img/bar.jpg" /></div>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"
TargetControlID="pnlNavigation"
CollapsedSize="0"
Collapsed="false"
ExpandControlID="iBar"
CollapseControlID="iBar"
AutoCollapse="False"
AutoExpand="False"
SuppressPostBack="true"
ScrollContents="false"
ExpandDirection="Vertical"></ajaxToolkit:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
<div id="content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers></Triggers>
<ContentTemplate>
<table>
<tr>
<td><asp:TextBox ID="txtSearch" runat="server" /></td>
<td><asp:Button ID="btnSearch" runat="server" Text="Buscar" CssClass="buttons" /></td>
</tr>
</table>
<asp:LinkButton ID="lbShowBusqueda" runat="server" Text="Advanced Options" />
<asp:Image ID="imgCollapse" runat="server" ImageUrl="../img/down.png" />
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<td>Lastname</td>
<td><asp:TextBox ID="txtLastName" runat="server" /></td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
Collapsed="True"
ExpandControlID="lbShowBusqueda"
CollapseControlID="lbShowBusqueda"
AutoCollapse="False"
AutoExpand="False"
ImageControlID="imgCollapse"
ExpandedImage="../img/up.png"
CollapsedImage="../img/down.png"
ExpandDirection="Vertical"></ajaxToolkit:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
never mind it seems I had to specify expandsize so it stays open...weird but it works..
I'm trying to do some ajax code but am failing miserably,the code below works
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
But if i was to change the code like below,partial rendering of the page doesn't work
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Could someone please look into the code and tell me if im doing something wrong
UpdatePanel generates a div. So put you table inside and it should be fine
OK Code #1
<tr>
<td>
<div />
</td>
</tr>
Wrong Code #2
<table>
<div>
<tr>
<td>
</td>
</tr>
</div>
</table>
What you should do (put the whole table inside the UpdatePanel)
<div>
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
I have an Updatepanel inside hidden Div, but I am getting "Could not find UpdatePanel with ID 'ctl00_ContentPlaceHolder_ctl04_UpdatePanel1'. I am trying to show and hide this panel from code behind. Thanks for any help. Here is my code.
<div id="div1" runat="server" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
you can only manipulate the the code inside the ContentTemplate from the updatepanel's postbacks, so the "div1"s display property can't be changed by the updatepanel's postbacks.
you could move the div inside the updatepanel and then it should work
I'd try this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" id="div1" runat="server" style="display:none">
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
<asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the client id of div1 will no longer be div1 (unless your using .net 4 in which case you can specify that it is'div1') you can fix this a variety of ways but basically you just need to add a little bit of javascript to the page that associates the actual WebControl.ClientID with 'div1'.
I am using ajax model popup extender in my asp.net page. From my page , on click of Save button , i popup panel using model popup extender.
If i cause postback from model popup , my backend (asp.net) form controls are coming front (ie) in the panel.
Here is my code snippet,
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up_Save" runat="server">
<ContentTemplate>
<div>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="center" colspan="4">
<asp:Button ID="btn_Save" runat="server" Text="Save" Width="15%" OnClick="btn_Save_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender ID="BarrierRelayPopup" runat="server" PopupControlID="PopUp_Panel" TargetControlID="hiddenfield" CancelControlID="btn_Cancel_PopUp">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hiddenfield" runat="server" />
<asp:Panel runat="server" ID="PopUp_Panel" Width="50%" Height="30%" BackColor="Gainsboro" BorderStyle="Groove" >
<asp:UpdatePanel runat="server" ID="PopUp">
<ContentTemplate>
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_Heading" runat="server" Text="Select Relay and Barrier :"></asp:Label>
</td>
</tr>
<tr>
<td>
<B_R:Barrier_Relay ID="Barrier_Relay" runat="server"/>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_OK" runat="server" Width="60px" Text="OK" OnClick="btn_OK_Click" /> <asp:Button ID="btn_Cancel_PopUp" runat="server" Width="60px" Text="Cancel" OnClick="btn_Cancel_PopUp_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Can anybody help me in this.
If I understand you right I think what you want to do is wrap the controls inside the modal in an updatepanel. This will prevent the modal from closing if you need to do a postback from within the popup.