I have a simple ASP.NET form that Im using to learn some AJAX controls.
My code is:
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px"
BorderStyle="Solid" BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel1" runat="server">
</ajaxToolkit:DragPanelExtender>
</form>
My problem is that when I drag the Panel it doesn't stay where I leave it. It immediately moves back. shouldn't it stay where I leave it. I appreciate if I postback it will move back but I'm staying on the page incurring no new events.
Is this right?
Mike
I never used drag panel but I think there is something wrong with your markup.
Both the DragHandleID and TargetControlID are set to Panel1 which is wrong.
DragHandleID="Panel1" TargetControlID="Panel1"
According to the example on the Ajax site it's markup is http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
In the above markup they have used different panels for the targetControlID and DragHandleID
so you should update your markup as
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
</ajaxToolkit:DragPanelExtender>
Related
I'm trying to set focus on a control after Postback but its not working. below are the details.
I have some code inside a Panel. Panel will be open closed using ajax.
There is a radio button inside panel ... Once I click the radio button, i want to focus on that control but it goes to start of the page due to post back.
I tried
1. SetFocus(controlID);
2. controlID.Focus();
3. set focus to control in javascript also
but no solution working.
This is a long page ... I have more panels in it. Not sure why my solutions are not working.
Attached my code below:
<Panel> first panel comes here...</Panel>
<div class="demoarea">
<asp:Panel ID="pnl_2_Header" runat="server" CssClass="collapsePanelHeader" Height="30px">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">User's Information</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lbl_2_Header" runat="server" Visible="False">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="img_2_Header" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" Visible="False"/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnl_2" runat="server" CssClass="collapsePanel" Height="0" BorderStyle="solid" BorderWidth="1">
<table width="100%" style="text-align:left;font-weight:300;" cellpadding="7">
<tr valign="top">
<td style="width:50%;">
School in Primary 6 :
<br /><br />
<asp:RadioButton ID="rdoPri1" runat="server"
Text="sometext" GroupName="pri" value="1"
AutoPostBack="True" oncheckedchanged="rdoPri1_CheckedChanged" /> <br />
<asp:RadioButton ID="rdoPriOther" runat="server" Text="Others"
GroupName="pri" value="2" AutoPostBack="True"
oncheckedchanged="rdoPriOther_CheckedChanged" />
<asp:TextBox ID="txtPriOther" CssClass="txt" Width="50%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqPriOther" ValidationGroup="pnl_2" Visible="false" runat="server" ControlToValidate="txtPriOther" Text="*" ErrorMessage="*" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe_2" runat="Server"
TargetControlID="pnl_2"
ExpandControlID="pnl_2_Header"
CollapseControlID="pnl_2_Header"
Collapsed="True"
TextLabelID="lbl_2_Header"
ImageControlID="img_2_Header"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true"
SkinID="CollapsiblePanelDemo" />
<Panel> 3rd Panel </Panel>
...
Code behind:
protected void rdoPri1_CheckedChanged(object sender, EventArgs e)
{
-- Some code here --
//SetFocus(pnl_2);
rdoPri1.Focus();
}
Web form server control event will trigger postback when Autopostback is set to true. It means your Set focus will not be working expected after one of the controls triggered postback.
So, my personal opinion, it you need such a UI/UX design, I would suggest to use client script instead.
Add the same control.Focus() or setfocus in page load, and add conditions like if needed
//in page load
if (rdoButton1.Checked) {//setfocus here}
Spent pretty much the whole day one this and have scoured as many sites as I can find without help.
I have a panel on an asp.net page that is hidden until the user clicks a linkbutton. The panel contains a DataList. Here's the .aspx:
<asp:Panel ID="pnlManageYourGallery" Visible="false" runat="server">
<div style="width:70%; height:90%; position:fixed; left:200px; top:10px; background-color:White; background-color:#f1f1f1 ">
<center>
<h1>Manage Your Gallery</h1></center>
<div style="position:absolute; top:50px; left:25px; margin-left:auto; margin-right:auto; height:90%; width:50%; background-color:white; overflow:auto;">
<asp:DataList ID="dlManageGallery" runat="server" DataSourceID="SqlDataSourceManageGallery" RepeatDirection="Horizontal" RepeatLayout="Flow" DataKeyField="RecNum">
<ItemTemplate>
<div style="position:relative; background-color:#fafad2; padding:10px; margin:10px; border: 5px solid #b0c4de; border-radius: 3px; width:90%;">
<p>Image No.
<%# Eval( "RecNum") %> Uploaded
<%# Eval( "UploadDate") %>
</p>
<center><img src='<%# Eval("ImageFilename") %>' width="50%" /></center>
<br /> Caption:
<asp:TextBox ID="txtImageCaption" Width="400" Text='<%# Eval("Caption") %>' runat="server"></asp:TextBox>
<br />
<br />
<center>
<asp:Panel id="pnlImageControls" visible="true" runat="server">
<asp:LinkButton ID="lnkDeleteImage" CommandName="DeleteImage" Text="Delete this image" runat="server"></asp:LinkButton>
<asp:LinkButton ID="lnkSaveImageChanges" CommandName="SaveChanges" CommandArgument='<%# Eval("RecNum") %>' Text="Save Changes" runat="server"></asp:LinkButton>
</asp:Panel>
</center>
</div>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSourceManageGallery" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString2 %>" SelectCommand="SELECT [RecNum], [ImageFilename], [Caption], [UploadDate] FROM [tblGallery] ORDER BY [RecNum] DESC">
</asp:SqlDataSource>
</div>
<asp:Panel ID="pnlImageDeleteWarning" Visible="false" runat="server">
<div style="position:fixed; left:600px; top:300px; background-color:White; border:5px solid red; padding:10px;">
<center>
<p style="color:Red; font-weight:bold;">Are you sure you want to delete this image?</p>
<asp:Button ID="btnDeleteImage" CommandName="DeleteImageConfirm" CommandArgument='<%# Eval("RecNum") %>' Text="Yes, delete this image" runat="server" />
<asp:Button ID="btnCancelDelete" CommandName="DoNotDelete" text="No, do not delete" runat="server" />
</center>
</div>
</asp:Panel>
</div>
</asp:Panel>
As can be seen, each data item in the DataList contains panels that contain other controls. What I need to do is, upon clicking the lnkDeleteImages link, the pnlImageControls panel should hide and the pnlImageDeleteWarning should show. Here's the codebehind for that:
Private Sub dlManageGallery_ItemCommand(source As Object, e As System.Web.UI.WebControls.DataListCommandEventArgs) Handles dlManageGallery.ItemCommand
Dim pnlImageControls As Panel = CType(e.Item.FindControl("pnlImageControls"), Panel)
Select Case e.CommandName
Case "DeleteImage"
pnlImageControls.Visible = False
pnlImageDeleteWarning.Visible=True
End Select
End Sub
Now, I've tried every variation of the FindControl method that I could find on the internet, and nothing has worked.
However, while debugging at a breakpoint, using ? pnlImageControls.visible on the immediate window, it returns the value 'true' before the click, and 'false' after the click. The control thinks it's invisible, but it's not.
I've even tried -- without expecting a good result -- an update panel, and I got what I was expecting.
OK, so that's where it is on this page. I have another .aspx page in this same project in which I am doing the exact same thing -- setting the visible property of a panel within a datalist item template -- and it works just fine. The only thing different between the two pages is that the page on which it works is a standalone page, i.e. not part of the site.master. The page on which it is not working is part of the site.master, residing in a ContentPlaceHolderID="MainContent"block. So I've tried doing a findcontrol drilling down through the MainContent block to the Datalist ItemTemplate. When I do that, it throws a Null Reference error when it gets to the panel.
I hope I've explained this properly.
Can someone tell me what I am doing wrong?
I am trying to center the radmediaplayer telerik control, but to no avail. Please help thank you.
<asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade">
<asp:Panel ID="pnlInner3" runat="server" CssClass="modal-dialog" >
<asp:Panel ID="pnlContent4" CssClass="modal-content" runat="server">
<asp:Panel runat="server" class="modal-header">
<h4 class="modal-title" >Clip Player</h4>
</asp:Panel>
<asp:panel runat="server" class="modal-body">
<telerik:RadScriptManager runat="server" ID="RadScriptManager2" />
<div style="text-align:center;">
<telerik:RadMediaPlayer ID="ClipPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px" DestroyOnClose ="true">
</telerik:RadMediaPlayer>
</div>
</asp:panel>
<asp:panel runat="server" class="modal-footer">
<asp:Button ID="Button4" runat="server" Text="Close" OnClick="btnClose_Click" class="btn btn-default"/>
</asp:panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
First, two generic issues:
RadMediaPlayer does not have a DestroyOnClose property. RadWindow has.
The script manager should be your first control inside the .
Back to your question - what exactly is not working? have you tried setting margin: auto to the div element that is the media player control? This worked for me in a basic setup:
<div>
<telerik:RadMediaPlayer ID="ClipPlayer" CssClass="centeredPlayer" runat="server" AutoPlay="true" Height="400px" Width="400px">
</telerik:RadMediaPlayer>
</div>
and
.centeredPlayer
{
margin: auto;
}
If it does not work for you, inspect the rendered HTML to see what CSS is in play. Substitute RadMediaPlayer with a simple div and center that first.
Anybody help me to resolve this issue ?
I am displaying one grid on hover of linkbutton using AJAX hovermenu extender.
But when page is loading first time or on postback, that grid is displaying.
Below is the code:
<asp:LinkButton ID="lnkItm" runat="server" Text="Click"></asp:LinkButton>
<AjaxToolKit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="lnkItm"
PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right" OffsetX="0"
OffsetY="0" PopDelay="50" />
<asp:Panel CssClass="PopupMenu" ID="PopupMenu" runat="server">
<asp:GridView ID="grd" runat="server" Width="100px" AutoGenerateColumns="False">
<Columns>
...
</Columns>
</asp:GridView>
</asp:Panel>
Please let me know how to resolve this issue.
Add this.It will hide the popup when the page loads.
<style type="text/css">
.PopupMenu
{
display: none;
}
</style>
I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>