problem with layout grid

[Sietse Wielenga]

Hi,

I followed the steps in "Getting Started with Angular SPA on ASP.NET Core with .NET CLI" on

https://help.syncfusion.com/angular/gettingstarted/getting-started-with-dotnet-cli?cs-save-lang=1&cs-lang=ts

and also I checked https://help.syncfusion.com/angular/grid/getting-started

When I add a ej-grid to my page, the data shows up, but in a unformatted way without any layout and filters (see attachment for screenshot).

See below the code I use on my page. What do I have to change to get it work? Many thanks in advance.

test1.component.html

<div id="test-grid">
    <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true" [filterSettings]="filterType">
        <e-columns>
            <e-column field="OrderID" headerText="OrderID"></e-column>
            <e-column field="EmployeeID" headerText="EmployeeID"></e-column>
            <e-column field="CustomerID" headerText="CustomerID"></e-column>
            <e-column field="ShipCountry" headerText="ShipCountry"></e-column>
            <e-column field="Freight" headerText="Freight"></e-column>
        </e-columns>
    </ej-grid>
</div>

test1.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-test1',
    templateUrl: './test1.component.html'
})
export class Test1Component {

    public gridData: any;
    public dataManager: any;
    public filterType: any;

    constructor() {
        this.dataManager = new ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
            crossDomain: true
        });
        this.gridData = this.dataManager;
        this.filterType = { filterType: "excel" };
    }
}

[Mani Sankar Durai]

Hi Sietse, 

Thanks for contacting Syncfusion support.  

We have checked the query and from    the screenshot we found that CSS are not referred properly in grid. The following issue may occur when CSS are not build properly. We have already explained about how to build the Syncfusion themes and the same can be available from the below link 

Link: https://help.syncfusion.com/angular/gettingstarted/getting-started-with-dotnet-cli?cs-save-lang=1&cs-lang=ts#bundling-syncfusion-javascript-theme-files 

Please ensure whether you have add the below script in package.json 

{ 

  ... 

  "scripts": { 

    "test": "karma start ClientApp/test/karma.conf.js", 

    "build": "webpack --config webpack.config.vendor.js && webpack" 

  }, 

} 

After adding please ensure whether you have build using the command “npm run build”. 

We have also prepared a sample and that can be available from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/135722/ze/dotnetcli-671001492 

Refer the screenshot below 

 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai.