Develop Reference

Unable to change visibility of a div in asp.net C#

I have a div that displays loading symbol. I am setting visibility on change of a dropdown box. I want to set its visibility to false in C# after the SelectedIndexChanged method is complete.
Here is the div tag :
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage" >
<img class="loadingImg" src="../Images/ajax-loader.gif" />
</div>
Here is the jQuery function :
$(document).ready(function () {
//$('#loadingImage').hide();
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "block";
});
});
and this is how i am trying to set the visibility in C#
protected void selectSegment_SelectedIndexChanged(object sender, EventArgs e)
{
ckBLBusinessUnits.Visible = true;
loadingImage.Style["display"] = "none";
}
I tried various ways in C# like set visibility to false etc but nothing worked. Kindly help.

Change this:
loadingImage.Style["display"] = "none";
To this:
loadingImage.Style.Add("display", "none");

You can use hide and show methods to perform that action.
<div runat="server" clientidmode="Static" id="loadingImage" class="loadingImage">
<img class="loadingImg" src="loading.gif" />
</div>
<asp:DropDownList ID="selectSegment" ClientIDMode="Static"
runat="server">
<asp:ListItem Value="0">none</asp:ListItem>
<asp:ListItem Value="1">display</asp:ListItem>
</asp:DropDownList>
JS
$(document).ready(function () {
var modal = document.getElementById('loadingImage');
modal.style.display = "none";
$("#selectSegment").change(function () {
if (this.value === "1") {
$("#loadingImage").show();
} else {
$("#loadingImage").hide();
}
});
});

The div tag was outside of the updatepanel, moving the div inside of the updatepanel resolved the issue.

how to close radwindow in asp.net?

I am a using ASP.NET controller to display user detail. When RadWindow is open & I tried to close with Close button. But the problem is that after page load and post back it opens again and again. I've multi-option on page: new, save, print etc. search.
<telerik:RadWindow ID="rwReport" runat="server" Behaviors="Close" KeepInScreenBounds="true"
AutoSize="true" VisibleOnPageLoad="false" Modal="true" Title="Report ACMI Advance Payment"
DestroyOnClose="true">
<ContentTemplate>
<ucRPV:ReportViewer id="ucReportViewer" runat="server" />
</ContentTemplate>
</telerik:RadWindow>
cs file code
private void Print()
{
try
{
// this.sADPs.DisplayReport();
Hashtable reportParameters = new Hashtable();
reportParameters.Add("DataSourceName", "dsACMIAdvancePayment");
reportParameters.Add("reportName", "rptACMIAdvancePayment.rdlc");
reportParameters.Add("Id", this.hfId.Value.ToString().ConvertTo<long>());
this.ucReportViewer.clearReport();
this.ucReportViewer.showReport(reportParameters);
this.rwReport.VisibleOnPageLoad = true;
//showReport(reportParameters);
}
catch(Exception e)
{
throw e;
}
}
ASPX code:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<%# Register Src="../Reports/rpvReportViewerPopup.ascx" TagName="ReportViewer" TagPrefix="ucRPV" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%# Register Src="../Common/UserControls/ToolBarActions.ascx" TagName="ToolBarActions" TagPrefix="ucTBA" %>
</td>

Do not use the VisibleOnPageLoad property to show a RadWindow, register a script that will call its show() method. Thus, subsequent postbacks will not cause it to show up by itself: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-opening-from-server.html.
Of course, preventing the form from re-submitting as Felice suggested is another thing that may also be needed.
To translate this into code:
instead of:
this.rwReport.VisibleOnPageLoad = true;
use:
string script = "function f(){$find(\"" + rwReport.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

You can try below code : this might help-
<telerik:RadScriptBlock runat="server" ID="scriptBlock">
<script type="text/javascript">
//<![CDATA[
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function CloseWin() {
//Get the RadWindow
var oWindow = GetRadWindow();
//Call its Close() method
if (oWindow) {
oWindow.Close();
}
return false;
}
</script>
</telerik:RadScriptBlock>
And on Page: yourpage.aspx;... call the function onClientClick of button:
<asp:Button ID="btnClose" Text="Close" runat="server" CssClass="button" Enabled="true" OnClientClick="CloseWin();" />

