Introduction

Now, developers can also write client side scripts for Aspose.Grid.Web control. It means that it is possible to invoke a JavaScript function from client side to perform a specific task related to GridWeb control. For example, developers can write javascript functions to submit GridWeb data to server or show an alert message when a validation error occurs etc. In this topic, we will experiment this feature with the help of examples.

 

Writing Client Side Scripts for Aspose.Grid.Web

 

Basic Information

Aspose.Grid.Web provides two new properties: OnSubmitClientFunction & OnValidationErrorClientFunction. These two properties of GridWeb control are specially created to support client side scripts. Developers can create javascript functions in .aspx page and assign the names of these functions to OnSubmitClientFunction & OnValidationErrorClientFunction properties.

IMPORTANT: The javascript function that will be assigned to OnSubmitClientFunction property of GridWeb control must be defined in a proper way as shown below:

function function_name(arg, cancelEdit)

{

   //Add javascript code here

}

 

 

where, [arg] parameter represents the command generated by control. The command can be "Save", "Submit", "Undo"

etc. and [cancelEdit] parameter is a boolean value, which indicates that whether the user input is cancelled or

not

 

Any javascript function assigned to OnSubmitClientFunction property is called everytime by GridWeb control before submitting GridWeb data to server. Similarly, if a function is assigned to OnValidationErrorClientFunction property then that function will be invoked everytime whenever a validation error will occur.

 

Functions for Client Side Scripting

Aspose.Grid.Web also exposes some functions especially for client side scripting. These functions can be used within javascript fucntions to gain more control of Aspose.Grid.Web. These client side functions include the following:

 

Functions	Description
updateData(bool cancelEdit)	This function updates all client data of Aspose.Grid.Web before posting it to server. If cancelEdit parameter is true then GridWeb will dicard all user’s input.
validateAll()	This function is used to check if there are any validation errors in user's input. If there is an error, the function will return false otherwise ture.
submit(string arg, bool cancelEdit)	Call this function to postback or submit data to 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: SAVE command is used for clicking the Save button on the command bar of GridWeb control and CCMD:MYCOMMAND command will fire a CustomCommand event.
setActiveCell(int row, int column)	This function is used to activate a specific cell.
setCellValue(int row, int column, string value)	This function is used to put a value to any cell specified using its row and column numbers.
getCellValue(int row, int column)	This function simply returns the value of any specified cell.
getActiveRow()	This function is used in conjunction with getActiveColumn() function to determine the position of an active cell.
getActiveColumn()	This function is used in conjunction with getActiveRow() function to determine the position of an active cell.

 

An Example

To create a test application containing client side scripts (that work with Aspose.Grid.Web), please follow the steps below:

• Create JavaScript functions that would be invoked by GridWeb. These functions will be added to <script></script> tag of the ASP.NET page
• Assign the names of these functions to OnSubmitClientFunction & OnValidationErrorClientFunction properties of GridWeb

Example:

[JavaScript]

 

 

//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.");

}

 

 

[C#]

 

 

//Assinging the name of JavaScript function to OnSubmitClientFunction property of GridWeb

GridWeb1.OnSubmitClientFunction="ConfirmFunction";

 

 

//Assinging the name of JavaScript function to OnValidationErrorClientFunction property of GridWeb

GridWeb1.OnValidationErrorClientFunction="ValidationErrorFunction";

 

 

//Accessing the cells collection of the worksheet that is currently active

WebWorksheet sheet=GridWeb1.WebWorksheets[GridWeb1.ActiveSheetIndex];    

 

 

//Accessing "B1" cell

WebCell cell=sheet.Cells[0,1];

 

 

//Putting value to "B1" cell

cell.PutValue("Date (yyyy-mm-dd):");

 

 

//Accessing "C1" cell

cell = sheet.Cells[0, 2];

 

 

//Creating a custom expression validation for the "C1" cell

cell.CreateValidation(ValidationType.CustomExpression, true);

 

 

//Setting regular expression for the validation to accept dates in yyyy-mm-dd format

cell.Validation.RegEx = @"\d{4}-\d{2}-\d{2}";

 

 

[VB.NET]

 

 

'Assinging the name of JavaScript function to OnSubmitClientFunction property of GridWeb

GridWeb1.OnSubmitClientFunction="ConfirmFunction"

 

 

'Assinging the name of JavaScript function to OnValidationErrorClientFunction property of GridWeb

GridWeb1.OnValidationErrorClientFunction="ValidationErrorFunction"

 

 

'Accessing the cells collection of the worksheet that is currently active

Dim sheet As WebWorksheet = GridWeb1.WebWorksheets(GridWeb1.ActiveSheetIndex)

 

 

'Accessing "B1" cell

Dim cell As WebCell = sheet.Cells(0,1)

 

 

'Putting value to "B1" cell

cell.PutValue("Date (yyyy-mm-dd):")

 

 

'Accessing "C1" cell

cell = sheet.Cells(0, 2)

 

 

'Creating a custom expression validation for the "C1" cell

cell.CreateValidation(ValidationType.CustomExpression, True)

 

 

'Setting regular expression for the validation to accept dates in yyyy-mm-dd format

cell.Validation.RegEx = "\d{4}-\d{2}-\d{2}"

 

The output of the above code snippet is shown below:

 

 

Figure: A validation added to C1 cell

 

Let's add an invalid value to it and then try to save data by clicking Save button. A validation error will occur and you would notice the ValidationErrorFunction to be executed as shown below in the figure:

 

 

Figure: ValidationErrorFunction invoked on validation error

 

Untill you don't enter a valid value, data will not be submitted to server. Now, lets enter a valid value and click Save button. You would notice the ConfirmFunction to be executed as shown below in the figure:

 

 

Figure: ConfirmFunction invoked before submitting GridWeb data to server