Skip to content

Commit a05be1e

Browse files
author
pipeline
committed
bug(EJ2-3750): Fixed remote data sample issue
1 parent 80ded53 commit a05be1e

15 files changed

+140
-32
lines changed

‎src/listview/default-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/listview/default.component.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ import { Component, Inject } from '@angular/core';
1111
export class DefaultListViewComponent {
1212

1313
public data: Object[] = [
14-
{ text: 'Hennessey Venom' },
15-
{ text: 'Bugatti Chiron' },
16-
{ text: 'Bugatti Veyron Super Sport' },
17-
{ text: 'SSC Ultimate Aero' },
18-
{ text: 'Koenigsegg CCR' },
19-
{ text: 'McLaren F1' },
20-
{ text: 'Aston Martin One- 77' },
21-
{ text: 'Jaguar XJ220' },
22-
{ text: 'McLaren P1' },
23-
{ text: 'Ferrari LaFerrari' },
14+
{ text: 'Hennessey Venom', id: 'list-01' },
15+
{ text: 'Bugatti Chiron', id: 'list-02' },
16+
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
17+
{ text: 'SSC Ultimate Aero', id: 'list-04' },
18+
{ text: 'Koenigsegg CCR', id: 'list-05' },
19+
{ text: 'McLaren F1', id: 'list-06' },
20+
{ text: 'Aston Martin One- 77', id: 'list-07' },
21+
{ text: 'Jaguar XJ220', id: 'list-08' },
22+
{ text: 'McLaren P1', id: 'list-09' },
23+
{ text: 'Ferrari LaFerrari', id: 'list-10' },
2424
];
2525

2626
public groupData: { [key: string]: Object }[] = [
@@ -78,7 +78,7 @@ export class DefaultListViewComponent {
7878

7979
public fields: Object = { groupBy: 'category' };
8080

81-
constructor(@Inject('sourceFiles') private sourceFiles:any) {
81+
constructor(@Inject('sourceFiles') private sourceFiles:any) {
8282
sourceFiles.files = ['listview.css'];
8383
}
8484

‎src/listview/images/file_icons.png‎

35.2 KB
Loading

‎src/listview/images/sbarrows.png‎

404 Bytes
Loading

‎src/listview/listview.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,32 @@
2121
#group-list {
2222
float: right;
2323
}
24-
h4 {
24+
#flat-list h4, #group-list h4 {
2525
padding-left: 15px;
2626
}
27+
.e-listview .e-list-icon {
28+
height: 24px;
29+
width: 30px;
30+
}
31+
#listview {
32+
max-width: 500px;
33+
margin: auto;
34+
border: 1px solid #dddddd;
35+
border-radius: 3px;
36+
}
37+
.folder {
38+
background-repeat: no-repeat;
39+
background-image: url('http://ej2.syncfusion.com/demos/src/listview/images/file_icons.png');
40+
background-position: -5px -465px;
41+
background-size: 302%;
42+
}
43+
44+
.file {
45+
background-repeat: no-repeat;
46+
background-image: url('http://ej2.syncfusion.com/demos/src/listview/images/file_icons.png');
47+
background-position: -5px -151px;
48+
background-size: 302%;
49+
}
2750
@media (max-width: 590px) {
2851
#flat-list, #group-list {
2952
width: 100%;

‎src/listview/listview.module.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33

4-
import { ListViewModule } from '@syncfusion/ej2-ng-lists';
5-
64
import { DefaultListViewComponent } from './default.component';
75
import { RTLListViewComponent } from './rtl.component';
86
import { RemoteListViewComponent } from './remote-list.component';
7+
import { NestedListViewComponent } from './nested-list.component';
98
import { SharedModule } from '../common/shared.module';
109
export const listAppRoutes: Object[] = [
1110
{ path: 'listview/default', component: DefaultListViewComponent, name: 'Default Functionalities', category: 'ListView' },
1211
{ path: 'listview/remote-list', component: RemoteListViewComponent, name: 'Remote List', category: 'ListView' },
12+
{ path: 'listview/nested-list', component: NestedListViewComponent, name: 'Nested List', category: 'ListView' },
1313
{ path: 'listview/rtl', component: RTLListViewComponent, name: 'RTL', category: 'ListView' }
1414
];
1515

1616
export const ListviewRouter: ModuleWithProviders = RouterModule.forChild(listAppRoutes);
1717

1818
@NgModule({
19-
imports: [ListviewRouter, ListViewModule, SharedModule],
19+
imports: [ListviewRouter, SharedModule],
2020
declarations: [
2121
DefaultListViewComponent,
2222
RTLListViewComponent,
23-
RemoteListViewComponent
23+
RemoteListViewComponent,
24+
NestedListViewComponent
2425
],
2526
exports:[DefaultListViewComponent],
2627
schemas: [CUSTOM_ELEMENTS_SCHEMA]

‎src/listview/nested-list-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n imports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ],\n \n exports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ]\n})\nexport class SharedModule { }\n","app.module":"import { NestedListViewComponent } from './nested-list.component';\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n imports: [SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [NestedListViewComponent],\nbootstrap: [NestedListViewComponent]\n})\nexport class AppModule { }","nested-list.component":"import { Component, Inject, ViewEncapsulation } from '@angular/core';\n\n/**\n * Nested ListView component\n */\n@Component({\n selector: 'control-content',\n templateUrl: 'nested-list.html',\n styleUrls: ['listview.css'],\n encapsulation: ViewEncapsulation.None\n})\nexport class NestedListViewComponent {\n\n public data: { [key: string]: Object }[] = [\n {\n id: '01', text: 'Music', icon: 'folder',\n child: [\n { id: '01-01', text: 'Gouttes.mp3', icon: 'file' }\n ]\n },\n {\n id: '02', text: 'Videos', icon: 'folder',\n child: [\n { id: '02-01', text: 'Naturals.mp4', icon: 'file' },\n { id: '02-02', text: 'Wild.mpeg', icon: 'file' },\n ]\n },\n {\n id: '03', text: 'Documents', icon: 'folder',\n child: [\n { id: '03-01', text: 'Environment Pollution.docx', icon: 'file' },\n { id: '03-02', text: 'Global Water, Sanitation, & Hygiene.docx', icon: 'file' },\n { id: '03-03', text: 'Global Warming.ppt', icon: 'file' },\n { id: '03-04', text: 'Social Network.pdf', icon: 'file' },\n { id: '03-05', text: 'Youth Empowerment.pdf', icon: 'file' },\n ]\n },\n {\n id: '04', text: 'Pictures', icon: 'folder',\n child: [\n {\n id: '04-01', text: 'Camera Roll', icon: 'folder',\n child: [\n { id: '04-01-01', text: 'WIN_20160726_094117.JPG', icon: 'file' },\n { id: '04-01-02', text: 'WIN_20160726_094118.JPG', icon: 'file' },\n { id: '04-01-03', text: 'WIN_20160726_094119.JPG', icon: 'file' }\n ]\n },\n {\n id: '04-02', text: 'Wind.jpg', icon: 'file'\n },\n {\n id: '04-02', text: 'Stone.jpg', icon: 'file'\n },\n {\n id: '04-02', text: 'Home.jpg', icon: 'file'\n },\n {\n id: '04-02', text: 'Bridge.png', icon: 'file'\n }\n ]\n },\n {\n id: '05', text: 'Downloads', icon: 'folder',\n child: [\n { id: '05-01', text: 'UI-Guide.pdf', icon: 'file' },\n { id: '05-02', text: 'Tutorials.zip', icon: 'file' },\n { id: '05-03', text: 'Game.exe', icon: 'file' },\n { id: '05-04', text: 'TypeScript.7z', icon: 'file' },\n ]\n },\n ];\n\n public fields: { [key: string]: string } = {\n iconCss: 'icon', tooltip: 'text'\n };\n\n public headerTitle: string = 'Folders';\n\n \n\n}","nested-list.html":"<div class=\"control-section\">\n <ej-listview id='listview' [dataSource]='data' [fields]='fields' [headerTitle]='headerTitle' [showIcon]='true' [showHeader]='true'></ej-listview>\n</div>","listview.css":"#sample-list {\n max-width: 500px;\n}\n#sample-list,#sample-list-flat,#sample-list-group {\n border: 1px solid #dddddd;\n border-radius: 3px;\n margin: auto; \n}\n.control-section {\n overflow: auto;\n padding-bottom: 10px;\n}\n#flat-list, #group-list {\n width: 50%;\n padding: 10px;\n margin: auto;\n}\n#flat-list {\n float: left;\n}\n#group-list {\n float: right;\n}\n#flat-list h4, #group-list h4 {\n padding-left: 15px;\n}\n.e-listview .e-list-icon {\n height: 24px;\n width: 30px;\n}\n#listview {\n max-width: 500px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n}\n.folder {\n background-repeat: no-repeat;\n background-image: url('http://ej2.syncfusion.com/demos/src/listview/images/file_icons.png');\n background-position: -5px -465px;\n background-size: 302%;\n}\n\n.file {\n background-repeat: no-repeat;\n background-image: url('http://ej2.syncfusion.com/demos/src/listview/images/file_icons.png');\n background-position: -5px -151px;\n background-size: 302%;\n}\n@media (max-width: 590px) {\n #flat-list, #group-list {\n width: 100%;\n }\n}","index.html":"<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

