7: Control Development in a Partial Postback Environment
Make EAN 13 In VS .NETUsing Barcode printer for ASP.NET Control to generate, create European Article Number 13 image in ASP.NET applications.
So far, so good When we add a HoverCard to a test page, shown in Listing 716, it works as expected We can drag it around by the title bar and it displays the information correctly
Encode Barcode In Visual Studio .NETUsing Barcode encoder for ASP.NET Control to generate, create bar code image in ASP.NET applications.
Listing 716 HoverCard Test Page
Making EAN-13 In Visual Studio .NETUsing Barcode drawer for VS .NET Control to generate, create GTIN - 13 image in Visual Studio .NET applications.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HoverCardTesteraspxcs" Inherits="_7HoverCardTester" %> <%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %> <html> <head runat="server"> <title>HoverCard Tester</title> </head> <body style="width:100%;height:750px"> <form id="form1" runat="server"> <asp:ScriptManager ID="SM1" runat="server" /> <cc1:HoverCard ID="HC" runat="server" /> </form> </body> </html>
EAN-13 Supplement 5 Encoder In Visual Studio .NETUsing Barcode creation for ASP.NET Control to generate, create EAN13 image in ASP.NET applications.
Figure 713 shows the HoverCard s initial position, and Figure 714 shows the HoverCard s position after we ve dragged it a bit to the right
Make USS Code 39 In Visual Studio .NETUsing Barcode maker for ASP.NET Control to generate, create Code39 image in ASP.NET applications.
Figure 713 The HoverCard s initial location
Barcode Encoder In .NET FrameworkUsing Barcode drawer for ASP.NET Control to generate, create bar code image in ASP.NET applications.
The Effe cts of a Partial Postback on Client Components
Code128 Creation In .NET FrameworkUsing Barcode encoder for ASP.NET Control to generate, create Code 128 image in ASP.NET applications.
Figure 714 The HoverCard after we ve dragged it a bit
Encode Barcode In .NET FrameworkUsing Barcode creator for ASP.NET Control to generate, create barcode image in ASP.NET applications.
However, problems start to occur when the HoverCard is placed within a div tag that is positioned somewhere on the page The HoverCard s initial position seems to be offset by the div tag s position on the screen, and clicking its header causes the HoverCard to initially move by the same offset Listing 717 shows the modi cations to our test page with the div tag
Print Universal Product Code Version A In .NETUsing Barcode creator for ASP.NET Control to generate, create UPC-A Supplement 5 image in ASP.NET applications.
Listing 717 HoverCard Test Page with div Tag
Drawing International Standard Book Number In .NETUsing Barcode generation for ASP.NET Control to generate, create International Standard Book Number image in ASP.NET applications.
<form id="form1" runat="server"> <asp:ScriptManager ID="SM1" runat="server" /> <div style="position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; border: solid 1px black;"> <cc1:HoverCard ID="HC" runat="server" /> </div> </form>
Bar Code Maker In JavaUsing Barcode printer for Java Control to generate, create barcode image in Java applications.
Figure 715 shows the original position of the HoverCard, and Figure 716 shows the position of the HoverCard right after we clicked the HoverCard s header Notice how the cursor is in one spot, but the HoverCard is not under it
UPCA Generation In VS .NETUsing Barcode creation for VS .NET Control to generate, create GTIN - 12 image in VS .NET applications.
7: Control Development in a Partial Postback Environment
Barcode Recognizer In JavaUsing Barcode scanner for Java Control to read, scan read, scan image in Java applications.
Figure 715 Initial position of the HoverCard in the div tag
EAN128 Creator In JavaUsing Barcode encoder for Java Control to generate, create EAN / UCC - 14 image in Java applications.
Figure 716 The HoverCard s position after we ve clicked the header
Barcode Maker In VB.NETUsing Barcode drawer for .NET Control to generate, create barcode image in Visual Studio .NET applications.
This is obviously not good If we play around with our div tag, we can make the problem even more pronounced
Code 128 Creation In Visual C#.NETUsing Barcode encoder for VS .NET Control to generate, create Code 128 image in VS .NET applications.
NOTE
Data Matrix ECC200 Scanner In .NETUsing Barcode decoder for Visual Studio .NET Control to read, scan read, scan image in .NET framework applications.
The Purpose of Wrapping the HoverCard in a div Tag
Data Matrix 2d Barcode Maker In VS .NETUsing Barcode generator for VS .NET Control to generate, create Data Matrix ECC200 image in Visual Studio .NET applications.
Wrapping the HoverCard control in a div tag simulates it being contained within another control, a situation that is most likely going to come up
Code 128 Code Set B Encoder In JavaUsing Barcode creation for Java Control to generate, create Code 128 image in Java applications.
The Effe cts of a Partial Postback on Client Components
Bar Code Drawer In Visual C#.NETUsing Barcode printer for .NET framework Control to generate, create barcode image in .NET applications.
Without delving into the causes of the positioning problems too deeply, we ll tell you two things First, the cause of the problem is the DragPanel Extender Second, if we move our HoverCard s associated DOM element so that it is a child of the body element rather than a child of the div tag, the problem is corrected
NOTE
DragPanelExtender
We re not trying to pick on the DragPanelExtender with this example We may be using it incorrectly, but it does help us elucidate the concept we re trying to cover very nicely
In light of this knowledge, we re going to alter our HoverCardjs le a bit so that it automatically moves the HoverCard s associated DOM element to be a child of the body tag instead of where it was originally positioned in the DOM tree Listing 718 highlights the changes needed to accomplish this
Listing 718 Altering HoverCard s initialize Method to Move the Element to the Body
initialize: function() { HoverCardcallBaseMethod(this, 'initialize'); var elm = thisget_element(); elmparentNoderemoveChild(elm); documentbodyappendChild(elm); },
Now when we view our test page, our HoverCard works as it did before and is positioned correctly But (there s always a but, isn t there ), we caused ourselves a hidden problem We caused the problem by moving the HoverCard from its original DOM location and therefore it won t automatically be destroyed when it is contained within an updating UpdatePanel Listing 719 sets up this situation by updating our page s markup and wrapping our HoverCard in an UpdatePanel
7: Control Development in a Partial Postback Environment
Listing 719 Placing Our HoverCard in an UpdatePanel
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div style="position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; border: solid 1px black;"> <cc1:HoverCard ID="HC" runat="server" /> </div> <asp:Button ID="tstButton" Text="Update" runat="server" /> </ContentTemplate> </asp:UpdatePanel>
When we initially run the page, the HoverCard is displayed properly and we re able to move it about Figure 717 displays the initial view of the page
Figure 717 The initial view of the page wrapped in an UpdatePanel
However, when we cause the UpdatePanel to update by clicking the Update button, we receive a JavaScript error Figure 718 shows the error that we received The error states that Two components with the same id HCDrag PanelExtender can t be added to the application This is essentially telling us that there is a component with the ID HCDragPanelExtender already in SysApplication s list of managed components and that we re trying to add a second one Adding more than one component to SysApplication with the same ID is illegal, as we covered in 4, SysApplication
