1. Home
  2. Forum
  3. Angular
  4. Using syncfusion grid in latest angular 2 application

Using syncfusion grid in latest angular 2 application

I am trying to use syncfusion grid in my angular 2 application(Type script) which i have take from angular 2 quick start (https://angular.io/docs/ts/latest/quickstart.html). I am not able to use  <ej-grid >component in my HTML page. 

please let me know detailed steps to use sync fusion grid in angular 2 application?

21 Replies
MS Mani Sankar Durai Syncfusion Team January 5, 2017 12:23 PM UTC

Hi Raaji, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 
Please refer the getting started section of how to use Angular 2 with Syncfusion components. 
Refer the getting started section of Syncfusion grid from the link below 

Also refer the online sample link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


RA raaji February 8, 2017 06:38 AM UTC

Thanks Mani Sankar.  I could able to create angular 2 application with <ej-grid> component

I have one more question here. 
How can i edit grid cell? i am trying with allowEdit property to true. but it is not working. and it is showing error like "Can't bind to 'allowEditing' since it isn't a known property of 'ej-grid'
Please let us know if you have any other properties to make grid cell editable?

Thanks in advance.

MS Mani Sankar Durai Syncfusion Team February 9, 2017 11:16 AM UTC

Hi Raaji, 


We have analyzed your query and based on the requirement we have prepared a sample that can be downloaded from the below link. 


In this sample we have enabled editing with editMode as Normal to edit the cell in grid. 

Please refer the below code example. 
[grid.component.html] 
<ej-grid [allowPaging]="true" [dataSource]="gridData" [editSettings]= "edit" [toolbarSettings]= "tool"> 
    <e-columns> 
... 
    </e-columns> 
</ej-grid> 
 
[grid.component.ts] 
export class GridComponent { 
    public gridData: any; 
     public edit = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "normal" } 
    public tool = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] }… 


To enable the editing operations in Grid, you have to set the allowEditing, allowAdding and allowDeleting APIs of Grid editsettings. If you would like to handle the editing functionalities via Tools, you can enable and add the defaults tools like add, edit, delete, update and cancel using the toolbarsettings.   Refer to the following API Reference sections. 


Note: To perform the editing action in the Grid, you have to mention the isPrimaryKey (read-only) column in the Grid. Because, based on this read-only column alone, save/delete of any records takes place in the Grid. Refer to the following isPrimaryKey API Reference section. 


If you need Excel/ Batch like editing we suggest you to set the editMode as “batch”. Refer the documentation link. 



Please let us know if you need further assistance. 


Regards, 
Manisankar Durai. 


RA raaji February 9, 2017 12:57 PM UTC

Thanks Mani Sankar, It is working fine. 

I am Trying to implement treeview control in the same angular 2 application. 
I am have followed same steps in the below link
 "https://help.syncfusion.com/angular-2/treeview/getting-started"

But i am getting Template parse errors. same  is attached as a zip file here. please let me know how can i use treeview?




Attachment: error1_a455d61.7z

KR Karthik Ravichandran Syncfusion Team February 10, 2017 02:46 PM UTC

Hi Raaji, 
 
Thanks for your update. 
 
We have analyzed your query (“I am Trying to implement treeview control in the same angular 2 application but getting the errors”). You can resolve this problem by changing the file references in app.module.ts file as mentioned in the below link. 
 
 
 
For your convenience, we have prepared the sample and it can be available in the below link. 
 
We will correct the document and let you once the changes published in online. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


RA raaji February 15, 2017 09:57 AM UTC

Thanks Karthik. I could able to display treeview control.

Is there any option to Export/Import Grid data to excel in angular 2 application? if yes, please let me know how can i do that?

Regards,
Rajeswari.

MS Mani Sankar Durai Syncfusion Team February 16, 2017 11:45 AM UTC

Hi Raaji, 
 
 
We can achieve exporting in ejGrid by using the export method of the Grid. We need to pass the export URL within the export method in the toolbarClick event of the Grid. Please refer to the below code example.  
 
