Angular 5 + WebPack : NgGrid appear flat/not skinned

8 Replies
3 Participants

Created by
JE JeanR

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
Grid

Created On
Mar 14, 2018 04:33 PM UTC

Last Activity On
Mar 20, 2018 05:45 PM UTC

Want to subscribe?
SIGN IN

Hi,

I obviously missed something in the documentation, leading to this result when i try to use syncfusion modules :

packages.json

"dependencies": {
(...)
"@syncfusion/ej2": "16.1.24",
    "@syncfusion/ej2-base": "16.1.24",
    "@syncfusion/ej2-cards": "16.1.24",
    "@syncfusion/ej2-lists": "16.1.24",
    "@syncfusion/ej2-buttons": "16.1.24",
    "@syncfusion/ej2-grids": "16.1.24",
    "@syncfusion/ej2-inputs": "16.1.24",
    "@syncfusion/ej2-popups": "16.1.24",
    "@syncfusion/ej2-ng-base": "16.1.24",
    "@syncfusion/ej2-ng-buttons": "16.1.24",
    "@syncfusion/ej2-ng-lists": "16.1.24",
    "@syncfusion/ej2-ng-grids": "16.1.24",
    "@syncfusion/ej2-ng-dropdowns": "16.1.24",
    "@syncfusion/ej2-ng-calendars": "16.1.24",
    "@syncfusion/ej2-ng-navigations": "16.1.24",
    "@syncfusion/ej2-ng-inputs": "16.1.24",
    "@syncfusion/ej2-ng-popups": "16.1.24",
    "@syncfusion/ej2-ng-splitbuttons": "16.1.24"
}

vendor.ts (Webpack entry):

import "@syncfusion/ej2/bootstrap.scss";
import "@syncfusion/ej2-base/styles/bootstrap.scss";
import "@syncfusion/ej2-ng-grids/styles/bootstrap.scss";
import "@syncfusion/ej2-grids/styles/bootstrap.scss";
import "@syncfusion/ej2-dropdowns/styles/bootstrap.scss";
import "@syncfusion/ej2-ng-dropdowns/styles/bootstrap.scss";

In my module.ts i do the required imports:

import { GridAllModule } from '@syncfusion/ej2-ng-grids';
import { NumericTextBoxAllModule } from '@syncfusion/ej2-ng-inputs';
import { CheckBoxAllModule, RadioButtonAllModule } from '@syncfusion/ej2-ng-buttons';
import { MultiSelectAllModule, DropDownListAllModule } from '@syncfusion/ej2-ng-dropdowns';
import { DialogAllModule, TooltipAllModule, PopupAllModule } from '@syncfusion/ej2-ng-popups';

(...)

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        RouterModule.forChild(routes),
        GridAllModule, DropDownListAllModule,
        NumericTextBoxAllModule, NumericTextBoxAllModule, CheckBoxAllModule, RadioButtonAllModule,
        MultiSelectAllModule, DialogAllModule, TooltipAllModule, PopupAllModule
    ],

my component.html:

<div class="panel-body">
    <div class="select-wrap">
        <ejs-dropdownlist id='ddlelement' value='Menu' [dataSource]='ddldata' [fields]='ddlfields' (change)="onChange($event)"></ejs-dropdownlist>
    </div>
    <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'>
        <e-columns>
            <e-column field='Id' headerText='Id' width='120' textAlign='Right'></e-column>
            <e-column field='Reference' headerText='Reference' width='150'></e-column>
            <e-column field='Description' headerText='Description'></e-column>
        </e-columns>
    </ejs-grid>
</div>

My component.scss:

@import "ej2/bootstrap.scss";
@import "ej2-base/styles/bootstrap.scss";
@import "ej2-ng-grids/styles/bootstrap.scss";
@import "ej2-grids/styles/bootstrap.scss";
@import "ej2-dropdowns/styles/bootstrap.scss";
@import "ej2-ng-dropdowns/styles/bootstrap.scss";

My component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { GridComponent, FilterService, FilterType, PageSettingsModel } from '@syncfusion/ej2-ng-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';

const serviceUri: string = 'https://127.0.0.1:9007/api/ODataCatalog';

@Component({
    selector: 'gridCatalog',
    styleUrls: ['gridcatalog.component.scss'],
    templateUrl: './gridcatalog.component.html'
})
export class GridCatalogComponent implements OnInit {
    public data: DataManager;
    public pageSettings: Object;
    public ddldata: Object[];
    public filterSettings: Object;
    public filteringType: Object[] = [
        { Id: 'Menu', type: 'Menu' },
        { Id: 'CheckBox', type: 'Checkbox' },
        { Id: 'Excel', type: 'Excel' }
    ];
    public ddlfields: Object = { text: 'type', value: 'Id' };

    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = new DataManager({ url: serviceUri, adaptor: new ODataV4Adaptor, crossDomain: true });
        this.pageSettings = { pageCount: 5 };
        this.filterSettings = { type: 'Menu' };
        this.ddldata = this.filteringType;
    }

    public onChange(e: ChangeEventArgs): void {
        this.grid.filterSettings.type = <FilterType>e.value;
        this.grid.clearFiltering();
    }
}

Note:

Angular 5 project using Webpack (3) and Bootstrap 3.3.7 embeded in an Asp.Net Core 2 project.
Data loading (odatav4) and paging works well, so i guess that all the required javascript was loaded successfully.
No error during webpack build nor page loading, & i can find e-*** css styles loaded in the browser

Questions:

what did i forgot ?
am i wrong assuming that i just have to import the scss, without the css (css are so big) ?
do i need to import the non-ng packages ? like ej2-ng-grids AND ej2-grids.
can you add a code block & a preview feature in this form ? :-)

Thanks

8 Replies

PS Pavithra Subramaniyam Syncfusion Team March 18, 2018 04:27 PM UTC

Hi Jean,

We have checked your code example and we would like to suggest you to use *.css files instead of *.scss files since in the *.scss files contains only imported statements of the other scss files(layout and themes). *.css files are the bundled version of these scss files. So when compared with *.scss files *.css files will be large.

Query: “do i need to import the non-ng packages ? like ej2-ng-grids AND ej2-grids.”

You can use either ej2-ng-grids or ej2-grids css file which contains same styles for grid and its dependency.

Please refer to the code example and documentation link below.

[style.css]

@import "ej2-base/styles/bootstrap.css";

@import "ej2-ng-grids/styles/bootstrap.css";

@import "ej2-ng-dropdowns/styles/bootstrap.css";

Documentation: https://ej2.syncfusion.com/16.1.24/angular/documentation/common/theme.html#bootstrap

Sample: https://github.com/Pavithra15/ej2-ng-grids-customize-row

Regards,

Pavithra S.

JE JeanR March 18, 2018 08:56 PM UTC

Thanks Pavithra !

VI Viktor March 19, 2018 11:31 AM UTC

Hi,
sorry to be off topic here.
i've stumbled upon what seems to be a bug in the latest version 16.1.24 (:

"@syncfusion/ej2-base": "16.1.24",
"@syncfusion/ej2-ng-grids": "16.1.24",
"@syncfusion/ej2-ng-buttons": "16.1.24"

ERROR: "Unhandled Promise rejection: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'ej-grid' ........"

but there is no problem with the version 15.4.23\30!
"@syncfusion/ej2-base": "15.4.23",
"@syncfusion/ej2-ng-grids": "15.4.30",
"@syncfusion/ej2-ng-buttons": "15.4.30"

can you please take a look at this?
thanks
regards
viktor

Attachment: AngularEJ2Demo_48f56570.zip

JE JeanR March 19, 2018 12:26 PM UTC

Hi Victor,

I don't see any loading of the GridComponent, DataManager and so on in you home.component.ts nor app.shared.modules.ts.

Below sample of my imports (to be added in you home.component.ts), you don't need all of it of course, but DataManager, GridComponent are required for sure.

import { DataManager, ODataV4Adaptor, Query } from "@syncfusion/ej2-data";
import { GridComponent } from "@syncfusion/ej2-ng-grids";
import { FilterService, FilterType, ReorderService, ResizeService, SortService, GroupService, ColumnMenuService, PageService } from "@syncfusion/ej2-ng-grids";
import { GroupSettingsModel, FilterSettingsModel, EditSettingsModel, PageSettingsModel, ContextMenuItem } from "@syncfusion/ej2-ng-grids";

PS Pavithra Subramaniyam Syncfusion Team March 19, 2018 12:59 PM UTC

Hi Jean,

We have checked your query and the cause of the issue is Essential JavaScript 2 Angular components tag has been changed from the version v 16.2.24. Please refer to the following code example and documentation link and demo link.

[grid.html]

<ejs-grid [dataSource]='data' height='350'>

<e-columns>

. . .

</e-columns>

</ejs-grid>

Demo Link: https://ej2.syncfusion.com/16.1.24/angular/demos/#/material/grid/default

Regards,

Pavithra S.

VI Viktor March 19, 2018 01:29 PM UTC

Hi JeanR,
thank for you quick response!
the config in app.shared.module.ts loooks something like this (see below).

import { ButtonModule } from '@syncfusion/ej2-ng-buttons';
import { GridModule, ExcelExportService, VirtualScrollService, PdfExportService, PageService, FilterService, GroupService, SortService, EditService, ToolbarService } from '@syncfusion/ej2-ng-grids';
import { GridComponent } from "@syncfusion/ej2-ng-grids";
import { FilterType, ReorderService, ResizeService, ColumnMenuService} from "@syncfusion/ej2-ng-grids";
import { GroupSettingsModel, FilterSettingsModel, EditSettingsModel, PageSettingsModel, ContextMenuItem } from "@syncfusion/ej2-ng-grids";
import { DataManager, ODataV4Adaptor, Query } from "@syncfusion/ej2-data";

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
providers: [PageService, ToolbarService, VirtualScrollService, ExcelExportService, PdfExportService, FilterService, GroupService, SortService, EditService, ToolbarService],
    exports: [],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        GridModule,
        ButtonModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

meanwhile i was able to reproduce the problem with the offical syncfusion sample.
https://github.com/Pavithra15/ej2-ng-grids-customize-row
just change the @syncfusion dependencies from "*" to "16.1.24" and the error will appear(:
see screenshot below.
hmmm...
any idea?
thanks!
viktor