Write GridWeb Client Side Script

Developers can write client-side scripts for the Aspose.Cells.GridWeb control. This means that it is possible to invoke a JavaScript function client-side to perform a specific task related to the GridWeb control. For example, developers can write JavaScript functions to submit GridWeb data to a server or show an alert message when a validation error occurs etc.

This topic explains this feature with the help of examples.

Writing Client Side Scripts for Aspose.Cells.GridWeb

Basic Information

Aspose.Cells.GridWeb provides two properties created specifically to support client-side scripts:

• OnSubmitClientFunction
• OnValidationErrorClientFunction

Create JavaScript functions in an ASPX page and assign the names of these functions to the OnSubmitClientFunction and OnValidationErrorClientFunction properties.

The JavaScript function that will be assigned to the OnSubmitClientFunction property must be defined properly as shown below:

JavaScript

 function function_name(arg, cancelEdit)
{
//Add javascript code here

}

where the [arg] parameter represents the command generated by the control. The command can be “Save”, “Submit”, “Undo” etc. and the [cancelEdit] parameter is a Boolean value, which indicates that whether the user input is cancelled or not.

Any JavaScript function assigned to the OnSubmitClientFunction property is called everytime by the GridWeb control before submitting GridWeb data to a server. Similarly, if a function is assigned to the OnValidationErrorClientFunction property then that function will be invoked every time a validation error occurs.

Functions for Client-Side Scripting

Aspose.Cells.GridWeb also exposes functions especially for client-side scripting. These functions can be used within JavaScript functions to gain more control of Aspose.Cells.GridWeb. These client-side functions include the following:

Functions	Description
updateData(bool cancelEdit)	Updates all client data of Aspose.Cells.GridWeb before posting it to the server. If the cancelEdit parameter is true then GridWeb discards all user input.
validateAll()	Used to check if there are any validation errors in the user input. If there is an error, the function returns false, otherwise true .
submit(string arg, bool cancelEdit)	Call this function to postback or submit data to the server. This function performs both tasks that is updating data and validating user input. This function can also fire a command event at server side. Use the arg parameter to pass your command. For example: the SAVE command is used for clicking the Save button on the command bar of the GridWeb control and the CCMD:MYCOMMAND command fires a CustomCommand event.
setActiveCell(int row, int column)	Used to activate a specific cell.
setCellValue(int row, int column, string value)	Used to put a value to any cell specified using its row and column numbers.
getCellValue(int row, int column)	Returns the value of any specified cell.
getActiveRow()	Used in conjunction with the getActiveColumn() function to determine the position of an active cell.
getActiveColumn()	Used in conjunction with the getActiveRow() function to determine the position of an active cell.
getSelectRange()	Returns the last selected range.
setSelectRange()	Selects the given range.
clearSelections()	Clears all selection excluding current active cell.
getCellsArray()	It is used with other related functions like getCellName(), getCellValueByCell(), getCellRow() and getCellColumn(). Please read this article for more information regarding the usage of this function: Read the values of the GridWeb cells on Client Side
To create a test application containing client-side scripts that work with Aspose.Cells.GridWeb, follow the steps below:

1. Create JavaScript functions to be invoked by GridWeb. These functions will be added to the ASP.NET page’s tag.
2. Assign the names of the functions to the OnSubmitClientFunction and OnValidationErrorClientFunction properties.

The output of the code example is shown below:

A validation added to C1 cell

Add an invalid value and click Save. A validation error occur and the ValidationErrorFunction is executed.

ValidationErrorFunction invoked on validation error

Untill you enter a valid value, no data is submitted to the server. Enter a valid value and click Save. The ConfirmFunction is executed.

ConfirmFunction invoked before submitting GridWeb data to server

For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// A client side JavaScript function that will be executed before submitting data to server
function ConfirmFunction(arg, cancelEdit) {
    // Showing a confirm dialog with some information where "this" refers to GridWeb
    return confirm("The control is " + this.id + "\nThe command is \"" + arg + "\".\nDo you want to continue?");
}
        
// A client side JavaScript function that will be executed whenever a validation error will occur
function ValidationErrorFunction() {
    // Showing an alert message where "this" refers to GridWeb
    alert(this.id + ": Please correct your input error.");
}

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Assigning the name of JavaScript function to OnSubmitClientFunction property of GridWeb
GridWeb1.OnSubmitClientFunction = "ConfirmFunction";

// Assigning the name of JavaScript function to OnValidationErrorClientFunction property of GridWeb
GridWeb1.OnValidationErrorClientFunction = "ValidationErrorFunction";

// Accessing the cells collection of the worksheet that is currently active
GridWorksheet sheet = GridWeb1.WorkSheets[GridWeb1.ActiveSheetIndex];

// Accessing "B1" cell and add some text
GridCell cell = sheet.Cells[0, 1];
cell.PutValue("Date (yyyy-mm-dd):");

// Accessing "C1" cell and add to it custom expression validation to accept dates in yyyy-mm-dd format
cell = sheet.Cells[0, 2];
var validation = cell.CreateValidation(GridValidationType.CustomExpression, true);            
validation.RegEx = @"\d{4}-\d{2}-\d{2}";