Skip to content

Commit 9c5e7fd

Browse files
author
pipeline
committed
bug(EJ2-3928): Fixed rtl sample issue
1 parent 5799fd6 commit 9c5e7fd

File tree

2 files changed

+12
-12
lines changed

2 files changed

+12
-12
lines changed

‎src/listview/rtl-plnkr.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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 { RTLListViewComponent } from './rtl.component';\n\n\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: [RTLListViewComponent],\nbootstrap: [RTLListViewComponent]\n})\nexport class AppModule { }","rtl.component":"import { Component, Inject } from '@angular/core';\n\n/**\n * \n */\n@Component({\n selector: 'control-content',\n templateUrl: 'rtl.html',\n styleUrls:['listview.css']\n})\nexport class RTLListViewComponent {\n\n public rtl: Boolean = true;\n\n public data: Object[] = [\n { text: 'الجیریا' },\n { text: 'ارمینیا' },\n { text: 'بنگلا دیش' },\n { text: 'کیوبا' },\n { text: 'فن لینڈ' },\n { text: 'بھارت' },\n { text: 'مصر' },\n { text: 'ڈنمارک' },\n { text: 'ملائیشیا' },\n { text: 'نیوزی لینڈ' },\n { text: 'ناروے' }\n ];\n \n public headerTitle: string = 'اسم الدولة';\n \n \n}","rtl.html":"<div class=\"control-section\">\n <ej-listview id='sample-list' [dataSource]='data' [enableRtl]='rtl' [headerTitle]='headerTitle' [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';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
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 { RTLListViewComponent } from './rtl.component';\n\n\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: [RTLListViewComponent],\nbootstrap: [RTLListViewComponent]\n})\nexport class AppModule { }","rtl.component":"import { Component, Inject } from '@angular/core';\n\n/**\n * \n */\n@Component({\n selector: 'control-content',\n templateUrl: 'rtl.html',\n styleUrls:['listview.css']\n})\nexport class RTLListViewComponent {\n\n public rtl: Boolean = true;\n\n public data: Object[] = [\n { text: 'الجیریا', id: 'list-01' },\n { text: 'ارمینیا', id: 'list-02' },\n { text: 'بنگلا دیش', id: 'list-03' },\n { text: 'کیوبا', id: 'list-04' },\n { text: 'فن لینڈ', id: 'list-05' },\n { text: 'بھارت', id: 'list-06' },\n { text: 'مصر', id: 'list-07' },\n { text: 'ڈنمارک', id: 'list-08' },\n { text: 'ملائیشیا', id: 'list-09' },\n { text: 'نیوزی لینڈ', id: 'list-10' },\n { text: 'ناروے', id: 'list-11' }\n ];\n \n public headerTitle: string = 'اسم الدولة';\n \n \n}","rtl.html":"<div class=\"control-section\">\n <ej-listview id='sample-list' [dataSource]='data' [enableRtl]='rtl' [headerTitle]='headerTitle' [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';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

‎src/listview/rtl.component.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ export class RTLListViewComponent {
1313
public rtl: Boolean = true;
1414

1515
public data: Object[] = [
16-
{ text: 'الجیریا' },
17-
{ text: 'ارمینیا' },
18-
{ text: 'بنگلا دیش' },
19-
{ text: 'کیوبا' },
20-
{ text: 'فن لینڈ' },
21-
{ text: 'بھارت' },
22-
{ text: 'مصر' },
23-
{ text: 'ڈنمارک' },
24-
{ text: 'ملائیشیا' },
25-
{ text: 'نیوزی لینڈ' },
26-
{ text: 'ناروے' }
16+
{ text: 'الجیریا', id: 'list-01' },
17+
{ text: 'ارمینیا', id: 'list-02' },
18+
{ text: 'بنگلا دیش', id: 'list-03' },
19+
{ text: 'کیوبا', id: 'list-04' },
20+
{ text: 'فن لینڈ', id: 'list-05' },
21+
{ text: 'بھارت', id: 'list-06' },
22+
{ text: 'مصر', id: 'list-07' },
23+
{ text: 'ڈنمارک', id: 'list-08' },
24+
{ text: 'ملائیشیا', id: 'list-09' },
25+
{ text: 'نیوزی لینڈ', id: 'list-10' },
26+
{ text: 'ناروے', id: 'list-11' }
2727
];
2828

2929
public headerTitle: string = 'اسم الدولة';

0 commit comments

Comments
 (0)