Understanding Browser Support

The Spread component resides on the server and generates HTML pages when it is accessed by end users on the client side. The appearance and amount of interactivity of the Web page depends on the browser used on the client side. The view of the HTML pages generated by the Spread component depends on the browser being used to view the page. The component also downloads some HTML component (HTC) files to the client side. This topic summarizes some browser-specific behaviors of the product. These aspects of browser support, discussed below, include:

Browser Level

The appearance and amount of interactivity of the Web page depends on the level of browser. Broadly, an uplevel browser is one that can support client-side JavaScript, HTML version 4.0, the Microsoft Document Object Model, and cascading style sheets (CSS). A downlevel browser is one that does not. For a more detailed definition of uplevel and downlevel browser and for a list of capabilities of those browsers, refer to the browser capability information in the Microsoft .NET documentation.

Mozilla Firefox Support

While most features work in Mozilla Firefox, not all do. All features work in the latest version of Microsoft Internet Explorer (IE). Here is a list of features that are not supported in Firefox.

Scroll bar properties (see Customizing the Scroll Bar Colors)

For other affects, see the discussion on the DOCTYPE Affect on Rendering.

Apple Safari Support

While most features work in Apple Safari, not all do. Here is a list of features that are not supported.

Frozen rows and columns (FrozenRowCount property and FrozenColumnCount property)
ImeMode for editable cell types
UIVirtualization property

Apple Safari Support with IPad

Here is a list of features that are not supported.

Panning mode is not supported.
Custom toolbar above the system keyboard is not supported.
Scroll bars are not displayed.

Google Chrome

Here is a list of features that are not supported.

ImeMode for editable cell types
Scroll bar properties (see Customizing the Scroll Bar Colors)

Client-Side Scripting

For other browsers, besides Microsoft Internet Explorer (IE) and Mozilla Firefox, the Spread client-side scripting is not supported.

In your scripting code, you will need to check the browser to see if it is Firefox or IE before calling this code, so you can call it correctly based on the browser that is viewing the page. Client-side scripting for the Firefox browser is a little different than it is for IE. You need to use Firefox's way to attach events. For example

Code	Copy Code
<HEAD> ... <script language="javascript" type="text/javascript"> window.onload = function () { var spread1 = document.getElementById("<%=FpSpread1.ClientID %>"); if (document.all) { // IE if (spread1.addEventListener) { // IE9 spread1.addEventListener("DataChanged", dataChanged, false); } else { // Other versions of IE and IE9 quirks mode (no doctype set) spread1.onDataChanged = dataChanged; } } else { // Firefox spread1.addEventListener("DataChanged", dataChanged, false); } } function dataChanged() { alert("The data has changed!"); } </SCRIPT> </HEAD>

Code

Copy Code

<HEAD>
...
<script language="javascript" type="text/javascript">
window.onload = function ()
        {          
            var spread1 = document.getElementById("<%=FpSpread1.ClientID %>");
            if (document.all) {
                // IE
                if (spread1.addEventListener) {
                    // IE9
                    spread1.addEventListener("DataChanged", dataChanged, false);
                } else {
                    // Other versions of IE and IE9 quirks mode (no doctype set)
                    spread1.onDataChanged = dataChanged;
                }
            } else {
                // Firefox
                spread1.addEventListener("DataChanged", dataChanged, false);
            }
         }
         function dataChanged() {
             alert("The data has changed!");
         }
        
</SCRIPT>
</HEAD>

Firefox does not support JavaScript properties as IE does; everything is accessed with methods. For example, to get the active row and active column, you use the GetActiveRow method and the GetActiveCol method respectively. In code,

Code	Copy Code
var row = ss.GetActiveRow(); alert(row);

For browser-level issues specific to certain members, refer to these:

FpSpread.EnableClientScript Property
SheetView.MessageRowStyle Property
SheetSkin.SelectionForeColor Property

and refer to Understanding Effects of Client-Side Validation.

AJAX Support

Spread for ASP.NET supports AJAX in Microsoft Internet Explorer (IE) and Mozilla Firefox browsers.

DOCTYPE Affect on Rendering

The DOCTYPE settings can affect the rendering of Spread. Consider the following:

Column widths slightly differ from what you see in Spread Designer (IE and Firefox).
Spread inside a DIV element does not scroll as expected (IE and Firefox)
Row height expands to show the wrapping text (IE and Firefox)

The column widths may appear narrower in Firefox than in IE. This has to do with the document type (DOCTYPE) of the HTML page. In IE, with compliant mode, you will see column widths with margins set to be larger that what you set them to. If you change the DOCTYPE of the page to Transitional or remove the margins for the cells, you should see the same column widths using either browser. For more information, refer to the IsStrictMode method.

Note: Spread requires that the XML name space be declared as follows:
<html xmlns="http://www.w3.org/1999/xhtml">

Spread uses HTML tables for the display on the client side. When you define a row span, it defines the span for the HTML table in the page. The default behavior in Internet Explorer for a spanned row in an HTML table is to resize to fit the text. In Spread, the row is resized to avoid layout issues. There is little documentation outlining this behavior, but you can test this behavior in Firefox where you do not see the cell resize itself to display the full text. However, it does not force the horizontal scroll bar to remain.