‎src/listview/nested-list.component.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Component, Inject, ViewEncapsulation } from '@angular/core';
2+
3+
/**
4+
* Nested ListView component
5+
*/
6+
@Component({
7+
selector: 'control-content',
8+
templateUrl: 'nested-list.html',
9+
styleUrls: ['listview.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class NestedListViewComponent {
13+
14+
public data: { [key: string]: Object }[] = [
15+
{
16+
id: '01', text: 'Music', icon: 'folder',
17+
child: [
18+
{ id: '01-01', text: 'Gouttes.mp3', icon: 'file' }
19+
]
20+
},
21+
{
22+
id: '02', text: 'Videos', icon: 'folder',
23+
child: [
24+
{ id: '02-01', text: 'Naturals.mp4', icon: 'file' },
25+
{ id: '02-02', text: 'Wild.mpeg', icon: 'file' },
26+
]
27+
},
28+
{
29+
id: '03', text: 'Documents', icon: 'folder',
30+
child: [
31+
{ id: '03-01', text: 'Environment Pollution.docx', icon: 'file' },
32+
{ id: '03-02', text: 'Global Water, Sanitation, & Hygiene.docx', icon: 'file' },
33+
{ id: '03-03', text: 'Global Warming.ppt', icon: 'file' },
34+
{ id: '03-04', text: 'Social Network.pdf', icon: 'file' },
35+
{ id: '03-05', text: 'Youth Empowerment.pdf', icon: 'file' },
36+
]
37+
},
38+
{
39+
id: '04', text: 'Pictures', icon: 'folder',
40+
child: [
41+
{
42+
id: '04-01', text: 'Camera Roll', icon: 'folder',
43+
child: [
44+
{ id: '04-01-01', text: 'WIN_20160726_094117.JPG', icon: 'file' },
45+
{ id: '04-01-02', text: 'WIN_20160726_094118.JPG', icon: 'file' },
46+
{ id: '04-01-03', text: 'WIN_20160726_094119.JPG', icon: 'file' }
47+
]
48+
},
49+
{
50+
id: '04-02', text: 'Wind.jpg', icon: 'file'
51+
},
52+
{
53+
id: '04-02', text: 'Stone.jpg', icon: 'file'
54+
},
55+
{
56+
id: '04-02', text: 'Home.jpg', icon: 'file'
57+
},
58+
{
59+
id: '04-02', text: 'Bridge.png', icon: 'file'
60+
}
61+
]
62+
},
63+
{
64+
id: '05', text: 'Downloads', icon: 'folder',
65+
child: [
66+
{ id: '05-01', text: 'UI-Guide.pdf', icon: 'file' },
67+
{ id: '05-02', text: 'Tutorials.zip', icon: 'file' },
68+
{ id: '05-03', text: 'Game.exe', icon: 'file' },
69+
{ id: '05-04', text: 'TypeScript.7z', icon: 'file' },
70+
]
71+
},
72+
];
73+
74+
public fields: { [key: string]: string } = {
75+
iconCss: 'icon', tooltip: 'text'
76+
};
77+
78+
public headerTitle: string = 'Folders';
79+
80+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
81+
sourceFiles.files = ['listview.css'];
82+
}
83+
84+
}

‎src/listview/nested-list.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="control-section">
2+
<ej-listview id='listview' [dataSource]='data' [fields]='fields' [headerTitle]='headerTitle' [showIcon]='true' [showHeader]='true'></ej-listview>
3+
</div>

0 commit comments

Comments
 (0)