Is Document Edited

I have added a custom save button to the toolbar, and when opening previously saved documents this save icon will default as disabled. However, when the document is edited I want to enable this save button. I know there is a value 'isDocumentEdited' that returns whether or not the doc has been edited, but I need to trigger an event


5 Replies 1 reply marked as answer

SK Sathiyaseelan Kannigaraj Syncfusion Team February 16, 2024 12:03 PM UTC

Hi Joshua Rush,

There isn't direct support available to trigger an event when the document is edited. However, you can achieve this by using a workaround with different events. 


1. AnnotationAdd - If an annotation added.

2. AnnotationPropertiesChange - If any changes made in the already present annotation.

3. AnnotationMove - If annotation moved.

4. AnnotationRemove - If annotation removed.

5. AnnotationResize - If annotation resized

6. FormFieldAdd - If a form field added.

7. FormFieldPropertiesChange - If any changes made in the already present form field.

8. FormFieldMove - If a form field moved.

9. FormFieldRemove - If form field removed.

10. FormFieldResize - If form field resized.

11. AddSignature - If a signature added to pdf.

12. MoveSignature - If a signature is moved in pdf.

13. RemoveSignature - If a signature is removed in pdf.

14. ResizeSignature - If a signature is resized in pdf.

We have also provided a code snippet and a simple sample enable and disable a button if a document is changed.

 
Code Snippet:

<div>

    <button disabled="true" id="submit_sign" onclick="submitSign()">Submit Sign</button>

    <div style="height:500px;width:100%;">

        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).AnnotationAdd("annotationAdded").AnnotationMove("annotationMove").AnnotationResize("annotationResize").AnnotationRemove("annotationRemove").FormFieldAdd("formfieldAdded").FormFieldPropertiesChange("formfieldModified").FormFieldMove("formfieldMove").FormFieldRemove("formfieldRemove").FormFieldResize("formfieldResize").AnnotationPropertiesChange("annotationModify").AddSignature("addSignature").MoveSignature("moveSignature").RemoveSignature("removeSignature").ResizeSignature("resizeSignature").DocumentPath( https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf).Render()

    </div>

</div>

 

<script>

    var buttonDisable = false;

 

    function annotationAdded() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationModify() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationMove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationResize() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationRemove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldAdded() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldModified() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldMove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldRemove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldResize() {

        document.getElementById("submit_sign").disabled = false;

    }

    function addSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

    function removeSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

    function moveSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

    function resizeSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

 

</script>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IsDocment_Edited-1206243063.zip 


Regards,
Sathiyaseelan K



JR Joshua Rush February 19, 2024 05:09 PM UTC

Unfortunately, none of these events are triggering for me as I edit the document. Here is my code in my view:


<div id="PdfViewer" style="width:100%;height:500px;border:3px solid #808080">

    @(Html.EJS().PdfViewer("pdfviewer").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = false, ToolbarItems = "PageNavigationTool, PrintOption, " +

    "SelectionTool, SearchOption, MagnificationTool, UndoRedoTool" }).Render())

</div>


@(Html.EJS().ScriptManager())


