Open DocIO Sales invoice from row in grid using ASP .NET Core 2 with Razor Pages

[Marco]

Hi,

I have a working datagrid with CRUD statements binded with a SQL database. I need to generate/show an invoice when I choose the "Create Invoice" from a context menu on the clicked row. 

Could you supply a working sample of the grid control in an ASP .NET Core 2 app using Razor pages:

1. To open a invoice based on a Word template with DocIO with a context menu on the selected row

2. Is it possible to add the default "edit", "delete" items with a custom item "Create invoice" to the context menu?

3. Is it possible to add a button "Create Invoice" on top next to the CRUD statements?

My Code:

@page

@model Its.Pages.Voyages.indexModel

@{

    ViewData["Title"] = "index";

    var ddlShips = new Syncfusion.EJ2.DropDowns.DropDownList()

    {

        DataSource = Model.ShipsDataSource,

        Query = "new ej.data.Query()",

        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ShipName", Text = "ShipName" }

    };

    List<object> ContextMenuitems = new List<object>();

    ContextMenuitems.Add(new { text = "Create Invoice", target = ".e-content", id = "createinvoice" });

}

@Html.AntiForgeryToken()

<div class="col-lg-12 control-section">

    <ejs-grid id="Grid" locale="nl" actionBegin="actionBegin" rowSelected="rowSelected" allowFiltering="true" allowSorting="true" allowPaging="true" load="onLoad"

              toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"

              contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick">

        <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true"></e-grid-editsettings>

        <e-data-manager url="/Voyages/Index?handler=DataSource" insertUrl="/Voyages/Index?handler=Insert" updateUrl="/Voyages/Index?handler=Update" removeUrl="/Voyages/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-filterSettings type="CheckBox"></e-grid-filterSettings>

        <e-grid-pageSettings pageSize="15"></e-grid-pageSettings>

        <e-grid-columns>

            <e-grid-column field="VoyageId" headerText="Id" isPrimaryKey="true" validationRules="@(new { required = true, number = true })" visible="false"></e-grid-column>

            <e-grid-column field="ShipName" headerText="Schip" editType="dropdownedit" edit="new {@params = ddlShips }" width="120px"></e-grid-column>

            <e-grid-column field="Reference" headerText="Ref" validationRules="@(new { required = true })" width="90px"></e-grid-column>

            <e-grid-column field="TravelFrom" headerText="Van" validationRules="@(new { required = true })" width="120px"></e-grid-column>

            <e-grid-column field="TravelTo" headerText="Naar" validationRules="@(new { required = true })" width="120px"></e-grid-column>

            <e-grid-column field="Tonnage" headerText="Tonnage" validationRules="@(new { required = true })" editType="numericedit" format="N3" edit="@(new {@params = new { format = "N3" }})" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="Product" headerText="Product" validationRules="@(new { required=true})" width="100px"></e-grid-column>

            <e-grid-column field="StartDate" headerText="Start" editType="datetimepickeredit" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="DepartDate" headerText="Vertrek" editType="datetimepickeredit" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="ArrivalDate" headerText="Aankomst" editType="datetimepickeredit" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="EndDate" headerText="Eind" editType="datetimepickeredit" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="Freetime" headerText="Freetime" editType="numericedit" validationRules="@(new { required=true})" format="N0" textAlign="Right" width="100px"></e-grid-column>

            <e-grid-column field="Rate" headerText="Rate" format="C2" textAlign="Right" validationRules="@(new { required=true})" width="100px"></e-grid-column>

            <e-grid-column field="RatePerHour" headerText="Uurtarief" format="C2" validationRules="@(new { required=true})" textAlign="Right" width="100px"></e-grid-column>

            <e-grid-column field="Overtime" headerText="Overtime" format="C2" validationRules="@(new { required=true})" textAlign="Right" width="100px"></e-grid-column>

            <e-grid-column field="Lumpsum" headerText="Lumpsum" format="C2" validationRules="@(new { required=true})" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="ProvisionPercentage" headerText="%" editType="numericedit" validationRules="@(new { required=true})" format="P2" textAlign="Right" width="100px"></e-grid-column>

            <e-grid-column field="Freight" headerText="Vracht" allowEditing="false" format="C2" textAlign="Right" width="140px"></e-grid-column>

            <e-grid-column field="Provision" headerText="Provisie" allowEditing="false" format="C2" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="Demurrage" headerText="Demurrage" allowEditing="false" format="C2" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="DemurrageProvision" headerText="Provisie" allowEditing="false" format="C2" textAlign="Right" width="120px"></e-grid-column>

            <e-grid-column field="Total" headerText="Totaal" allowEditing="false" format="C2" textAlign="Right" width="120px"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

