|
Events are used to call client-side JavaScript methods in response to a client-side form event (EventType) which enables additonal levels of customisation. The event passes 2 arguments to the client-side method. The first is a reference to the client-side form control and the second (optional) argument is an object that contains information specific to the event type.
Handlers are assigned to events using the Bind method which take 2 methods
OnConfigureBinaryData
This event is fired after a file is uploaded to the form. The event passes 2 arguments to the specified JavaScript method. The first is a reference to the client-side form control and the second is an object with the following properties:
•element - a reference to the form element associated with the upload
•fileName - if a binary column has been configured to associate another column as the FileName using the ImageConfiguration class in the Image or File then the value will be pre-populated, otherwise it should be assigned in the handler with the correct extension so that it is downloaded with the correct content type.
•columnName - the name of the column associated with the binary data
•record - an object with properties that hold the values of the currently selected record
|
...
employeesEdit.Bind(EventType.OnConfigureBinaryData, "configureImageFileName");
...
<script type="text/javascript" class="source">
function configureImageFileName(sender, args) {
var fileName = sender.columnValue("photopath");
args.fileName = fileName.split('/').pop().replace(".bmp", ".jpg");
}
</script>
|
Demo
OnFileSelected
This event is fired after a file is uploaded to the form. The event passes 2 arguments to the specified JavaScript method. The first is a reference to the client-side form control and the second is an object with the following properties:
•element - a jQuery reference to the form element associated with the upload
•fileMetaData - an object with the following properties: fileName (string), size (integer), lastModified (date) and contentType (string)
|
...
filesEdit.Bind(EventType.OnFileSelected, "setDescription");
...
<script type="text/javascript" class="source">
function disableFormForInactiveProducts(sender, args) {
var discontinued = sender.columnValue("discontinued");
for (let i = 0; i <args.formElements.length; i++) {
console.log($(args.formElements[i]).prop("disabled", discontinued));
}
}
</script>
|
Demo
OnFormElementCreated
This event is fired for each form element immediately after the form elements are rendered on the page and can be used to customise the configuration of a form element. The event passes 2 arguments to the specified JavaScript method. The first is a reference to the client-side form control and the second is an object with the following properties:
•formElement - a reference to the form element (input, select, textarea etc)
•columnName - the name of the associated database column
|
...
employeesEdit.Bind(EventType.OnFormElementCreated, "configureFormElement");
...
<script type="text/javascript" class="source">
function configureFormElement(sender, args) {
if (args.columnName == "notes") {
args.formElement.rows = 4;
args.formElement.cols = 20;
}
}
</script>
|
Demo
OnFormElementValidationFailed
This event provides an opportunity to customise an error message before it is presented to the user.
|
...
employeesEdit.Column("titleofcourtesy").Validation(new InputValidation("Mr.|Dr.|Ms.|Mr."));
employeesEdit.Bind(EventType.OnFormElementValidationFailed, "configureValidationMessage");
...
<script type="text/javascript">
String.prototype.replaceLast = function (what, replacement) {
var pcs = this.split(what);
var lastPc = pcs.pop();
return pcs.join(what) + replacement + lastPc;
};
function configureValidationMessage(sender, args) {
switch (args.key) {
case "titleofcourtesy":
// display the valid options from the pattern regular expression
const pattern = sender.formElement(args.key).attr("pattern");
const readablePattern = pattern.split('|').join(', ').replaceLast(",", " or");
args.value = `Title Of Courtesy should have a value of: ${readablePattern}`;
break;
}
}
</script>
|
Demo
OnInitialized
This event is fired as soon as the client-side instance of the grid has initialised and can be used to save a client-side reference to the grid control if needed.
OnJsonUpdated
This event is fired after any changes have been applied on a list of records that came from an external API source. The event facilitates the sending information about the changes that have been made to a custom end-point so they can be applied via an external API. The change information is wrapped up in the second parameter passed to the event handler which is mapped to the server-side class JsonUpdateRequest which is used to receive the request in the custom end-point. After processing the request the end-point should send a response using the JsonUpdateResponse class which is then passed to the client side method processJsonUpdateResponse for processing
|
...
ProductsEdit.Bind(EventType.onJsonUpdated, "applyJsonChanges");;
...
<script type="text/javascript">
function applyJsonChanges(control, args) {
fetch('/samples/dbnetedit/genericedit',
{
method: "POST",
body: JSON.stringify(args),
headers: {
RequestVerificationToken: '@GetAntiXsrfRequestToken()',
'Content-Type': 'application/json',
Accept: 'application/json',
}
})
.then(r => r.json())
.then(r => {
control.processJsonUpdateResponse(r);
}).catch(error => console.error('Error', error))
}
</script>
|
Demo
OnRecordSelected
This event is fired after a record is selected and rendered in the form. The event passes 2 arguments to the specified JavaScript method. The first is a reference to the client-side form control and the second is an object with the following properties:
•formElements - an array of references to controls that represent standard form elements (input, select, textarea etc)
•binaryElements - an array of references to controls that represent binary elements (file and image)
|
...
productsForm.Bind(EventType.OnRecordSelected, "disableFormForInactiveProducts");
...
<script type="text/javascript" class="source">
function disableFormForInactiveProducts(sender, args) {
var discontinued = sender.columnValue("discontinued");
for (let i = 0; i <args.formElements.length; i++) {
$(args.formElements[i]).prop("disabled", discontinued);
}
}
</script>
|
Demo
|