<ej-grid #grid  [dataSource]="gridData" [allowPaging]="true" [columns]="gridcolumns" "[toolbarSettings.toolbarItems]="['excelExport', 'pdfExport', 'wordExport']"[toolbarSettings.showToolbar]="true" (toolbarClick)="ontoolItemClick($event)">  
<e-columns> 
                  ... 
</ej-grid>  
 
export class AppComponent {  
  
ontoolItemClick(e:any){      
                   if (e.itemName == "Excel Export") {  
                      this.Grid.widget.export('http://js.syncfusion.com/demos/ejServices/api/grid/ExcelExport');  
                       e.cancel = true; //prevent the default action  
                   }  
                   else if (e.itemName == "Word Export") {  
                      this.Grid.widget.export('http://js.syncfusion.com/demos/ejServices/api/grid/WordExport')  
                       e.cancel = true;  
                   }  
                   else if (e.itemName == "PDF Export") {  
                      this.Grid.widget.export('http://js.syncfusion.com/demos/ejServices/api/grid/PdfExport')  
                       e.cancel = true;  
                   }  
   
}  
public gridData = ej.DataManager({  
});  
 public gridcolumns = [{field: "OrderID"},{field: "EmployeeID"},{field: "CustomerID"},{field: "OrderDate", format:"{0:MM/dd/yyyy}"}]; 
@ViewChild('grid') Grid: EJComponents<any, any>;  
 
Please refer to the below documentation for information on server configuration for exporting.  
 
Server Configuration: https://help.syncfusion.com/js/grid/exporting#server-configuration                                                                                                                      
 
We have also prepared a sample that can be downloaded from the below link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


RA raaji February 23, 2017 12:54 PM UTC

Hi Mani Sankar,

Thanks for your reply..

I am trying to work on export to excel option in grid, when i click on export to excel icon on the toolbar, in debugger it is not going to ontoolItemClick event, i am getting error like "unable to get property 'widget' of undefined or null reference" same i am attaching here. please let me know am i missing anything here?

Attachment: error1_3b238e7a.zip

MS Mani Sankar Durai Syncfusion Team February 24, 2017 01:15 PM UTC

Hi Raaji, 

We have analyzed your query and we are not able to reproduce the reported issue.  We have also prepared a sample that can be downloaded from the below link. 
Link:                                            http://www.syncfusion.com/downloads/support/forum/128132/ze/ejGrid_exporting-2096945226 
If you still face the issue please get back to us with the following details. 
1.       Share the ES version details that you are using. 
2.       Share the video of the issue with scenario. 
3.       Share the grid rendered page and corresponding component.ts file 
4.       If possible please reproduce the issue in the above attached sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Manisankar Durai. 


PK Pratheevan kasirajah March 12, 2017 07:48 PM UTC

How do I integrate ej-grid with angular2 integrated with  aspnetcore project. I am getting below error
Call to Node module failed with error: Prerendering failed because of error: ReferenceError: ej is not defined

MS Mani Sankar Durai Syncfusion Team March 13, 2017 10:40 AM UTC

Hi Pratheevan,  
 
 
We have prepared step by step documentation to work with Visual Studio using Syncfusion Angular 2 Essential JavaScript components.  
 
Please refer the documentation link. 
 
 
The cause of this issue may occur due to improper reference of script file(ej.web.all.min.js). Also please ensure how to configure the packages, tsconfig.json from the above document will helps to integrate the angular 2 with ASP.NET Core project. 
 
Refer the getting started section of angular 2 
 
 
Please let us know if you need further assistance. 
 
 
Regards, 
Manisankar Durai. 
 


PK Pratheevan kasirajah March 13, 2017 03:57 PM UTC

Hi Manisankar

Thank you but I am getting below error. Thank you in advance.

Failed to run "C:\Users\DeepK\documents\visual studio 2017\Projects\Angular2Demo\Angular2Demo\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
module.js:327
    throw err;
    ^
Error: Cannot find module 'gulp-typescript'

MS Mani Sankar Durai Syncfusion Team March 14, 2017 01:49 PM UTC

Hi Pratheevan, 
 
