Rajesh Kamalakshan: How set focus to a control in a ModalPopupExtender while loading and hiding?(add_shown & add

In this topic, I’ll discuss the Client events we usually need while using ModalPopupExtender. The add_shown fires when the ModalPopupExtender had shown and add_hiding fires when the user cancels it by CancelControlID,note that it fires before hiding the modal.

They are useful in many cases, for example may you need to set focus to specific Textbox when the user display the modal, or if you need to reset the controls values inside the Modal after it has been hidden.

You can attach your fucntions by using the Sys.Application.add_load(functionName)
Note :"functionName" should be the name of the function which is used to initialize the events add_hiding and add_shown of the ModalPopupExtender

Inside the fucntion "functionname" you can attach the your functions to the events like below

Please go through the full expample below to understand the woking of these events better.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register assembly="System.Web.Ajax" namespace="System.Web.UI" tagprefix="asp" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type ="text/javascript" >
     function OnPageLoad()
     {  
        Sys.Application.add_load(Initializeevenet);
     }
    function OnShown()
    {
        $get("<%=TextBox1.ClientID %>").value="Value Changed";
        $get("<%=TextBox1.ClientID %>").focus();
    }
    function OnHiding()
    {
        alert("closing POPUP");
    }
    function Initializeevenet()
    {
        var modalPopup = $find("<%=cmdShow_ModalPopupExtender.ClientID %>");// <. this is the BehaviorID from the ModalPopupExtender
        modalPopup.add_shown(OnShown);    
        modalPopup.add_hiding (OnHiding);          
    }

</script>
<style>
.bg
{
 background-color:Gray;
 filter:alpha(opacity=70);
 opacity:0.7;
}
</style> 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        cmdShow.Attributes.Add("Onclick", "return  false");
    }
</script>
</head>
<body onload="OnPageLoad()" >
    <form id="form1" runat="server">
    <div>
    
        <asp:AjaxScriptManager ID="AjaxScriptManager1" runat="server">
        </asp:AjaxScriptManager>
        <asp:Button ID="cmdShow" runat="server" Text="Show" UseSubmitBehavior="False" 
            Width="56px" />
    
        <asp:ModalPopupExtender ID="cmdShow_ModalPopupExtender" runat="server" 
            DynamicServicePath="" Enabled="True" PopupControlID="Panel1" 
            TargetControlID="cmdShow" BackgroundCssClass="bg" 
            CancelControlID="cmdClose">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server">
            <asp:TextBox ID="TextBox1" runat="server" Text="Hello World"></asp:TextBox>
            <asp:Button ID="cmdClose" runat="server" Text="Close" 
                UseSubmitBehavior="False" />
        </asp:Panel>
    </div>
</form>
</body>
</html>

Rajesh Kamalakshan

Monday, April 26, 2010

How set focus to a control in a ModalPopupExtender while loading and hiding?(add_shown & add_hiding ModalPopupExtender Events )

No comments:

Post a Comment