I have experienced the same problem when you reload the page because the browser resend the information and the radwindow opens again. To avoid such behavior I have adopted the following solution:
Add a hidden filed to hold the client code:
<asp:HiddenField runat="server" ID="_repostcheckcode" />
Add the following code in the code page:
protected void Page_Load(object sender, EventArgs e)
{
CancelUnexpectedRePost();
}
private void CancelUnexpectedRePost()
{
string clientCode = _repostcheckcode.Value;
//Get Server Code from session (Or Empty if null)
string serverCode = Session["_repostcheckcode"] as string ?? "";
if (!IsPostBack || clientCode.Equals(serverCode))
{
//Codes are equals - The action was initiated by the user
//Save new code (Can use simple counter instead Guid)
string code = Guid.NewGuid().ToString();
_repostcheckcode.Value = code;
Session["_repostcheckcode"] = code;
}
else
{
//Unexpected action - caused by F5 (Refresh) button
Response.Redirect(Request.Url.AbsoluteUri);
}
}
The original article can be found here.

Add a Button with an OnClick handler with the following code:
protected void CloseRadWindow(object sender, EventArgs e)
{
rwReport.VisibleOnPageLoad = false;
}

Setting style.display from asp.net c#

I am using a Panel in an ASP.NET webpage to hide or display a selection of control in response to a client side button click. Simple script toggles the visibility
<script>
function SetToAddSurvey() {
var x = document.getElementById("NewSurveyPanel");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I now need to toggle the display property on the server side following a database transaction. I know I can't use the code
NewSurveyPanel.visible = false;
as it will cause the control to not be rendered and the above jscript to fail when it is called next.
NewSurveyPanel.Attributes["display"] = "block";
also doesn't work.
Is there an easy solution for this?
Ta.

Try this
NewSurveyPanel.Attributes["style"] = "display: none";
or
NewSurveyPanel.Attributes["style"] = "visibility: hidden";
What this does is to render the opening tag like this:
<div ....... style="display: none" ....>

Use a CSS class:
.hidden {
display: none;
}
....
NewSurveyPanel.CssClass = "hidden";

Code Behind
NewSurveyPanel.Attributes["style"] = "display: block";
ASPX
<asp:Panel ID="NewSurveyPanel" runat="server">
test
</asp:Panel>
<asp:Button runat="server" OnClientClick="SetToAddSurvey(); return false;" />
<script>
function SetToAddSurvey() {
var x = document.getElementById("<%= NewSurveyPanel.ClientID%>");
alert(x);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Javascript is not working if I add a second textbox

please help me, I'm trying to click a hidden button if the user press the ENTER key inside a text box. It works fine with one text box, but if I add another, java script don't work.
TextBox. ------------------------------------------------------------------------------------------
<pre>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click1" style="visibility: hidden; display: none;" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<script type="text/javascript">
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
</script>
<br />
<asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
</form>
</body>
</pre>
------------------------------------------------------------------------------
CODE BEHIND
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
TextBox2.Text = "It Works";
}
}

Try wrapping your javascript code inside of a document.onload function
window.document.onload = function(e){
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
//adding the second textbox
myInput = document.getElementById("TextBox2");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
}
so your script is executed once the DOM tree is fully loaded

Looking at your code you only bind your keyhandler(e) function to the element TextBox1 but not on TextBox2. Try creating a new binding code also for your TextBox2.
var myInput2 = document.getElementById("TextBox2");
if (myInput2.addEventListener) {
myInput2.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput2.attachEvent('onkeydown', this.keyHandler); /* IE hack */
}

How to open Telerik Rad Pop Up window Asynchronously?

