Archive for the ‘Ajax’ Category

Solving Calendar Extender Problem in Modal Popup Extender

September 13, 2010 3 comments

Calendar Extender control when placed inside modal popup extender will not be seen in front. To solve this issue, we have the following solution

<cc1:CalendarExtender ID="CalendarExtender1" TargetControlID="Textbox1"
 PopupPosition="Right" runat="server" <strong>OnClientShown="CalendarShown"></strong> </cc1:CalendarExtender>
function calendarShown(sender, args)
    { = 10005;
Advertisements Custom Validator and Jquery $.ajax()

When we are using custom validation and making Ajax call using jquery library, custom validation function always returns true. We can fix this, jQuery’s $.ajax() function has a handy option: async, which when set to false does what we need – it waits for the response from the server before continuing to our success function.

For detailed description with example visit:

Using AjaxControlToolkit Modal Popup

The Modal Popup extender comes with Ajaxcontrol toolkit and  allows a page to display content to the user in a “modal” manner which prevents the user from interacting with the rest of the page.


ModalPopup with In Various Scenarios using Javascript, iframes, etc

ModalPopup Examples

Other Examples can be found at

Using Ajax Update Progress

March 22, 2010 1 comment

Here in this article, we will learn how to use updateprogress control that comes ajax toolkit.

<asp:ScriptManager ID=”scriptManager” runat=”server” />

<asp:UpdatePanel ID=”UdpLogin” runat=”server”>


Content comes here…


<asp:Panel ID=”UpdateProgress” runat=”server” CssClass=”ProgressContent” Width=”100%”
<asp:UpdateProgress ID=”UpdateProg” runat=”server” DisplayAfter=”1″ AssociatedUpdatePanelID=”UdpLogin”>
<asp:Panel ID=”UpdatePro” runat=”server” CssClass=”Trans” Width=”100%” Height=”100%”>
<table width=”100%” height=”100%”>
<td align=”center” valign=”middle” width=”100%” height=”100%”>
<asp:Image ID=”imgProg” runat=”server” ImageUrl=”~/img/loading.gif” AlternateText=”Updating ……”
ImageAlign=”Middle” />

Css Styles to include here are as follows:

/* StyleSheet for Update Progress */
font-family: verdana;
font-size: 11px;
color: #000000;
font-weight: normal;
text-decoration: none;

background-color: White;
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
font-family: verdana;
font-size: x-small;
color: Green;
font-weight: bold;
text-decoration: none;
height: auto;

Please visit my previous article for downloading loading images:

Export To Excel Inside An Update Panel in

January 27, 2010 2 comments

When using export to excel inside update panel, it will popup an error like “pagerequestmanagerparsererrorexception” .

The actual problem is with Response.write, as it tries to update only certain part of the page asynchronously.

This can be solved in following ways:

1) Adding trigger :

<asp:PostBackTrigger ControlID=”btn_ExpertToExcel” />

2) Placing button outside the update panel

Refresh Content in UpdatePanel using Ajax Timer Control

January 19, 2010 1 comment

Lets say we have a requirement where we have a label control and we have assigned date time to its text, and in every 5 seconds we want to update the time, over there we need to place the label control inside the update panel and use a timer control to update its content.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<head runat="server">
    <title>Update Panel and Timer</title>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer runat="server" id="UpdateTimer" interval="5000"
          ontick="UpdateTimer_Tick" />
        <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
                <asp:AsyncPostBackTrigger controlid="UpdateTimer"
                  eventname="Tick" />
                <asp:Label runat="server" id="lbldatetime" />

In the codebehind:

protected void UpdateTimer_Tick(object sender, EventArgs e)
lbldatetime.Text = DateTime.Now.ToString();
} Ajax Calendar Extender and Past Date Validation Javascript

December 23, 2009 5 comments

When using ajax calendar extender, we want to restrict users from selecting dates in the past.So to achieve that we have to make use of OnClientDateSelectionChanged  event of calendarextender.Below is the code.

<script language=”javascript” type=”text/javascript”>

function CheckForPastDate(sender, args) {

var selectedDate = new Date();

selectedDate = sender._selectedDate;

var todayDate = new Date();

if (selectedDate.getDateOnly() < todayDate.getDateOnly()) {

sender._selectedDate = todayDate;                  sender._textbox.set_Value(sender._selectedDate.format(sender._format));

alert(“Date Cannot be in the past”);




<asp:TextBox ID=”txtDate” contentEditable=”false” runat=”server” CssClass=”txtcss”></asp:TextBox>&nbsp;

<asp:Image ID=”imgCal” runat=”server” ImageUrl=”~/img/calendar.gif” />

<cc1:CalendarExtender ID=”CalExtDate” runat=”server” FirstDayOfWeek=”Sunday” PopupButtonID=”imgCal”PopupPosition=”BottomLeft” Format=”dd/MM/yyyy” OnClientDateSelectionChanged=”CheckForPastDate” TargetControlID=”txtDate”>