Using syncfusion grid in latest angular 4 application

[Pradeep]

I am trying to use syncfusion grid in my angular 4 application(Type script) . I am not able to use  <ej-grid >component in my HTML page. 

it is showing error like "Can't bind to 'toolbar' since it isn't a known property of 'ej-grid' 

please let me know detailed steps to use sync fusion grid with toolbar option to add,edit,update & delete in angular 4 application?

[Mani Sankar Durai]

Hi Pradeep, 

Thanks for contacting Syncfusion support. 

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/133605/ze/angular2-seeds-master674274790 

Refer the code example 

[grid.component.html] 

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [editSettings]="editSettings"> 

    <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="75" [isPrimaryKey]="true" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> 

... 

    </e-columns> 

</ej-grid> 

 

 

[grid.component.ts] 

 

export class GridComponent { 

    public editSettings; 

    public toolbarItems; 

    constructor() { 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "normal" }; 

        this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] }; 

                              ... 

 

 

[package.json] 

"dependencies": { 

    "@angular/common": "~4.3.6", 

    "@angular/compiler": "~4.3.6", 

    "@angular/core": "~4.3.6", 

    "@angular/forms": "~4.3.6", 

    "@angular/http": "~4.3.6", 

    ... 

  }, 

Refer the documentation link 

Link: https://help.syncfusion.com/angular/grid/editing#edit-modes 

If you still face the issue please get back to us with the following details. 

1.       Share the screenshot/ video of the issue that you have faced. 

2.       Share the full grid code and the package.json file. 

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

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.