Mapping an Event to a Client-Side Script

You can map a client-side event of the Spread component to a custom JavaScript function by using any of three procedures. The procedures, listed here, show how, for example, to map an event, such as onDataChanged to a custom function "Test()".

Add an attribute to the component in your server-side code:

JavaScript	Copy Code
FpSpread1.Attributes.Add("onDataChanged", "Test(event)")

Or map the event to a function in a client-side event, such as the window.onload() function:

JavaScript	Copy Code
window.onload = function () { var spread1 = document.getElementById("<%=FpSpread1.ClientID %>"); if (document.all) { // IE if (spread1.addEventListener) { // IE9 spread1.addEventListener("DataChanged", Test, false); } else { // Other versions of IE and IE9 quirks mode (no doctype set) spread1.onDataChanged = Test; } } else { // Firefox spread1.addEventListener("DataChanged", Test, false); } }

JavaScript

Copy Code

window.onload = function () {
  var spread1 = document.getElementById("<%=FpSpread1.ClientID %>");
  if (document.all) {
    // IE
  if (spread1.addEventListener) {
  // IE9
  spread1.addEventListener("DataChanged", Test, false);
  } else {
  // Other versions of IE and IE9 quirks mode (no doctype set)
  spread1.onDataChanged = Test;
  }
  } else {
  // Firefox
spread1.addEventListener("DataChanged", Test, false);
  }
}

Or map the event in the section of the HTML on the page where the Spread object is located:

JavaScript	Copy Code
<FarPoint:FpSpread onDataChanged="Test(event)" id="FpSpread1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" Height="272px" Width="424px" DesignString='<?xml version="1.0" encoding="utf-8"?><Spread />' ActiveSheetViewIndex="0">

JavaScript

Copy Code

<FarPoint:FpSpread onDataChanged="Test(event)" id="FpSpread1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" Height="272px" Width="424px" DesignString='<?xml version="1.0" encoding="utf-8"?><Spread />' ActiveSheetViewIndex="0">

Each of these would result in this JavaScript function being called:

JavaScript	Copy Code
function Test(event) { alert("The data has changed"); }

For more information on browser support, refer to Understanding Browser Support.