Spread ASP.NET and Client Events

September 23 2015

You can use client events in Spread ASP.NET. Client-side scripting allows the user to interact with the page on the client without the page having to be reloaded from the server. This can be useful if the event relies on run time only information. There are several ways to map events on the client-side. You can use an attribute, map the event to a function, or map the event to the Spread object in the HTML page. This example maps the event to the Spread object in the page: JavaScript

<script type="text/javascript">                 
        function show(event) {  
            alert("r" + event.row + ",c" + event.col);              
        }  
        </script>  

</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  

    </div>  
        <FarPoint:FpSpread onDataChanged="show(event)" ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid" BorderWidth="1px" Height="200" Width="400">  
            <commandbar backcolor="#F6F6F6" buttonfacecolor="Control" buttonhighlightcolor="ControlLightLight" buttonshadowcolor="ControlDark">  
            </commandbar>  
            <sheets>  
                <FarPoint:SheetView SheetName="Sheet1">  
                </FarPoint:SheetView>  
            </sheets>  
        </FarPoint:FpSpread>  
    </form>  
</body>  
</html>

This example maps the event to a function. JavaScript

<script type="text/javascript">  
window.onload = function ()  
        {             
            var spread1 = document.getElementById("<%=FpSpread1.ClientID %>");  
            if (spread1.addEventListener) {  
                // IE 9 and above or Chrome or FF  
                  spread1.addEventListener("ActiveCellChanged", cellChanged, false);  
                } else if (spread1.attachEvent) {  
                    spread1.attachEvent("onActiveCellChanged",  cellChanged);  
                } else {  
                    spread1.onActiveCellChanged =  cellChanged;  
}   
         }  
         function cellChanged(event) {  
            alert("r" + event.row + ",c" + event.col);  
        }          
</script>

This example uses an attribute. C#

protected void Page_Load(object sender, EventArgs e)  
        {  
            if (this.IsPostBack) return;  
            FpSpread1.Attributes.Add("onDataChanged", "Test(event)");              
        }  
    }

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
FpSpread1.Attributes.Add("onDataChanged", "Test(event)")  
End Sub

JavaScript

<script type="text/javascript">  
function Test(event) {  
            alert("r" + event.row + ",c" + event.col);  
        }</script>

The following sample code for the ASPX page uses the built-in GetValue method to total the values in the cells (all except the last cell) of the first column and uses the SetValue method to put the result in the last cell of that column. Type a value in a cell and change cells to see the result. Total Result C#

protected void Page_Load(object sender, EventArgs e)  
        {  
            if (this.IsPostBack) return;  
            FpSpread1.Sheets[0].Cells[0, 0].Value = 4;  
            FpSpread1.Sheets[0].Cells[1, 0].Value = 3;  
            FpSpread1.Attributes.Add("onDataChanged", "doCalc(event)");  
        }

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load  
        If (IsPostBack) Then  
            Return  
        End If  
        FpSpread1.Sheets(0).Cells(0, 0).Value = 4  
        FpSpread1.Sheets(0).Cells(1, 0).Value = 3  
        FpSpread1.Attributes.Add("onDataChanged", "doCalc(event)")  
    End Sub

JavaScript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpreadASP.aspx.cs" Inherits="SpWeb8CSharp.SpreadASP" %>  
<%@ Register assembly="FarPoint.Web.Spread, Version=8.40.20151.0, Culture=neutral, PublicKeyToken=327c3516b1b18457" namespace="FarPoint.Web.Spread" tagprefix="FarPoint" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Spread ASP.NET</title>  

    <script type="text/javascript">  
        function doCalc() {  
            var rc = FpSpread1.GetRowCount();  
            var total = 0;  

            for (var i = 0; i < rc - 1; i++) {  
                var value = parseFloat(FpSpread1.GetValue( i, 0 ));  
                total += value;  
            }  
            if (!isNaN(total))  
                FpSpread1.SetValue(rc-1, 0, total, true);  
        }  
        </script>  

</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
    </div>  
        <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid" BorderWidth="1px" Height="200" Width="400">  
            <commandbar backcolor="#F6F6F6" buttonfacecolor="Control" buttonhighlightcolor="ControlLightLight" buttonshadowcolor="ControlDark">  
            </commandbar>  
            <sheets>  
                <FarPoint:SheetView SheetName="Sheet1">  
                </FarPoint:SheetView>  
            </sheets>  
        </FarPoint:FpSpread>  
    </form>  
</body>  
</html>

MESCIUS inc.