Telerik window automatically opens after every page refresh - c#

I am using Telerik RadControls in my project and and have a menu where I have an 'About' button. When I click the 'About' button a window pops up describing the application. The problem is if I refresh the page or navigate to another page then back to the first page the window automatically pops up.
The goal is only have that window pop up when the user clicks the about button.
here is the code I used to get that window:
<!--About Window-->
<telerik:RadWindowManager runat="server" EnableViewState="false" KeepInScreenBounds="true"></telerik:RadWindowManager>
<telerik:RadWindow ID="AboutMenu" Behaviors="Close" Animation="None" runat="server" Width="360px" KeepInScreenBounds="true" Height="360px" Modal="true" VisibleStatusbar="false" Skin="Glow">
<ContentTemplate>
<p style="text-align: center;">Sample Window Information</p>
</ContentTemplate>
</telerik:RadWindow>
Javascript
function OnClientItemClick(sender, eventArgs) {
if (window.args.get_item().get_text() == "About") {
var radwindow = window.$find(window.AboutMenu.ClientID);
window.args.set_cancel(true);
}
}
.cs
protected void MainMenu_OnItemClick(object sender, RadMenuEventArgs e)
{
if (e.Item.Text == "About")
{
AboutMenu.VisibleOnPageLoad = true;
}
}
The window works but it loads whenever the page loads and thats where I think the line AboutMenu.VisibleOnPageLoad = true comes into play and is causing the error but when I take out that line it won't display at all.

Instead of using VisibleOnPageLoad try using the following code to open the window on itemclick.
protected void MainMenu_OnItemClick(object sender, RadMenuEventArgs e)
{
if (e.Item.Text == "About")
{
string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}
}

Or, just use the OnCLientItemClicking event of the menu to open the RadWindow and cancel the postback. But you will need to fix you JS code, because the arguements are in the context of the current function. ALso, the reference to RW may break unless you have made your own array of ClientIDs.
function OnClientItemClicking(sender, eventArgs) {
if (eventArgs.get_item().get_text() == "About") {
var radwindow = window.$find(<%=AboutMenu.ClientID%>);
radwindow.show();
eventArgs.set_cancel(true);
}
}

Related

opening a radwindow from a user control

How to open a radwindow on the click event of a Imagebutton within a user control?
Moreover i have used the same code in aspx page and it works fine.
car.ascx
code behind car.ascx.cs
protected void btnCarLogo_Click(object sender, ImageClickEventArgs e)
{
carurl="https://www.google.co.in/"
ScriptManager.RegisterStartupScript(this, this.GetType(), "popCarWindow", "window.radopen('" + carurl + "', 'CarDetails');", true);
}
It has VisibleOnPageLoad property. If you set it to true, window will be visible after postback.
Examples:
Show window
myRadWindow.VisibleOnPageLoad = true;
Hide window
myRadWindow.VisibleOnPageLoad = false;
Take a look here: http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx and see that the parameters are Page and not this (i.e. UserCOntrol).
Here is on working with JS functio nnames in user controls: http://www.telerik.com/support/kb/aspnet-ajax/general/using-dynamic-unique-names-for-javascript-functions.aspx
And, if you are going to have more than one manager on the page: http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-wrong-window-opened.html.
That way probably you get errors stating that the window is null
Try it like this:
Code behind:
string script = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(ShowWindow);</script>";
ClientScript.RegisterStartupScript(this.GetType(), "showWindow", script);
Then on your aspx:
<script type="text/javascript">
function ShowWindow()
{
var oWnd = window.radopen('https://www.google.co.in/', 'window1');
}
</script>

Need Sharepoint like modal pop-up window

