Skip to content

Commit f98d88a

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1008847: Forms UG Update MVC I
1 parent ba86f66 commit f98d88a

7 files changed

Lines changed: 1094 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-field-events.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
layout: post
3+
title: Form Field Events in MVC PDF Viewer control | Syncfusion
4+
description: Learn here all about different form field events in Syncfusion MVC PDF Viewer component and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# PDF Viewer Form Field Events in MVC
12+
13+
The Syncfusion **MVC PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**.
14+
15+
Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
16+
17+
## Supported PDF Form Field Events
18+
19+
The following table lists all supported form field events and their descriptions:
20+
21+
| Form Field events | Description |
22+
|---|---|
23+
| [formFieldAdd](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
24+
| [formFieldClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is clicked in the viewer. |
25+
| [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is double clicked. |
26+
| [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field loses focus after editing. |
27+
| [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when the mouse pointer leaves a form field. |
28+
| [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when the mouse pointer moves over a form field. |
29+
| [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field is moved to a new position. |
30+
| [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when any form field property changes, such as font, color, or constraint values. |
31+
| [formFieldRemove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field is deleted from the document. |
32+
| [formFieldResize](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is resized. |
33+
| [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is selected in the Form Designer. |
34+
| [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a previously selected form field is unselected. |
35+
| [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when form field validation fails during print or download actions. |
36+
37+
**Common Use Cases**
38+
39+
Form field events can be used to:
40+
- Validate form data before printing or downloading
41+
- Track user interaction with form fields
42+
- Update UI elements dynamically
43+
- Log form changes for auditing
44+
- Trigger workflow actions based on field changes
45+
- Enforce business rules during form editing
46+
47+
## Handle PDF Form Field Events
48+
49+
You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.
50+
51+
{% tabs %}
52+
{% highlight cshtml tabtitle="Standalone" %}
53+
54+
<div style="width:100%;height:600px">
55+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
56+
</div>
57+
58+
<script>
59+
document.addEventListener("DOMContentLoaded", function () {
60+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
61+
// Basic examples for common form-field events
62+
pdfviewer.formFieldAdd = function (args) { console.log('formFieldAdd', args); };
63+
pdfviewer.formFieldRemove = function (args) { console.log('formFieldRemove', args); };
64+
pdfviewer.formFieldPropertiesChange = function (args) { console.log('formFieldPropertiesChange', args); };
65+
66+
// Additional events from the table
67+
pdfviewer.formFieldClick = function (args) { console.log('formFieldClick', args); };
68+
pdfviewer.formFieldDoubleClick = function (args) { console.log('formFieldDoubleClick', args); };
69+
pdfviewer.formFieldFocusOut = function (args) { console.log('formFieldFocusOut', args); };
70+
pdfviewer.formFieldMouseOver = function (args) { console.log('formFieldMouseOver', args); };
71+
pdfviewer.formFieldMouseLeave = function (args) { console.log('formFieldMouseLeave', args); };
72+
pdfviewer.formFieldMove = function (args) { console.log('formFieldMove', args); };
73+
pdfviewer.formFieldResize = function (args) { console.log('formFieldResize', args); };
74+
pdfviewer.formFieldSelect = function (args) { console.log('formFieldSelect', args); };
75+
pdfviewer.formFieldUnselect = function (args) { console.log('formFieldUnselect', args); };
76+
77+
// Validation Event
78+
pdfviewer.enableFormFieldsValidation = true;
79+
pdfviewer.validateFormFields = function (args) {
80+
if (args && args.formField && args.formField.length > 0) {
81+
// Example: prevent the pending action and notify the user
82+
args.cancel = true;
83+
alert('Please fill all required fields. Missing: ' + args.formField[0].name);
84+
// Optionally focus or scroll to the field
85+
}
86+
};
87+
});
88+
</script>
89+
90+
{% endhighlight %}
91+
{% endtabs %}
92+
93+
**Event Behavior Notes**
94+
95+
- Events triggered through the UI and programmatic APIs use the same event handlers.
96+
- Property related events are raised immediately when changes occur.
97+
- Validation events are triggered only during print or download operations.
98+
99+
[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
100+
101+
## See also
102+
103+
- [Form Designer overview](./overview)
104+
- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
105+
- [Create form fields](./manage-form-fields/create-form-fields)
106+
- [Edit form fields](./manage-form-fields/modify-form-fields)
107+
- [Group form fields](./group-form-fields)
108+
- [Add custom data to form fields](./custom-data)
109+
- [Form Field Flags](./form-constrain)
110+
- [Form validation](./form-validation)
111+
- [Form fields API](./form-fields-api)

0 commit comments

Comments
 (0)