Fixing Display Issue with IE6 and AJAX toolkit Modal Popup Extender

I had a bit of a nightmare trying to get the modal popup extender working when viewing a webpage containing this Ajax control in IE6. My thoughts regarding IE6 are best left out of this!! After some digging I found several articles that pointed to a variety of things - this is what worked for me.

As I was working with a page which relied on a series of masters I could not change the “doctype”.

This left me to hack the source of the Ajax toolkit. If you open this solution, and look at the JavaScript the answer lies there.

This works with v1.0.10123.0

1. Change the file Common.js which is found at AjaxControlToolkit\Common\Common.js
2. Search for a method called 'getClientBounds'
3. Replace switch with

   1: switch(Sys.Browser.agent) {

   2:     case Sys.Browser.InternetExplorer:

   3:         if (document.documentElement && document.documentElement.clientWidth)

   4:             clientWidth = document.documentElement.clientWidth;

   5:         else if (document.body)

   6:             clientWidth = document.body.clientWidth;

   7:         if (document.documentElement && document.documentElement.clientHeight)

   8:             clientHeight = document.documentElement.clientHeight;

   9:         else if (document.body)

  10:             clientHeight = document.body.clientHeight;

  11:         break;

  12:     case Sys.Browser.Safari:

  13:         clientWidth = window.innerWidth;

  14:         clientHeight = window.innerHeight;

  15:         break;

4. Important part is the next bit - as absolute positioning is not correctly implemented in IE6. Look for the initalize function and look for the background i.e.

replace this line:

   1: this._foregroundElement.style.position = 'fixed'; 

with

   1: if (this._isIE6)

   2:   this._foregroundElement.style.position = 'fixed';

   3: else

   4:   this._foregroundElement.style.position = 'absolute';

and this line:

   1: this._backgroundElement.style.position = 'fixed';

withp>

   1: if (this._isIE6)

   2: this._backgroundElement.style.position = 'fixed';

   3: else

   4: this._backgroundElement.style.position = 'absolute';

This should solve the problem.

AJAX Drag Panel toolkit – drag panel issue with IE6

I found another issue with IE6 today relating to a drag panel ajax extender I was implementing in a page. First of all when I moved the drag panel to the right hand side of the screen the panel was changing size. This is likely to be related to the panel conforming to the width set on its parent container.

The drag panel code:

   1: <asp:Panel ID="pnlDetailsContainer" runat="server" style="display:none;" CssClass="containerBox">

   2:     <asp:Panel ID="pnlDetailsHeader" runat="server" CssClass="popupBoxHeader">

   3:         ....        

   4:     </asp:Panel>

   5:     <div class="pnlDetailsMarkup">

   6:         ...some markup...

   7:     </div>

   8: </asp:Panel>

The CSS:

   1: .containerBox

   2: {

   3:     border-style:solid;

   4:     border-width:2px;

   5:     border-color:Black;

   6:     background-color:#ffffff;

   7:     width:300px;

   8: }

To fix this resizing problem i put the whole panel into a surrounding div:

   1: <div class="detailsContainer">

   2: ...panel..

   3: </div>

Set the width and height parameters in CSS and it works fine in IE7 and Firefox 3. But not IE6. For some reason in IE6 it puts the div in and therefore moves other page elements out of place instead of just showing when required.

To fix this I set an IE6 specific style to a height and width 1px. This had the desired effect.

Exporting data as a CSV and allow download from browser C#

I recently did some work to export a data table as a Comma Separated Variable file or a MDB file.

The following code allows you to generate a csv from a data table.

   1: public static void CreateCSVHelper(DataTable sourceTable)

   2: {

   3:     //locals

   4:     StringBuilder outputBuilder = new StringBuilder();

   5:     

   6:     //write column names        

   7:     for (int i = 0; i < sourceTable.Columns.Count; i++)

   8:     {

   9:         if (i > 0)

  10:             outputBuilder.Append(",");

  11:         outputBuilder.Append(sourceTable.Columns[i].ColumnName);        

  12:     }

  13:     outputBuilder.Append(Environment.NewLine);

  14:     

  15:     //Put in data

  16:     foreach (DataRow row in sourceTable.Rows)

  17:     {

  18:         for (int i = 0; i < sourceTable.Columns.Count; i++)

  19:         {       

  20:             if (i > 0)

  21:                 outputBuilder.Append(",");                     

  22:             outputBuilder.Append(string.Format("\"{0}\"",row[i].ToString()));           

  23:         }

  24:         

  25:         outputBuilder.Append(Environment.NewLine);

  26:     }

  27:  

  28:     try

  29:     {

  30:         //Attempt to write file

  31:         StreamWriter sw = new StreamWriter(filename);

  32:         sw.Write(outputBuilder.ToString());

  33:         sw.Close();

  34:     }

  35:     catch (Exception ex)

  36:     {

  37:         System.Diagnostics.Debug.Write(ex);

  38:     }

  39: }

To display a link through to a browser, i.e. provide a link on a page where the user can click, get prompted do you wish to open or save this file – put the following in the code behind of the relevant page.

   1: protected void btnExportCSV_onClick(object sender, EventArgs e)

   2: {

   3:     //Clear buffer

   4:     Response.Clear();

   5:  

   6:     //Tell the browser it expects to get text output in the form of a csv

   7:     Response.ContentType = "text/csv";

   8:  

   9:     //Append header to tell the browser to expect a file

  10:     Response.AppendHeader("Content-Disposition", string.Format("attachment; filename={0}", filename));

  11:     

  12:     //Send file to browser response stream

  13:     Response.TransmitFile(filepath);

  14:  

  15:     //End the response 

  16:     Response.End();

  17: }

Finally if you are trying to use the code inside an update panel you will need to set the export button as a postback trigger. This can either be done using the following asp.net markup:

   1: <asp:UpdatePanel ID="upExport" runat="server">  

   2:     <ContentTemplate>  

   3:         <asp:LinkButton ID="btnExportCSV" runat="server">Export To Excel</asp:LinkButton>  

   4:     </ContentTemplate>  

   5:     <Triggers>  

   6:         <asp:PostBackTrigger ControlID="btnExportCSV">  

   7:         </asp:PostBackTrigger>  

   8:     </Triggers>  

   9: </asp:UpdatePanel>  

or you can set it dynamically in the code behind with the following lines put into the page_load event.

   1: //Deal with postback 

   2: smExportCSV.RegisterPostBackControl(btnExportCSV);

Where smExportCSV is your script manager control.