I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.
Related
I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.
Using ASP.Net webforms I have a pop up containing 2 tabs, which display info on a feature, 'FEATURE PROPERTIES' and 'IMAGES'. Each time a new feature is clicked the pop up is updated with the new feature details.
I was making the call back to the server where updatePanel8 was being updated. Unfortuantelly I am trying to convert my website to telerik and I am having difficulties implenting this. I have read many Q's on telerik forms some suggest trying RadAjaxPanel others suggest tryiing RadAjaxManager, but either way I cant seem to get it working as I cant use an update panel inside a panel when I am using telerik.
**MY CODE:**
<asp:Panel ID="ViewFeatureProperties" runat="server" BackColor="Snow" Width="300"
HorizontalAlign="Center">
<asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
Style="position: relative; overflow: hidden; background-color: White;
width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">
<ContentTemplate>
<div id="DivHolding2Tabs" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb" style="width:100%;border-color:Black;border-width:1px;border-style:solid;">
<ul id="tabList" style="width:100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span5" class="ActionBtns">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
**CODE BEHIND**
protected void ViewFeatureWorkflowImagePostBackBtn_Click(object sender, EventArgs e)
{
ReloadUploadedImagesForFeatureWorkflow();
}
private void ReloadUploadedImagesForFeatureWorkflow()
{
//generate the new details for the popup
UpdatePanel8.Update();
script.Append("OpenPropertiesPopUp();");
ScriptManager.RegisterClientScriptBlock(UpdatePanel8, UpdatePanel8.GetType(), "OpenPropertiesPopupCall()",
script.ToString(),
true);
}
Some exmaples I have tried are:
<telerik:radajaxmanager id="ajaxManager1" runat="server" UpdatePanelsRenderMode="Inline"><%-- defaultloadingpanelid="RadAjaxLoadingPanel1" runat="server">--%>
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ajaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:radajaxmanager>
<asp:Panel ID="Panel1" runat="server">
<div id="Div1" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb"
style="width: 100%; border-color: Black; border-width: 1px; border-style: solid;">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Text="Update the first Panel" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
<asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
<ul id="Ul1" style="width: 100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span6" class="ActionBtns">
<asp:Button ID="Button2" runat="server" Style="display: none; visibility: hidden;"
OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</asp:Panel>
<br />
<telerik:radajaxloadingpanel id="RadAjaxLoadingPanel2" runat="server" skin="Default"></telerik:radajaxloadingpanel>
code behind
UpdatePanel8.AjaxRequest;
// UpdatePanel8.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", UpdatePanel8.ClientID));
If calling the Update() server method is your requirement, I do not think you will be able to migrate to RadAjax. There is no server Update() method there, because the update panels are created dynamically.
If, however, you want to update Panel1 when ViewFeatureWorkflowImagePostBackBtn is clicked, you need an AJAX setup like this:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ViewFeatureWorkflowImagePostBackBtn">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Panel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
Where I am assuming that the ViewFeatureWorkflowImagePostBackBtn button is still somewhere in the code. If it was replaced by a button with ID Button2, the AjaxControlID setting should use Button2 instead.
I have a panel as a pop up
<asp:Panel ID="CreateGroupPanel" runat="server" BackImageUrl="~/Light-Gray-Suede1.jpg"
CssClass="style10" Visible="True"
style="position: absolute; left: 214px; top: 1262px; width: 588px; height: 467px">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" CssClass="style11" Text="Group Name*"
style="position: absolute; left: 63px; top: 92px; width: 88px; height: 19px; background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label4" runat="server" CssClass="style12" Text="Members*"
style="position: absolute; left: 67px; top: 278px; width: 66px; height: 19px; background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label5" runat="server" CssClass="style9"
Text="Groups | + Create group"
style="background-image: url('Light-Gray-Suede1.jpg')"></asp:Label>
<asp:Label ID="Label6" runat="server" CssClass="style13"
style="background-image: url('Light-Gray-Suede1.jpg'); position: absolute; left: 63px; top: 130px; width: 80px; height: 19px;"
Text="Add user(s)*"></asp:Label>
<asp:TextBox ID="GroupName" runat="server" CssClass="style109"
style="position: absolute; left: 170px; top: 91px; width: 135px; height: 22px"></asp:TextBox>
<asp:Button ID="Create" runat="server" CssClass="style106"
onclick="Create_Click"
style="background-image: url('Light-Gray-Suede1.jpg')"
Text="Create Group" />
<asp:Button ID="Cancel" runat="server" CssClass="style107" Text="Cancel"
onclick="Cancel_Click"
style="background-image: url('Light-Gray-Suede1.jpg')" />
<asp:Button ID="Add" runat="server" CssClass="style108" OnClientClick="Add_Click"
style="background-image: url('Light-Gray-Suede1.jpg')"
Text="Add" />
<asp:ListBox ID="ListBoxMembers" runat="server" CssClass="style105"></asp:ListBox>
<asp:ListBox ID="ListBoxREmoved" runat="server" CssClass="style104"></asp:ListBox>
<asp:Button ID="Button1" runat="server" CssClass="style103"
onclick="Button1_Click" Text="Remove>>" />
<asp:Listbox ID="ListBoxAddMembers" runat="server" CssClass="style102"
DataSourceID="SurelyKnown" DataTextField="FirstName" DataValueField="FirstName"></asp:ListBox>
<asp:SqlDataSource ID="SurelyKnown" runat="server"
ConnectionString="<%$ ConnectionStrings:surelyknownConnectionString %>"
ProviderName="<%$ ConnectionStrings:surelyknownConnectionString.ProviderName %>"
SelectCommand="SELECT FirstName FROM tbl_user"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
When i click add button inside the panel to add values from list box to the text box, the panel gets post back because of the add button click and the pop up is closed because of that.(but when I again click the button to open popup the Add method is performed and the value is added) how to add values to text box from the list box without the pop up being closed
Try setting ChildrenAsTrigger="false" for the update panel and specifying explicit triggers.
If you haven't already, I would put the Panel and the ModalPopupExtender (assuming that you're using AJAX Toolkit) in an UpdatePanel, and as Bala R suggested try setting ChildrenAsTrigger to false.
Using an update panel, even if the button click event still causes the popup to close, you can reopen it in the button click event, and it will appear seamless to the user since it's all being done via Ajax.
I have the following panel
<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
<div style="position:absolute; top:0; right: 0;">
<asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
</div>
<div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
<asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
<asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
<span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="padding-left: 20px; padding-top: 15px;">
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
</div>
<div style="float: left;">
<asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png" OnClick="btnMessage_click"/>
</div>
</div>
</asp:Panel>
Because this information is going to be bound server side depending on which control in a datalist is selected I have:
<cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController"
CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>
I then call mpeActiveSession.Show() in the code-behind after I bind the data.
OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.
<cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
<cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>
Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.
Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.
Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.
I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either
Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.