Word Merge from Dialog

[Chris]

Hi,

I've been following https://aspnetcore.syncfusion.com/docio/employeereport to run my own word merge document.  I added a custom toolbar item to my grid to run a word merge document.  I use a template to display options for the word merge.  When you click the custom button in the grid's toolbar it displays the options for the word merge in a dialog.  The submit button on the dialog runs the merge for the currently selected row in the grid.

The thing that I'm not sure how to do is to make it work without leaving the view that the grid is based on.  (I would like to behave similarly to the Export to Excel)

Below are some code snippets, hopefully that will clear up what I'm asking for.

<style>
            .Agreement:before {
                content: "\e716";
            }
 </style>

var customTB = new List<object>() { "Agreement" };

// toolbar setup in the grid definition.  It has regular tool bar items and a custom one
.ToolbarSettings(tb => tb.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.ExcelExport); }).CustomToolbarItems(customTB))

// javascript below
function OnGridCreate() {
            $("#" + this._id + "_add").append("Add");
            $("#" + this._id + "_edit").append("Edit");
            $("#" + this._id + "_delete").append("Delete");
            $("#" + this._id + "_excelExport").append("To Excel");
            $("#" + this._id + "_Agreement").append("Bld Agrmt");
}

function OnToolbarClick(args) {
 
            if (args.itemName == "Agreement")
            {
                var gridObj = $("#MyGrid").ejGrid("instance");
                var rowIndex = gridObj.model.selectedRowIndex;
                if (rowIndex > -1) {
                    var data = gridObj.model.currentViewData[rowIndex];
                    var temp = $.templates($("#agreementDialog").html());
                    $(temp.render(data)).ejDialog({ title: "Building Access Agreement" });
                } else {
                    alert("Please select a row for the Building Access Agreement merge document.")

                }
            }
        }

// the template
<script id="agreementDialog" type="text/x-jsrender">
        @{Html.BeginForm("BuildingAccessAgreement", "Telecom", FormMethod.Post);
        {
                <input type="hidden" id="addrId" name="addrId" value="{{:Id}}" />
        <div>
            <table style="padding-right: 5em;">
                <tr><td style="padding-right: 2em;">File:</td><td>{{:SLLFile.FileName}}</td></tr>
                <tr>
                    <td style="padding-right: 2em;">Version:</td>
                    <td>
                        <select id="Version" name="Version">
                            <option value="NOV2017" selected>November 2017</option>
                            <option value="NOV2017SCHEDB">November 2017 With Sched B</option>
                        </select>
                    </td>
                </tr>
                <tr><td colspan="2">&nbsp;</td></tr>
                <tr><td colspan="2" style="text-align:center"><input class="buttonStyle" type="submit" value="Run" /></td></tr>
            </table>
        </div>
            Html.EndForm();
        }}
          
    </script>

// in the controller
public ActionResult BuildingAccessAgreement(int addrId, string Version)
        {
            //TODO: add code to actually do the merge

            return View();  // I don't want to go to the BuildingAccessAgreement view, I would like the word doc to pop open on the starting page
        }

Thanks,
Chris

[Chris]

On closer inspection of https://aspnetcore.syncfusion.com/docio/employeereport I think it will work the way I want it to.  I'll update this thread again if I run into any troubles.  Sorry about that.

Chris

[Mohanaselvam Jothi]

Hi Chris,

Thank you for contacting Syncfusion support.

We have prepared a sample application to achieve your requirement using DocIO and Grid. Please find the sample from the below link:
http://www.syncfusion.com/downloads/support/forum/137266/ze/MailMergeWithGrid-1646873956.zip

In this sample we have done the following things:
  1. Generates Grid in the view.
  2. Added options for Add, Edit, Delete, and Export to Excel for the Grid.
  3. Executes mail merge in the Word document using the values from selected row in the Grid.
  4. Saves and download the Word document.

Please refer the below UG documentation link to know more about working with Mail merge in the Word document using DocIO:
https://help.syncfusion.com/file-formats/docio/working-with-mailmerge

Please let us know if you have any other questions.

Regards,
Mohanaselvam J

 

[Chris]

Hi,

I actually got it working on my own, even though my code ended up quite a bit different then the sample.

However, I do have a question.  There are multiple versions of the merge document.  I created a ejDialog where the user can select which version of the document that they want to merge.  The controller method does the merge with correct word template.  It all works, but I would like to close the ejDialog when the merge is complete.  I have not been able to figure that out.

