Client-side Zoom Window for Textbox in ASP.NET

Introduction

An image button next to a textbox server control launches a div window displaying the content of the textbox. The window also allows the user to edit the content and paste it back to the textbox. All this happens on the clientside without any postback.

Background

Many web developers prefer to wrap their ASP.NET server textbox controls into user controls that include validation, labels, FAQ note, etc. One feature that users requested was a large size scrollable popup window through which they can see the contents of a textbox and also edit and submit it back on the clientside. A multi-line textbox may not be enough in some cases.

Using the Code

First add your textbox and the image right next to it in the aspx code:

<div style="float:left"><asp:TextBox ID="txt" runat="server" Width="200px" /></div>
<div style="float:left">
<img alt="zoom text" id="imgZoom" runat="server" style="cursor:pointer;" /></div>	

Next, you add the DIV popup to the aspx page. This remains hidden by default. This DIV includes the multiline textbox to hold the content, a submit button to post the changes back to the parent textbox, a cancel button to close the popup without any changes, and a hidden input to hold the parent textbox id.

<div id="divZoom" style="z-index:1000;" style="font-size:smaller;
	font-family:Arial;position:absolute;top:0; left:8;visibility:hidden;
	background-color:#C0C0C0;padding:3px 3px 3px 3px;border:solid 1px black;">
    <asp:TextBox runat="server" ID="txtZoom" TextMode="MultiLine" Wrap="false" 
	Width="400px" Height="300px"></asp:TextBox><br />
    <button id="btnZoomSubmit" onclick="HideZoom(true);return false;" 
	style="cursor:hand;">Submit</button>&nbsp;<button id="btnZoomCancel" 
	onclick="HideZoom(false);return false;" style="cursor:hand;">Cancel</button>    
    <input type="hidden" id="txtid" name="txtname" value="txtvalue" />
</div>   

In the page pre-render method, add the JavaScript call to the imagebutton depending on the enable/readonly state of the textbox. Below are the two images I used - one for enabled state and other for disabled state of the textbox.

Enabled textbox, show this:

Disabled textbox, show this:

 private void Page_PreRender(object sender, System.EventArgs e)
 {      
        if (txt.Enabled && !txt.ReadOnly)
        {   //add onclick call
            imgZoom.Attributes.Add("onclick", "ShowZoomPopup('" + txt.ClientID + "');");
            imgZoom.Src = "../images/txtzoom.png";
        }
        else
        {   //remove onclick call
            imgZoom.Attributes.Add("onclick", ""); 
            imgZoom.Src = "../images/txtzoomdisabled.png";     
        }
}		 

This goes in the JavaScript section of the aspx:

<script language="JavaScript" type="text/javascript" >   

        function ShowZoomPopup(txtboxid) {
            
            //GET THE TEXTBOX VALUE
            var txtbox = document.getElementById(txtboxid);
            var strTextBoxValue = document.getElementById(txtboxid).value;
            
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Visible";
            hp.style.top = getAbsoluteTop(txtbox) + 'px';
            hp.style.left = (getAbsoluteLeft(txtbox) + 2) + 'px';
            txtZoom = document.getElementById('ctl00_txtZoom');
            txtZoom.value = strTextBoxValue;
            
            //SET THE HIDDEN FIELD WITH TXT ID
            document.getElementById('txtid').value = txtboxid;
        }
	function HideZoomPopup(status) {
	    //IF TRUE (SUBMIT BUTTON WAS CLICKED i.e. COPY DATA TO TEXTBOX)
	    //FALSE MEANS CANCEL BUTTON WAS CLICKED.
            if (status) {
		//GET HIDDEN CONTROLS DATA
                var txtboxid = document.getElementById('txtid').value;
                document.getElementById(txtboxid).value = 
		document.getElementById('ctl00_txtZoom').value;     
            }
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Hidden";
        }
        function getAbsoluteLeft(objectId) {
            o = objectId; 
            var objwidth = o.offsetWidth;
            oLeft = o.offsetLeft;           
            while (o.offsetParent != null) {   
                oParent = o.offsetParent;    
                oLeft += oParent.offsetLeft;
                o = oParent;
            }

            return oLeft;
        }

        function getAbsoluteTop(objectId) {
	        o = objectId;
	        oTop = o.offsetTop  ;          
	        while(o.offsetParent!=null) { 
		        oParent = o.offsetParent;  
		        oTop += oParent.offsetTop; 
		        o = oParent;
	        }

	        return oTop;
        } 
</script> 

That's it!

History

• 23^rd September, 2010: Initial post