I need to show Sharepoint 2010 like pop-up window when clicked on a link in grid view. Once the modal pop-up displayed and user selected the Save button data base should be updated with given values in pop-up. How can I get this. Any Idea.
As of now I am using below code to get it but no idea how to pass the values to Database once clicked on the button in pop-up
Note: As of now I am not adding the gridview code here as I wanted to achieve it first with sample html then wanted to do with grid view.
Java Script
function openDialog() {
var options = {
html: divModalDialogContent, // ID of the HTML tag
// or HTML content to be displayed in modal dialog
width: 600,
height: 300,
title: "My First Modal Dialog",
dialogReturnValueCallback: dialogCallbackMethod, // custom callback function
allowMaximize: true,
showClose: true
};
SP.UI.ModalDialog.showModalDialog(options);
}
//Results displayed if 'OK' or 'Cancel' button is clicked if the html content has 'OK' and 'Cancel' buttons
function onDialogClose(dialogResult, returnValue) {
if (dialogResult == SP.UI.DialogResult.OK) {
alert('Ok!');
}
if (dialogResult == SP.UI.DialogResult.cancel) {
alert('Cancel');
}
}
// Custom callback function after the dialog is closed
function dialogCallbackMethod() {
alert('Callback method of modal dialog!');
}
HTML
<div id="divModalDialogContent">
Hello World!
<input type="button" value="OK"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;"
class="ms-ButtonHeightWidth" />
<input type="button" value="Cancel"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;"
class="ms-ButtonHeightWidth" />
<asp:Button runat="server" ID="btnClicked" Text="Clicked"
onclick="btnClicked_Click" />
<input type="button" value="Open" onclick="openDialog()" />
How can I call db upon clicking 'clicked' button in pop-up. Also I need to send parameters to pop-up
Thanks in advance
If you need ok, cancel or submit button event on popup screens which interacts with Sharepoint list/library or sql database then you need to implement event in your popup. Check below steps:-
your popup page should inherit "Microsoft.SharePoint.WebControls.LayoutsPageBase"
which should have this function:-
protected void EndOperation(int result, string returnValue)
{
string closeModal = String.Format(CultureInfo.InvariantCulture,
"<script type=\"text/javascript\">window.frameElement.commonModalDialogClose
({0}, '{1}');</script>", new object[] { result, returnValue });
this.Page.ClientScript.RegisterStartupScript(base.GetType(),
"CreatePopup", closeModal, false);
}
Implement an event which can be listen on popup action like ok button
public delegate void AddEventHandlerToSPDialogEvent(object sender, PDialogEventHandler e);
public class SPDialogEventHandler : EventArgs
{
public int dialogResult { get; set; } // 0 or 1
public string ReturnValues { get; set; } // can be url or any success/error message
public SPDialogEventHandler(int result, string list)
{
ReturnValues = list;
dialogResult = result;
}
}
Call this event from your button action in popup. for ex:
public event AddEventHandlerToSPDialogEvent ResultOk;
protected void CancelBtn_Click(object sender, EventArgs e)
{
try
{
int dialogResult = 0;
if (this.ResultOk != null)
{// Here dialogResult is 0. that means we have clicked on cancel button
ResultOk(this, new SPDialogEventHandler(dialogResult,"Action Cancelled"));
}
}
catch (Exception ex) { }
}
You can use the Ajax control toolkit, then you should look for the modal popup extender.
Like that you can add .net controls into the overlay/modal overlay and get the values in code behind
for more info see here
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
SP Popup
Open a modal/pop up form in Sharepoint 2010 with asp.net controls in it

Using onCheckedChanged with PopupControlExtender and want to prevent popup when unchecking

I am still reasonably new to this and have tried to find an answer, so hopefully I am not repeating this.
I am using ASP.NET and have a checkbox control that brings up a popup box when it's changed, using the onCheckedChanged method. This popup box has some info in it and a 'Close' button which successfully closes the popup.
What I want is to prevent the popup appearing if the checkbox is being unchecked. I currently have the onCheckedChanged calling a code behind method which cancels the extender call if the control is not checked, but the popup quickly appears before it is closed. How can I prevent it this?
This is the appropriate page code:
<div class="row" id="divDDMandate" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:CheckBox ID="chkDDMandate" Width="20px" Visible="true" runat="server" AutoPostBack="true"
OnCheckedChanged="clientchkDDMandateChanged(this);" on />
<asp:Literal ID="ltlDDMandate" runat="server">Direct Debit Mandate (by post)</asp:Literal>
<asp:PopupControlExtender ID="chkDDMandate_PopupControlExtender" runat="server"
DynamicServicePath="" Enabled="true" PopupControlID="PanelDDMandateDownload"
TargetControlID="chkDDMandate"
Position="Bottom" OffsetX="-20" OffsetY="10" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
...and this is my code behind method:
protected void chkDDMandateChanged(object sender, EventArgs e)
{
//Cancel the panel if unchecking
if ((!chkDDMandate.Checked) && chkDDMandate_PopupControlExtender.Enabled)
{
chkDDMandate_PopupControlExtender.Cancel();
}
}
I would be grateful for any help.
Cheers
Remove AutoPostBack="true" from the chkDDMandate checkbox and add script below after the ScriptManager control:
<script type="text/javascript">
function pageLoad() {
var extender = $find("<%= chkDDMandate_PopupControlExtender.ClientID %>");
extender.remove_showing(onPopupShowing);
extender.add_showing(onPopupShowing);
}
function onPopupShowing(sender, args) {
var checkBoxChecked = $get("<%= chkDDMandate.ClientID %>").checked;
args.set_cancel(!checkBoxChecked);
}
</script>
After Yuriy provided me with the event handler, I had to resort to using hidden fields to keep track of the visibility of the popup and the checkbox.
This was because I didn't want the popup to appear when the tick was being removed and the fact that the onClick method used the setting the checkbox control was being set to, whereas the onShowing method was using the current visible setting of the control. I had to use the hidden fields to keep the visibilty settings and update them at the time I wanted.
I'm surprised that the _visible property of the popup extender was always set to 'false', so I couldn't use that either.
This may be a bit of a hack, but this is my current javascript code for anyone that is interested:
<script type="text/javascript">
function pageLoad() {
// Attach an event handler for over-riding the showing Popup.
var extender = $find("PopupControlExtenderBehaviorID");
extender.remove_showing(onPopupShowing);
extender.add_showing(onPopupShowing);
// Initialise the hidden fields based on the page status after refresh.
var hfPopup = $get("ctl00_body_PopupVisibleID");
var hfCheckbox = $get("ctl00_body_CheckboxChecked");
// Popup will always be hidden on page refresh
hfPopup.value = "Hidden";
hfCheckbox.value = $get("ctl00_body_chkDDMandate").checked;
}
function onPopupShowing(sender, args) {
// This function will over-ride the Popup showing if applicable.
var popupVisible = $get("ctl00_body_PopupVisibleID");
var checkboxChecked = $get("ctl00_body_CheckboxChecked");
// If Popup hidden and 'tick' being taken out of the Checkbox, don't show the Popup.
if (popupVisible.value == "Hidden" && checkboxChecked.value == "true") {
args.set_cancel(true);
}
else if (popupVisible.value == "Hidden") {
popupVisible.value = "Visible";
}
else {popupVisible.value = "Hidden";}
}
function OnClientClickCheck(o) {
// This function will set the Hidden field value of Checkbox.
// This is because when the OnClick method reads the control checkbox value it uses the value it's
// being set to; whereas, the onPopupShowing method uses the value it is currently displaying!
var pce = $find('PopupControlExtenderBehaviorID');
var checkboxChecked = $get("ctl00_body_CheckboxChecked");
var isChecked = o.checked;
if (isChecked) {
// isChecked is what it is being changed to...
checkboxChecked.value = "false";
}
else {
checkboxChecked.value = "true";
}
pce.showPopup();
}
</script>
Thanks for the help in getting here.

Change page state with JavaScript, old state gets recalled on postback

Basically we have the "illusion" of an notification message box that exists as .Visible = false in the MasterPage. When it comes time to display a message in the box, we run a method that looks like this:
public static void DisplayNotificationMessage(MasterPage master, string message)
{
if (Master.FindControl("divmsgpanel") != null)
{
master.FindControl("divmsgpanel").Visible = true;
}
if (master.FindControl("divdimmer") != null)
{
master.FindControl("divdimmer").Visible = true;
}
TextBox thetxtbox = (TextBox)master.FindControl("txtboxmsgcontents");
if (thetxtbox != null)
{
thetxtbox.Text = message;
}
}
Basically through our designers awesome CSS voodoo, we end up with what appears to be a floating message box as the rest of the page appears dimmed out. This message box has a "Close" button to dismiss the "popup" and restore the dimmer, returning the site to the "normal" visual state. We accomplish this with JavaScript in the MasterPage:
function HideMessage() {
document.getElementById("<%# divmsgpanel.ClientID %>").style.display = 'none';
document.getElementById("<%# divdimmer.ClientID %>").style.display = 'none';
return false;
}
and the button's declaration in the .aspx page calls this HideMessage() function OnClientClick:
<asp:Button ID="btnmsgcloser" runat="server" Text="Close" style="margin: 5px;"
OnClientClick="return HideMessage()" />
The problem:
All future postbacks cause the MasterPage to "remember" the state of those divs from how they were before the HideMessage() JavaScript was executed. So in other words, every single postback after the initial call of the DisplayNotificationMessage() method causes the page to return to divmsgpanel.Visible = true and divdimmer.Visible = true, creating an endlessly annoying message box that incorrectly pops up on every postback.
The question:
Since we want the Close function to stay client-side JavaScript, how can we "notify" the page to stop reverting to the old state on postback, for just these two divs?
Can you try setting them to Visible = false in Master_Page Load event? It should hide them and reshow them just when you call DisplayNotificationMessage

Get variable & keep changes after postback

This question is related to: Hide div on clientside click
The issue I am having is that after postback event from asp.net happens onClick any clientside changes made reset how can I keep the client side changes I am making.
Second question how can I get a variable from code behind and pass it into my javascript to perform a comparison.
Html:
<div runat="server" id="someDiv1" enableviewstate="true" >
<asp:LinkButton OnClientClick="Show_Hide_Display()"
ID="lbtnDiv1"
runat="server"
CausesValidation="true"
OnClick="lbtn_onClickServer">
</asp:LinkButton>
</div>
<div runat="server" class="tick" id="div2" style="display:none;" enableviewstate="true">
</div>
Javascript:
<script type="text/javascript">
function Show_Hide_Display() {
var div1 = document.getElementById("<%=someDiv1.ClientID%>");
var div2 = document.getElementById("<%=div2.ClientID %>");
if (div1.style.display == "" || div1.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
}
else {
div1.style.display = "block";
div2.style.display = "none";
}
}
</script>
The OnClick event causes a postback like it should, on this occassion it checks if users, chosen username is available.
If it is available show a tick, if it isn't error.
I got the error working and am trying to program the tick on client side.
So OnClientClick I am able to toggle between some text and a tick. So I need to:
Get the bool result from code behind
After postback keep tick (if username is available)
I am almost there but can't quite figure the last two points out.
If you are using an UpdatePanel in your page, and assuming that div which you are trying to toggle is outside the control, you can always inject javascript on a partial postback:
Like for e.g. on your button's click event which executes on a partial postback make a call to ScriptManager.RegisterClientScriptBlock() --> How to retain script block on a partial postback?
Alternatively, you can append an end request handler. This is some javascript which should run after the partial postback. --> ASP.NET Register Script After Partial Page Postback (UpdatePanel)
The answer for the both questions lies of checking the boolean value send from the code behind.
1-----.in code-behind c#
protected void Page_Load(object sender, System.EventArgs e)
{
var linkbtn = (Button)Page.FindControl("lbtnDiv1");
linkbtn .Attributes.Add("onClick", "Show_Hide_Display('" + parameter+ "')");
}
2------- change your javascript
function Show_Hide_Display(parameter)
{
if( paramater=='true')
{
----your logic---
}
else
{
----your logic
}
}

Categories

Resources