I am opening a Telerik RadWindowManager Pop up.
There is a long Database operation to be performed.
During loading i.e. approximately for 35-40 seconds, for the moment, I keep on waiting until the process will come to an end.
Is there any way to load the design first and show a Loader / progress bar to inform the user to wait...Actually the problem gets worse when the Internet speed is slow...
Any suggestion....

Here I have a good example. See here for demo.
aspx file:
<telerik:RadScriptManager id="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"/>
<p>
Press the submit button in order to start monitoring custom progress
</p>
<asp:button ID="buttonSubmit" runat="server" Text="Submit" OnClick="buttonSubmit_Click" CssClass="RadUploadButton" />
<telerik:RadProgressManager id="Radprogressmanager1" runat="server" />
<telerik:RadProgressArea id="RadProgressArea1" runat="server" />
aspx.cs file:
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
//Do not display SelectedFilesCount progress indicator.
RadProgressArea1.ProgressIndicators &= ~ProgressIndicators.SelectedFilesCount;
}
RadProgressArea1.Localization.Uploaded = "Total Progress";
RadProgressArea1.Localization.UploadedFiles = "Progress";
RadProgressArea1.Localization.CurrentFileName = "Custom progress in action: ";
}
protected void buttonSubmit_Click(object sender, System.EventArgs e)
{
UpdateProgressContext();
}
private void UpdateProgressContext()
{
const int total = 100;
RadProgressContext progress = RadProgressContext.Current;
progress.Speed = "N/A";
for (int i = 0; i < total; i++)
{
progress.PrimaryTotal = 1;
progress.PrimaryValue = 1;
progress.PrimaryPercent = 100;
progress.SecondaryTotal = total;
progress.SecondaryValue = i;
progress.SecondaryPercent = i;
progress.CurrentOperationText = "Step " + i.ToString();
if (!Response.IsClientConnected)
{
//Cancel button was clicked or the browser was closed, so stop processing
break;
}
progress.TimeEstimated = (total - i) * 100;
//Stall the current thread for 0.1 seconds
System.Threading.Thread.Sleep(100);
}
}
Now it should be easier to integrate your code.
EDIT: To trigger your Database operation after setting up your RadProgressArea in the PageLoad, you'll need some ajax call to be made after first page load (So I just added the RadAjaxManager to the ascx file upper). Use this code to trigger your DataBase call:
javascript:
function pageLoad(sender, eventArgs) {
if (!eventArgs.get_isPartialLoad()) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StartDBOperation");
}
}
ascx.cs file:
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
if (e.Argument == "StartDBOperation")
{
// Start DB operation here..
}
}

Still an Alternative below... But not a solution
I can show a loading panel as follows while the content loads
Mark Up
<div id="loading" style=" width: 100px; height: 50px; display: none;
text-align: center; margin: auto;">
loading...
</div>
<asp:Button ID="RadButton1" runat="server"
Text="RadButton1" OnClientClick="openRadWnd(); return false;" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server"
NavigateUrl="url" ShowContentDuringLoad="false"
OnClientShow="OnClientShow" OnClientPageLoad="OnClientPageLoad">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
JavaScript
<script type="text/javascript">
var loadingSign = null;
var contentCell = null;
function openRadWnd() {
$find("<%=RadWindow1.ClientID %>").show();
}
function OnClientShow(sender, args) {
loadingSign = $get("loading");
contentCell = sender._contentCell;
if (contentCell && loadingSign) {
contentCell.appendChild(loadingSign);
contentCell.style.verticalAlign = "middle";
loadingSign.style.display = "";
}
}
function OnClientPageLoad(sender, args) {
if (contentCell && loadingSign) {
contentCell.removeChild(loadingSign);
contentCell.style.verticalAlign = "";
loadingSign.style.display = "none";
}
}
</script>

Open the RadWindow with JavaScript on the client, set the desired URL through JavaScript. Performa partial postbacks that do not dispose the RadWindow. If you obtain the URL on the server only - use the same logic, but show the loading sign initially, when the response is done call a script to change the URL of the RadWIndow again.
http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html
http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html
http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html