Below is some of my code on the client side:

        // there is a button in the tool bar that invokes ejDialog
        function OnToolbarClick(args) {

            if (args.itemName == "Agreement")
            {
                var gridObj = $("#TelecomGrid").ejGrid("instance");
                var rowIndex = gridObj.model.selectedRowIndex;
                if (rowIndex > -1) {
                    var data = gridObj.model.currentViewData[rowIndex];
                    var temp = $.templates($("#agreementDialog").html());
                    $(temp.render(data)).ejDialog({ title: "Building Access Agreement" });
                } else {
                    alert("Please select a row for the Building Access Agreement merge document.")

                }
            }
        }

   // this is the content of the ejdialog
    <script id="agreementDialog" type="text/x-jsrender">
        @{
            var attributes = new Dictionary<string, object>();
            attributes.Add("Id", "BAAForm");
        }
        @{Html.BeginForm("BuildingAccessAgreement", "Telecom", FormMethod.Post, attributes);
        {
            <input type="hidden" id="addrId" name="addrId" value="{{:Id}}" />
            <div>
                <table style="padding-right: 5em;">
                    <tr><td style="padding-right: 2em;">File:</td><td>{{:SLLFile.FileName}}</td></tr>
                    <tr>
                        <td style="padding-right: 2em;">Version:</td>
                        <td>
                            <select id="Version" name="Version">
                                <option value="NOV2017" selected>November 2017</option>
                                <option value="NOV2017SCHEDB">November 2017 With Sched B</option>
                            </select>
                        </td>
                    </tr>
                    <tr><td colspan="2">&nbsp;</td></tr>
                    <tr>
                        <td colspan="2" style="text-align:center">
                            <!--<input class="buttonStyle" type="submit" value="Run" />-->
                            <input class="buttonStyle" type="button" value="Run" onclick="runMergeDoc()" ; />
                        </td>
                    </tr>
                </table>
            </div>
        Html.EndForm();
    }}

    </script>

        // this is the javascript function that submits the form. I would to somehow close the ejDialog after the merge.
        function runMergeDoc() {     
            // submits the form, once I figure out how to close the ejDialog I will change this to an Ajax call like in the sample.
            // That is the better way to do it in this case      
            var objForm = document.getElementById("BAAForm");
            if (objForm) {               
                objForm.submit();

                // now somehow close dialog
               // below are various attempts that did not work

               // attempt 1
               // var temp = $.templates($("#agreementDialog"));
               // temp.ejDialog("close");

               // attempt 2
               //var temp = $.templates($("#agreementDialog"));
                //temp.close();

               // attempt 3
               //var temp = $.templates($("#agreementDialog").html());
              //temp.ejDialog("close");

              // attempt 4
              //var temp = $.templates($("#agreementDialog").html());
             //temp.close();

               // attempt 5
              //$("#agreementDialog").ejDialog("close");
            }
        }

Thanks,
Chris

[Mohanaselvam Jothi]

Hi Chris,

Thanks for you update.

On further analyzing with the given code snippets, we have found that the issue is due to the wrong ID given to Dialog when closing it. Actually the Dialog’s element correct ID is “BAAForm”, but you have use “agreementDialog” as ID to close the Dialog. Please find the below code snippet for more reference.  

  

  

function runMergeDoc() {  

  

        var objForm = document.getElementById("BAAForm");  

        if (objForm) {  

              objForm.submit();   

                

            // refer correct id  

            $("#BAAForm").ejDialog("close");  

              

        }  

    }  

  

  

Please check the shared details and let us know if you need any further assistance.

Regards,
Mohanaselvam J 

[Chris]

Thank you, that worked. 

I thought the dialog's ID was "agreementDialog" because of the "<script id="agreementDialog" type="text/x-jsrender">" line.  The form which is inside the dialog has the "BAAForm" id.  It doesn't seem intuitive to me.  Does the "attributes.Add("Id", "BAAForm");" line change the Id of the dialog?

Thanks,
Chris

[Arun Palaniyandi]

Hi Chris,

Thanks for you update. 

 

 Yes, the "attributes.Add("Id", "BAAForm");" line change the Id of the dialog. Actually the Dialog rendered with the form id of “BAAForm”. Since the Dialog cannot render with the script id “agreementDialog”, it rendered with the form id inside it. 

 

 

<script id="agreementDialog" type="text/x-jsrender"> //Dialog will not render with the script id 

    @{ 

        var attributes = new Dictionary<string, object>(); 

        attributes.Add("Id", "BAAForm");  // rendered with this form id 

    } 

 

    @{Html.BeginForm("BuildingAccessAgreement", "Orders", FormMethod.Post, attributes);  

        { 

            . 

            . 

            . 

       }} 

 

</script> 

 

 

Let us know if you need any further assistance. 

Regards,   

Arun P.