<script language="javascript" type="text/javascript">


    $(document).ready(function () {

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        pdfViewer.serviceUrl = '@serviceUrl';

        pdfViewer.documentPath = '@(Model.FileInformation.Sections[0].Name)_0';

        pdfViewer.ajaxRequestInitiate = ajaxRequestInitiate;

        pdfViewer.annotationAdded = annotationAdded;

        pdfViewer.annotationModify = annotationModify;

        pdfViewer.annotationResize = annotationResize;

        pdfViewer.annotationRemove = annotationRemove;

        pdfViewer.formfieldAdded = formfieldAdded;

        pdfViewer.formfieldModified = formfieldModified;

        pdfViewer.formfieldMove = formfieldMove;

        pdfViewer.formfieldRemove = formfieldRemove;

        pdfViewer.formfieldResize = formfieldResize;

        pdfViewer.addSignature = addSignature;

        pdfViewer.removeSignature = removeSignature;

        pdfViewer.moveSignature = moveSignature;

        pdfViewer.resizeSignature = resizeSignature;

        pdfViewer.dataBind();

        pdfViewer.load(pdfViewer.documentPath, null);

    });


    function ajaxRequestInitiate(args) {

        var viewer = document.getElementById("pdfviewer").ej2_instances[0];

        if (args.JsonData.action == "Load") {

            args.JsonData['requestID'] = 'fakeRequestID';

            viewer.setJsonData(args.JsonData);

        }

    };


    function annotationAdded() {

        alert("eventTriggered");

    };


    function annotationModify() {

        alert(" eventTriggered ");

    };


    function annotationMove() {

        alert(" eventTriggered ");

    };


    function annotationResize() {

        alert(" eventTriggered ");

    };


    function annotationRemove() {

        alert(" eventTriggered ");

    };


    function formfieldAdded() {

        alert(" eventTriggered ");

    };


    function formfieldModified() {

        alert(" eventTriggered ");

    };


    function formfieldMove() {

        alert(" eventTriggered ");

    };


    function formfieldRemove() {

        alert(" eventTriggered ");

    };


    function formfieldResize() {

        alert(" eventTriggered ");

    };


    function addSignature() {

        alert(" eventTriggered ");

    };


    function removeSignature() {

        alert(" eventTriggered ");

    };


    function moveSignature() {

        alert(" eventTriggered ");

    };


    function resizeSignature() {

        alert(" eventTriggered ");

    };

</script>



The document has a bunch of text input fields. I cant get any of the alerts to fire. Is there something I am doing wrong in the sample shared? I'm trying to share as little code as possible for security reasons, I can deliver more if necessary. 



SK Sathiyaseelan Kannigaraj Syncfusion Team February 21, 2024 11:06 AM UTC

Hi Joshua Rush,

Please bind the events during control initialization instead of adding them inside $(document).ready(). Below, we have provided the code snippet and a sample for your reference.


Code Snippet:

<div>

    <div style="height:500px;width:100%;">

        @Html.EJS().PdfViewer("pdfviewer").AnnotationAdd("annotationAdded").AnnotationMove("annotationMove").AnnotationResize("annotationResize").AnnotationRemove("annotationRemove").FormFieldAdd("formfieldAdded").FormFieldPropertiesChange("formfieldModified").FormFieldMove("formfieldMove").FormFieldRemove("formfieldRemove").FormFieldResize("formfieldResize").AnnotationPropertiesChange("annotationModify").AddSignature("addSignature").MoveSignature("moveSignature").RemoveSignature("removeSignature").ResizeSignature("resizeSignature").Render()

    </div>

</div>

 

<script>

    var buttonDisable = false;

    $(document).ready(function () {

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        pdfViewer.serviceUrl = 'https://services.syncfusion.com/angular/production/api/pdfviewer'

        pdfViewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

        pdfViewer.dataBind();

        pdfViewer.load(pdfViewer.documentPath, null);

    });

    function annotationAdded() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationModify() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationMove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationResize() {

        document.getElementById("submit_sign").disabled = false;

    }

    function annotationRemove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldAdded() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldModified() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldMove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldRemove() {

        document.getElementById("submit_sign").disabled = false;

    }

    function formfieldResize() {

        document.getElementById("submit_sign").disabled = false;

    }

    function addSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

    function removeSignature() {

        document.getElementById("submit_sign").disablled = false;

    }

    function moveSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

    function resizeSignature() {

        document.getElementById("submit_sign").disabled = false;

    }

 

</script>


Regards,

Sathiyaseelan K


Marked as answer

JR Joshua Rush February 21, 2024 02:31 PM UTC

Got it working, Thank you!

FYI I had to put the script tags above the control initialization, otherwise the functions would not be found.



SK Sathiyaseelan Kannigaraj Syncfusion Team February 23, 2024 01:07 PM UTC

Hi Joshua Rush,

We're pleased to hear that your issue has been resolved. Don't hesitate to reach out if you need any further assistance.


Regards,
Sathiyaseelan K


Loader.
Up arrow icon