<script>

    function onLoad() {

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

        this.columns[7].format = { type: 'date', format: 'dd/MM/yyyy' };

        this.columns[8].format = { type: 'date', format: 'dd/MM/yyyy' };

        this.columns[9].format = { type: 'date', format: 'dd/MM/yyyy' };

        this.columns[10].format = { type: 'date', format: 'dd/MM/yyyy' };

    }

    function actionComplete() {

        return false;

    }

    var ddlShips = @Json.Serialize(Model.ShipsDataSource);

    function actionBegin(args)

    {

        if (args.requestType === "save") {

            args.data['ShipId'] = ddlShips.filter(function (d) { return d.ShipName === args.data['ShipName'] })[0].ShipId;

        }

    }

    var VoyageId;

     function rowSelected(args){

         console.log(args.data.VoyageId);

         VoyageId = args.data.VoyageId

     }

    function contextMenuClick(args) {

        if (args.item.id === 'createinvoice') {

            console.log(VoyageId);

            //document.location = '/Voyages?handler=CreateInvoice';

        }

    }

    document.addEventListener('DOMContentLoaded', function () {

        loadCultureFiles('nl');

    });

</script>

[Marco]

I found an answer on questions 2 and 3 in the doucumentation at https://ej2.syncfusion.com/aspnetcore/documentation/grid/tool-bar/?no-cache=1#custom-toolbar-items

Can you please give me an example how to open a DocIO of the selected row with a click on the added custom toolbar button.

Regards,

Marco

[Hariharan J V]

Hi Marco, 

 

Thanks for your updates. 

 

Before we start providing solution on your requirement, can you please confirm the following details. 

 

1. Do you want export current selected record from context menu click on particular row or from custom toolbar button click.
2. Do you want excel exporting or word exporting(because you are specified word template). Also, currently we have excel exporting only on EJ2 Grid.

 

Regards, 

Hariharan 

[Marco]

Hi Hariharan,

Not exactly. 

With a click on a toolbar button or context menu item I want to generate an invoice based on the primary key (VoyageId) of the selected row. The needed information for the invoice has to be queried from my sql datasource (Stored Procedure) with the VoyageId.

In the demo samples I see that it is possible to generate invoices from templates with DocIO. 

Workflow of user is: Select row in grid => click button or context menu item => View generated invoice in Word or pdf => print or email invoice

Regards,

Marco

[Kuralarasan Muthusamy]

Hi Marco, 

From your query, we found that you want to export the selected records from Grid. We have already discussed about this topic in our following help documentation. So please refer the below link for further assistance, 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/exporting-selected-data/#exporting-the-selected-records 

Regards, 

Kuralarasan M 

[Marco]

The supplied link shows how to export the selected rows from a grid to a .pdf

That is not what I asked. I want to generate an invoice with DocIo based on the Id of the selected row.

Regards,

Marco

[Marco]

Hi,

Issue is solved.

Just created a DocIo invoice razor page, like the supplied sample in the demo.

The OnGet(int id) returns the merged Word document.

The toolbar and the custom menu click opens the invoice page:

    var VoyageId;

     function rowSelected(args){

         VoyageId = args.data.VoyageId

     }

    function contextMenuClick(args) {

        if (args.item.id === 'createinvoice') {

            document.location = '/invoice/' + VoyageId;

        }

    }

    function toolbarClick(args) {

        args.originalEvent.stopPropagation();

        if (args.item.id === 'createinvoice') {

            var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

            if (grid.getSelectedRecords().length > 0) {

                document.location = '/invoice/' + grid.getSelectedRecords()[0].VoyageId;

            }

        }

    }

Regards,

Marco

[Hariharan J V]

Hi Marco, 

 

Thanks for your update.  

  

We are happy to hear that your issue has solved.  We hav also prepared a simple to generate invoice dynamically. Please refer the below sample. 

 

https://stackblitz.com/edit/typescript-invoice-pdf 

  

Please contact us if you need any further assistance. As always, we will be happy to assist you.   

  

Regards, 

Hariharan