feature(EJ2-4688): Spinner integrated to grid component.

Author: pipeline

src/grid/multiple-exporting-plnkr.json

@@ -1,7 +1,7 @@
 <div class="control-section">
     <div>
         <p><b>First Grid</b></p>
-        <ej-grid #firstgrid [dataSource]='firstGridData' allowPaging='true' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'
+        <ej-grid #firstgrid [dataSource]='firstGridData' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'
             [allowExcelExport]='true' [allowPdfExport]='true'>
             <e-columns>
                 <e-column field='OrderID' headerText='Order ID' width='120' textAlign="right" isPrimaryKey='true'></e-column>
@@ -15,7 +15,7 @@
     <br/>
     <div>
         <p><b>Second Grid</b></p>
-        <ej-grid #secondgrid [dataSource]='secondGridData' allowPaging='true' [allowExcelExport]='true' [allowPdfExport]='true'>
+        <ej-grid #secondgrid [dataSource]='secondGridData' [allowExcelExport]='true' [allowPdfExport]='true'>
             <e-columns>
                 <e-column field='EmployeeID' headerText='Employee ID' width='120' isPrimaryKey='true'></e-column>
                 <e-column field='FirstName' headerText='First Name' width='120'></e-column>

src/grid/multiple-exporting.html

@@ -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 { DataBindingComponent } from './remotedata.component';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { HttpModule } from '@angular/http';\nimport { GridAllModule } from '@syncfusion/ej2-ng-grids';\nimport { ToolbarModule } from '@syncfusion/ej2-ng-navigations';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [CommonModule, HttpModule, ToolbarModule, GridAllModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DataBindingComponent],\nbootstrap: [DataBindingComponent]\n})\nexport class AppModule { }","remotedata.component":"import { Component, OnInit, ViewChild } from '@angular/core';\nimport { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { GridComponent } from '@syncfusion/ej2-ng-grids';\n\nconst SERVICE_URI: string = 'http://services.odata.org/V4/Northwind/Northwind.svc/Products';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'remotedata.html',\n    styleUrls: ['remotedata.style.css']\n})\nexport class DataBindingComponent implements OnInit {\n    public data: DataManager;\n\n    @ViewChild('grid')\n    public grid: GridComponent;\n\n    ngOnInit(): void {\n        this.data = new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor });\n    }\n\n    public show(): void {\n        let div: HTMLElement = document.getElementById('waitingpopup');\n        let width: number = this.grid.element.offsetWidth;\n        let height: number = this.grid.element.offsetHeight;\n        div.style.top = (height / 2 - 25) + 'px';\n        div.style.left = (width / 2 - 25) + 'px';\n        if (!this.grid.element.querySelector('#waitingpopup')) {\n            this.grid.element.appendChild(div);\n        }\n        (<HTMLElement>div).style.display = '';\n    }\n    public hide(): void {\n        let div: HTMLElement = document.getElementById('waitingpopup') as HTMLElement;\n        div.style.display = 'none';\n    }\n}","remotedata.html":"<div class=\"control-section\">\n    <ej-grid #grid [dataSource]='data' allowPaging='true' (actionBegin)='show()' (actionComplete)='hide()' (created)='show()' (dataBound)='hide()'>\n        <e-columns>\n            <e-column field='ProductID' headerText='ID' width='120' textAlign=\"right\"></e-column>\n            <e-column field='ProductName' headerText='Name' width='160'></e-column>\n            <e-column field='UnitPrice' headerText='Unit Price' format=\"C1\" width='120' textAlign=\"right\"></e-column>\n            <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign=\"right\"></e-column>\n            <e-column field='Discontinued' headerText='Discontinued' width='150' displayAsCheckBox=\"true\" ></e-column>\n        </e-columns>\n    </ej-grid>\n\n    <div id='waitingpopup' class='waitingpopup' style=\"display: none\">\n        <span id='gif' class='image'></span>\n    </div>\n\n</div>","remotedata.style.css":"    .waitingpopup {\n        position: absolute;\n        z-index: 100;       \n        top: 0;\n        left: 0;\n        background-color: #fff;\n        border-radius: 50%;\n        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n        width: 50px;\n        height: 50px;\n    }\n    \n    .image {\n        position: absolute;\n        background-repeat: no-repeat;\n        background-image: url('src/grid/images/Medium-36px-spin.gif');\n        background-position: center;\n        width: 50px;\n        height: 50px;\n        padding: 6px;\n    }","index.html":"<!DOCTYPE html>\n<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        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.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);"}
+{"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 { DataBindingComponent } from './remotedata.component';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { HttpModule } from '@angular/http';\nimport { GridAllModule } from '@syncfusion/ej2-ng-grids';\nimport { ToolbarModule } from '@syncfusion/ej2-ng-navigations';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [CommonModule, HttpModule, ToolbarModule, GridAllModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DataBindingComponent],\nbootstrap: [DataBindingComponent]\n})\nexport class AppModule { }","remotedata.component":"import { Component, OnInit, ViewChild } from '@angular/core';\nimport { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { GridComponent } from '@syncfusion/ej2-ng-grids';\n\nconst SERVICE_URI: string = 'http://services.odata.org/V4/Northwind/Northwind.svc/Products';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'remotedata.html'\n})\nexport class DataBindingComponent implements OnInit {\n    public data: DataManager;\n\n    @ViewChild('grid')\n    public grid: GridComponent;\n\n    ngOnInit(): void {\n        this.data = new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor });\n    }\n}","remotedata.html":"<div class=\"control-section\">\n    <ej-grid #grid [dataSource]='data' allowPaging='true'>\n        <e-columns>\n            <e-column field='ProductID' headerText='ID' width='120' textAlign=\"right\"></e-column>\n            <e-column field='ProductName' headerText='Name' width='160'></e-column>\n            <e-column field='UnitPrice' headerText='Unit Price' format=\"C1\" width='120' textAlign=\"right\"></e-column>\n            <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign=\"right\"></e-column>\n            <e-column field='Discontinued' headerText='Discontinued' width='150' displayAsCheckBox=\"true\" ></e-column>\n        </e-columns>\n    </ej-grid>\n\n</div>","index.html":"<!DOCTYPE html>\n<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        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.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);"}