Angular 5 + WebPack : NgGrid appear flat/not skinned

[JeanR]

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

[Pavithra Subramaniyam]

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. 

[JeanR]

Thanks Pavithra !

G

M

T

Détecter la langueAfrikaansAlbanaisAllemandAnglaisArabeArménienAzériBasqueBengaliBiélorusseBirmanBosniaqueBulgareCatalanCebuanoChichewaChinois (Simp)Chinois (Trad)CingalaiCoréenCréole haïtienCroateDanoisEspagnolEspérantoEstonienFinnoisFrançaisGalicienGalloisGéorgienGoudjaratiGrecHaoussaHébreuHindiHmongHongroisIgboIndonésienIrlandaisIslandaisItalienJaponaisJavanaisKannadaKazakhKhmerLaotienLatinLettonLituanienMacédonienMalaisienMalayalamMalgacheMaltaisMaoriMarathiMongolNéerlandaisNépalaisNorvégienOuzbekPanjabiPersanPolonaisPortugaisRoumainRusseSerbeSesothoSlovaqueSlovèneSomaliSoudanaisSuédoisSwahiliTadjikTagalogTamoulTchèqueTeluguThaïTurcUkrainienUrduVietnamienYiddishYoroubaZoulou

AfrikaansAlbanaisAllemandAnglaisArabeArménienAzériBasqueBengaliBiélorusseBirmanBosniaqueBulgareCatalanCebuanoChichewaChinois (Simp)Chinois (Trad)CingalaiCoréenCréole haïtienCroateDanoisEspagnolEspérantoEstonienFinnoisFrançaisGalicienGalloisGéorgienGoudjaratiGrecHaoussaHébreuHindiHmongHongroisIgboIndonésienIrlandaisIslandaisItalienJaponaisJavanaisKannadaKazakhKhmerLaotienLatinLettonLituanienMacédonienMalaisienMalayalamMalgacheMaltaisMaoriMarathiMongolNéerlandaisNépalaisNorvégienOuzbekPanjabiPersanPolonaisPortugaisRoumainRusseSerbeSesothoSlovaqueSlovèneSomaliSoudanaisSuédoisSwahiliTadjikTagalogTamoulTchèqueTeluguThaïTurcUkrainienUrduVietnamienYiddishYoroubaZoulou

Fonction Sound est limitée à 200 caractères

Options : Historique : Commentaires : Donate

Fermer

[Viktor]

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

[JeanR]

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";

[Pavithra Subramaniyam]

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. 

[Viktor]

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

[Viktor]

bingo!
You are right!!
that's it!
thank you for your  support!!!!
regards
viktor

[Pavithra Subramaniyam]

Hi Jean, 

 

Thanks for your update. 

 

We are glad to hear that your problem has been resolved. Please contact us if you have any queries. 

 

Regards, 

Pavithra S.