server side event for the button having modal pop up extender - asp.net

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>

Related

Set Focus not working in asp.net

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}

Attempting to center a telerik control in a bootstrap popup

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.

Launch modal popup extender when button is pressed

I have a button setup to export my gridviews to word. Everything works fine, except I cannot find a way to launch/cancel my modalpopupextender I use to show that processing is happening. If I add it the button click:
btnExportToWord.Attributes.Add("onclick", "StartProgressBarNoValid()") it does not canel the modalpopupextender
Here is the update panel and the javascript function I use.
function StartProgressBarNoValid() {
var myExtender = $find('ProgressBarModalPopupExtender');
ProgressImg = document.getElementById('MyImage');
setTimeout("ProgressImg.src = ProgressImg.src", 10);
myExtender.show();
return true;
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
backgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField1" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<img id="MyImage" src="../Images/Vista_Searching_Bar.gif" alt="" />
<div id="processMessage" style="width:200px;" ><br /><br /> Loading...<br /><br />
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
what is wrong with ProgressBarModalPopupExtender.Show() and ProgressBarModalPopupExtender.Hide() from the codebehind?

Ajax Rating control in popup

I am developing a page to display some videos with asp .net fw3.5. The page will display a list of videos with thumbnails. When the user clicks a video thumb i will open a popup and show the video in the popup. There will be a rating control in the video.the user can vote for the video using the ajax rating control. the popup should remain shown after rating control is clicked.
I have done some of the coding but the problem is I cant get the current rating of the rating control without doing a postback. I can make the popup always visible by using an update panel but if i do so the close button of the modal popupextender doesnt work and i cannot close the modal popup. Here is my related code portion:
<asp:Button ID="Button1" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay"
TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="PopupCss">
<table style="width: 100%; height: 100%;">
<tr>
<td>
<div id="mediaplayer">
JW Player goes here</div>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "jwplayer/player.swf",
file: "<%=videoName %>",
image: "<%=videoThumb %>",
width: "100%",
height: "100%"
});
</script>
</td>
<td valign="top" align="left" style="text-align: left;">
<div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true">
</div>
<br />
<div class="fb-comments" data-href="<%=videoLink%>"
data-num-posts="3" data-width="470">
</div>
<br />
<br />
<br />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
</a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
</a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"></script>
<!-- AddThis Button END -->
<br />
<br />
<asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
AutoPostBack="true" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
WaitingStarCssClass="ratingStarEmpty">
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
</asp:Rating>
&nbsp (<%=voteCount%>)
<br />
Minder Score:
<%=minderScore %>
<br />
<div class="Controls" style="text-align: left;">
<input id="btnOkay" type="button" value="Kapat" />
</div>
</td>
</tr>
</table>
</asp:Panel>
How can i manage to have the desired functionality.
Any help will be appreciated.
Thanks
The easiest way to do it is to warp it with an UpdatePanel
<br />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
AutoPostBack="true" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
WaitingStarCssClass="ratingStarEmpty">
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
</asp:Rating>
</ContentTemplate>
</asp:UpdatePanel>
For the part of total vote count, if you like to include it inside the UpdatePanel you need to change it with asp:literal controls, and render inside this control the results. So if you like to include this code inside the UpdatePanel, for automatic update them,
&nbsp (<%=voteCount%>)
<br />
Minder Score:
<%=minderScore %>
you need to write it as
&nbsp (<asp:Literal runat="server" id="txtVoteCount" />)
<br />
Minder Score: <asp:Literal runat="server" id="txtMinderScore" />
and on code behind place this values.
If you see this sample http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Rating/Rating.aspx
and get the source code from the SDK, this is the way is doing it.

AJAX popup control extender - how do I put on a Cancel button?

Normally with an AJAX popup control extender, you simply select the item and your selection will populate the associated control.
However if I want to populate the control either directly or by a drop down list, then I would like to have a submit button and a cancel button.
I have found how to put in a Submit button. But how do I put in a cancel button?
<asp:TextBox runat="server" ID="txtWeek1MonAMTimeIn" Width="40px" />
<cc1:PopupControlExtender
ID="PopupControlExtenderWeek1TimeIn" runat="server"
PopupControlID="pnlWeek1MonAMTimeIn"
Position="Bottom"
TargetControlID="txtWeek1MonAMTimeIn"
>
</cc1:PopupControlExtender>
<!-- Panel for editing data -->
<asp:UpdatePanel runat="server" ID="UDPWeek1MonAMTimeIn">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlWeek1MonAMTimeIn" CssClass="popupControl"
onprerender="pnlWeek1MonAMTimeIn_PreRender">
<div class="span-7" style="padding:10px;">
<div>
<div class="span-2">
Time In
</div>
<div class="span-5">
<lib:input runat="server" id="libWeek1MonAMTimeIn" DataType="Time" />
</div>
</div>
<div>
<div class="span-2">
Time Out
</div>
<div class="span-5">
<lib:input runat="server" id="libWeek1MonAMTimeOut" DataType="Time" />
</div>
</div>
<div>
<div class="span-2">
Not in
</div>
<div class="span-5">
<asp:DropDownList runat="server" ID="ddlLeaveWeek1MonAM" />
</div>
</div>
<div>
<div class="span-2">
<asp:Button runat="server" ID="btnCancelWeek1MonAMTimeIn" UseSubmitBehavior="false" Text="Cancel" onclick="btnCancelWeek1MonAMTimeIn_Click" />
</div>
<div class="span-5">
<asp:Button runat="server" ID="btnSubmitWeek1MonAMTimeIn" Text="Submit"
UseSubmitBehavior="false" onclick="btnSubmitWeek1MonAMTimeIn_Click" /></div>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
protected void btnSubmitWeek1MonAMTimeIn_Click(object sender, EventArgs e)
{
PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(string.Empty);
}
use ModalPopupExtender,
it has CancelControlId as property
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

Resources