We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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:

@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" });


<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-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>

    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){
         VoyageId = args.data.VoyageId

    function contextMenuClick(args) {
        if (args.item.id === 'createinvoice') {
            //document.location = '/Voyages?handler=CreateInvoice';

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


7 Replies

MA Marco April 16, 2019 02:40 PM

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.


HJ Hariharan J V Syncfusion Team April 17, 2019 03:52 AM

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.

MA Marco April 17, 2019 08:25 AM

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


KM Kuralarasan Muthusamy Syncfusion Team April 19, 2019 05:27 AM

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, 

Kuralarasan M 

MA Marco April 19, 2019 05:33 AM

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.


MA Marco April 23, 2019 04:51 AM


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) {
        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;


HJ Hariharan J V Syncfusion Team April 24, 2019 07:34 AM

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. 
Please contact us if you need any further assistance. As always, we will be happy to assist you.   

Live Chat Icon For mobile
Up arrow icon