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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





144019 Apr 15,2019 08:54 AM UTC Apr 24,2019 12:34 PM UTC ASP.NET Core - EJ 2 7
Tags: DataGrid
Asked On April 15, 2019 08:54 AM UTC


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


Replied On April 16, 2019 07:40 PM UTC

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.


Hariharan J V [Syncfusion]
Replied On April 17, 2019 08:52 AM UTC

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.

Replied On April 17, 2019 01:25 PM UTC

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


Kuralarasan Muthusamy [Syncfusion]
Replied On April 19, 2019 10:27 AM UTC

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 

Replied On April 19, 2019 10:33 AM UTC

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.


Replied On April 23, 2019 09:51 AM UTC


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;


Hariharan J V [Syncfusion]
Replied On April 24, 2019 12:34 PM UTC

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.   


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon