1. Home
  2. Forum
  3. ASP.NET Core
  4. ASP.Net Core + Razor + Typescript.

ASP.Net Core + Razor + Typescript.

Hello,
I tried the following EjGridtest projects with Syncfusion:
Visual Studio 2017 + .net Core + Angular 4
Visual Studio 2017 +MVC ASP.NET Core 2 + Razor + Javascript
Visual Studio 2017 + HTML + Typescript
All the Projects run perfectly
Now I wantto try the following scenario:
Visual Studio 2017 + MVC ASP.NET Core 2 + Razor + Typescript instead of Javascript.
How can I use Typescript for Syncfusion controls like Grid?
Please if this scenario is possible than send me a short example.
Thank you
Regards
Anis Helaoui

5 Replies
VN Vignesh Natarajan Syncfusion Team February 13, 2018 02:31 AM UTC

Hi Anis, 
  
Thank for using Syncfusion Products 
  
As per your request we have prepared a sample in ASP CORE 2.0 using typescript and razor. Kindly download the sample from below link 
  
  
Refer the below code snippet for your reference 
  
[cshtml] 
 
<html> 
<body> 
    <h1>TypeScript HTML App</h1> 
    <div id="Grid"></div> 
</body> 
</html> 
 
[ts] 
/// <reference path="tsfiles/ej.web.all.d.ts" /> 
/// <reference path="tsfiles/jquery.d.ts" /> 
 
module GridComponent { 
    $(function () { 
        var gridInstance = new ej.Grid($("#Grid"), { 
            dataSource: (<any>window).gridData, 
            allowGrouping: true, 
            allowSorting: true, 
            allowMultiSorting: true, 
            enableAltRow: true, 
            allowPaging: true, 
            allowReordering: true, 
            allowResizing: true, 
            allowFiltering: true, 
            allowScrolling: true, 
            enableRowHover: true, 
            selectionType: "multiple", 
            selectionSettings: { enableToggle: true, selectionMode: ["row", "cell", "column"] }, 
            allowKeyboardNavigation: true, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: true, showDeleteConfirmDialog: true }, 
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel", "search"] }, 
            columns: [ 
                { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right }, 
                { field: "CustomerID", headerText: "Customer ID", editType: ej.Grid.EditingType.String, width: 80 }, 
                { field: "EmployeeID", headerText: "Employee ID", width: 75, editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, priority: 4 }, 
                { field: "Freight", width: 75, format: "{0:C}", editType: ej.Grid.EditingType.Numeric, textAlign: ej.TextAlign.Right, priority: 3 }, 
                { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 }, 
                { field: "ShipCity", headerText: "Ship City", editType: ej.Grid.EditingType.Dropdown, width: 110, priority: 2 } 
            ], 
            isResponsive: true, 
            minWidth: 700, 
            showSummary: true, 
            summaryRows: [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}" }] }] 
        }); 
    }); 
} 
 
[js] associated with ts file 
/// <reference path="tsfiles/ej.web.all.d.ts" /> 
/// <reference path="tsfiles/jquery.d.ts" /> 
var GridComponent; 
(function (GridComponent) { 
    $(function () { 
        var gridInstance = new ej.Grid($("#Grid"), { 
            dataSource: window.gridData, 
            allowGrouping: true, 
            allowSorting: true, 
            allowMultiSorting: true, 
            enableAltRow: true, 
            allowPaging: true, 
            allowReordering: true, 
            allowResizing: true, 
            allowFiltering: true, 
            allowScrolling: true, 
            enableRowHover: true, 
            selectionType: "multiple", 
            selectionSettings: { enableToggle: true, selectionMode: ["row", "cell", "column"] }, 
            allowKeyboardNavigation: true, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: true, showDeleteConfirmDialog: true }, 
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel", "search"] }, 
            columns: [ 
                { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right }, 
                { field: "CustomerID", headerText: "Customer ID", editType: ej.Grid.EditingType.String, width: 80 }, 
                { field: "EmployeeID", headerText: "Employee ID", width: 75, editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, priority: 4 }, 
                { field: "Freight", width: 75, format: "{0:C}", editType: ej.Grid.EditingType.Numeric, textAlign: ej.TextAlign.Right, priority: 3 }, 
                { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 }, 
                { field: "ShipCity", headerText: "Ship City", editType: ej.Grid.EditingType.Dropdown, width: 110, priority: 2 } 
            ], 
            isResponsive: true, 
            minWidth: 700, 
            showSummary: true, 
            summaryRows: [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}" }] }] 
        }); 
    }); 
})(GridComponent || (GridComponent = {})); 
//# sourceMappingURL=grid.js.map 
 
Layout.cshtml 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>@ViewData["Title"] - WebApplication1</title> 
 
    <environment include="Development"> 
        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
        <link rel="stylesheet" rel='nofollow' href="~/css/site.css" /> 
        <link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> 
        <script src="~/lib/jquery/dist/jquery.js"></script>         
        <script src="~/lib/jsrender/jsrender.js"></script> 
        <script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script> 
        <script src="~/lib/tsfiles/jsondata.min.js"></script> 
        <script src="~/lib/grid.js"></script> 
 
    </environment> 