 We have analyzed your query and we are not able to reproduce the reported issue. Based on your requirement we have prepared a simple sample in angular 2 integrate with ASP.NET Core and the same can be downloaded from the below link. 
 
Please check whether the gulp has been referred in the package.json and whether the gulp dependencies has been installed. Also please run the above sample so that you will not get any error.  
 
If you still face the issue please get back to us with the following details. 
1.       Share the screenshot/ video of the issue.  
2.       If possible please provide the issue reproducing sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards,
Manisankar Durai. 


PK Pratheevan kasirajah March 20, 2017 03:44 PM UTC

Thank you Mani Sankar.

As I am using VS2017, your sample did not compile. However, I downloaded VS2015 which did not complain anything. Everything went very well.

However, my concern is that MS will not support VS2015 in the future and I have been using VS2017 heavily, could you let me know where I can download working sample (seeds) for VS2017.

Thank you in advance.

Pratheevan

MS Mani Sankar Durai Syncfusion Team March 21, 2017 11:43 AM UTC

Hi Pratheevan, 

Based on your request we have created a project in VS2017 by integrating angular2 with ASP.Net Core and the same can be downloaded from the below link. 


Please let us know, the provided sample is runnable in your machine. If still you are facing any issues, please share the sample (or) files which depicts your application. This will be helpful for us to analyze and provide the solution at the earliest.  
 
Regards, 
Manisankar Durai. 


PK Pratheevan kasirajah March 21, 2017 03:22 PM UTC

Hi Sirs,

It worked like a magic.

Thank you

Pratheevan

MS Mani Sankar Durai Syncfusion Team March 22, 2017 07:10 AM UTC

Hi Pratheevan, 

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


PK Pratheevan kasirajah April 26, 2017 09:42 PM UTC

Dear Mani Sankar Durai

I am sorry for being pain. I still cannot get it working. The sample that you gave me, did not compile my changes into Js. I have created one for myself using dotnet cli. Could you take a look why this is being a problem.

Thank you

Attachment: ProductMaster_48432c3e.zip

MS Mani Sankar Durai Syncfusion Team April 28, 2017 03:28 AM UTC

Hi Pratheevan, 
 
Before proceeding please provide us the following details. 
1.       Share the screenshot/ video of the issue that you have faced. 
2.       Since we have faced the issue ej is not defined. The main cause of this issue is that you have not referred the ej.web.all file from the following location to your file. 
3.       Share the exact scenario of your requirement. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Manisankar Durai. 


PK Pratheevan kasirajah April 28, 2017 01:12 PM UTC

Dear Sir,

If I run your sample that you posted herein on March 21, 2017 07:43 AM, it would compile and works fine. But the issue that I had with the sample, was it will not compile the changes that I was making to the applications. Say for instance, I changed some description in app.component.html but the change was not applied to the files in wwwroot folder from where the application being served.

Thank you in advance.

MS Mani Sankar Durai Syncfusion Team May 2, 2017 12:32 PM UTC

Hi Pratheevan,  
 
We have analyzed your query and we are able to reproduce the reported issue that changes in app.component.html are not reflected. The main cause of this issue is that the build ‘webpack’ is not configure in package.json file. So we suggest you to set the build as webpack in package.json file 
Refer the code example. 
[package.json] 
{ 
  "scripts": { 
    "build": "webpack" 
  }, 
  "dependencies": { 
    "@angular/common": "2.4.0", 
    ... 
    "ej-angular2": "^15.1.33", 
    "es6-promise": "^3.3.1", 
 
Please follow the steps to reflect the changed one from app.component.html 
1.       Open command prompt where the package.json resides 
2.       Run `npm run build` command in command prompt. Use this command to generate updated build. 
3.       Then build the project and run the sample. The changes will get reflected. 
Note: The steps above should be followed after the code mentioned in above table to be configured in package.json file 
Please let us know if you need further assistance. 
 
Regards, 
Manisankar Durai 


Loader.
Up arrow icon