</head> 
<body> 
 
    <div class="container body-content"> 
        @RenderBody() 
    </div> 
 
 
    @RenderSection("Scripts", required: false) 
    <ej-script-manager></ej-script-manager> 
</body> 
</html> 
 
 
We have referred the js file in the layoutcshtml file of the script section. 
  
Please get back to us if need further assistance. 
  
We have referred local data to bound the Grid. You can modify your sample to load data from controller. 
 
Regards, 
Vignesh Natarajan 
 


AH Anis Helaui February 15, 2018 09:59 AM UTC

Hello Vignesh,

1)
thank you for your reply. I tried the example and it worked well. 
If I implement an Event in your example, can I continue to use the gridInstance or should I retrieve the grid with a Javascript/Typescript instance at each Event?
Example:
 
function onToolBarClick(args) {

var grid = $("#Grid").ejGrid("instance"); //mention the ID in # tag.

var ejgridSelecteds = grid.getSelectedRecords();

var item = ejgridSelecteds[0];

console.log(item.Auswahlid);

}


 2)
In reality I mean with ASP.Net Core + Razor + Typescript that I define the grid with Razor and I implement the events with Typescript :
Example:

<ej-grid id="Grid" allow-sorting="true" allow-paging="true" toolbar-click="onToolBarClick">

<e-datamanager url="..." update-url="Update" insert-url="Insert" remove-url="Delete" adaptor="WebApiAdaptor">e-datamanager>

<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true">e-edit-settings>

<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string>{"add","edit","delete","update","cancel"}'>

<e-custom-toolbar-items>

<e-custom-toolbar-item template-id="#Produkte">e-custom-toolbar-item>

e-custom-toolbar-items>

e-toolbar-settings>

<e-columns>

<e-column field="auswahlid" header-Text="Auswahl Id" width="75" text-align="Right">e-column>

<e-column field="bezeichnung" header-Text="Bezeichnung" width="80" text-align="Right">e-column>

<e-column field="bemerkung" header-Text="Bemerkung" width="75" text-align="Right">e-column>

<e-column field="creationdate" header-Text="Creation date" width="80" edit-type="Datepicker" format="{0:MM/dd/yyyy}" textAlign="right">e-column>

e-columns>

ej-grid>

I don´t want to use javascript but typescript (analog to Angular) if I implement Events. Is that possible and does it supported? Or should I prefer to use Javascript in this case, because Javascript is better documented and there are several examples on your site?

Example: Should I implement this example in Javascript or Typescript? Is there any difference if I use typescript instead of Javascript?

function onToolBarClick(args) {

var grid = $("#Grid").ejGrid("instance");

var ejgridSelecteds = grid.getSelectedRecords();

var item = ejgridSelecteds[0];

console.log(item.auswahlid);

}

Regards

Anis Helaoui


　







}










MP Manivannan Padmanaban Syncfusion Team February 16, 2018 02:54 PM UTC

Hi Anis, 

Query 1: can I continue to use the gridInstance or should I retrieve the grid with a Javascript/Typescript instance at each Event? 
 
There is no need to create the grid instance for each and every event. We suggest you to use ‘this’ variable. 
 
Query : Grid instance in typescript 
 
You can also create the grid instance in typescript please refer the below code example, 
 
 
[component.html]  <div id="Grid"></div>
[component.ts] 
 
module GridComponent { $(function () { var gridInstance = new ej.Grid($("#Grid"), { dataSource: window["gridData"], columns: [ { field: "OrderID", isPrimaryKey: true },………..{ field: "ShipCountry" } ] } }

Query : I don´t want to use javascript but typescript (analog to Angular) if I implement Events. Is that possible and does it supported? Or should I prefer to use Javascript in this case, because Javascript is better documented and there are several examples on your site? 
 
For implementing the ejGrid events you use either typescript or javascript .In our online docuementation we have used javascript for implementing grid events because in angular 2 we have created the grid instance using viewchild which is supportable in javascript. 

Regards, 

Manivannan Padmanaban. 


MJ Mohamed Jasim March 13, 2018 06:27 AM UTC

Hi All,
 How are you all?
Please guide How to create 
<ej-grid id="Grid" allow-sorting="true" allow-paging="true" toolbar-click="onToolBarClick">
grid manually

VN Vignesh Natarajan Syncfusion Team March 14, 2018 01:49 PM UTC

Hi Mohamed, 

Thanks for using Syncfusion products. 

Query: “how to render the Grid manually” 

We have analyzed your query and we suspect that you need to render the Grid using ASP.NET CORE. We have already prepared a UG documentation for your query. 

Kindly refer the below UG documentation for your reference 


please get back to us if you need further clarifications. 

Regards, 
Vignesh Natarajan.  



Loader.
Up arrow icon