feature(EJ2-4939): spinner component integarted to grid.

Author: pipeline

src/grid/hierarchy-plnkr.json

@@ -1,33 +1,3 @@
-<style>
-    .waitingpopup {
-        position: absolute;  
-        top: 0;
-        left: 0;
-        background-color: #fff;
-        border-radius: 50%;
-        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);
-        width: 50px;
-        height: 50px;
-    }
-    
-    .image {
-        position: absolute;
-        background-repeat: no-repeat;
-        background-image: url('src/grid/images/Medium-36px-spin.gif');
-        background-position: center;
-        width: 50px;
-        height: 50px;
-        padding: 6px;
-    }
-
-    #popup {
-        position: absolute;
-        background-color: transparent;
-        z-index: 100;               
-    }
-
-</style>
 <div class="control-section">
     <div class="content-wrapper">
         <div id="Grid"></div>
@@ -44,7 +14,7 @@
     </p>
     <p>
        In this demo, Three level hierarchy is demonstrated with hierarchical structure Employee -> Orders -> Customers. 
-       Also, we have shown waiting popup when loading detail Grid using <code><a target="_blank" class="code"
+       Also, we have shown spinner when loading detail Grid using <code><a target="_blank" class="code"
         href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#detaildatabound-emittypedetaildataboundeventargs">
         detailDataBound</a></code> event. This event triggers at initial expand. 
     </p>    

src/grid/hierarchy.html

@@ -1,6 +1,5 @@
-import { Grid, Page, Selection, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
+import { Grid, Page, Selection, DetailRow } from '@syncfusion/ej2-grids';
 import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
-import { EmitType } from '@syncfusion/ej2-base';
 import { employeeData } from './datasource';
 
 Grid.Inject(Page, Selection, DetailRow);
@@ -19,39 +18,6 @@ this.default = (): void => {
         crossDomain: true
     });
 
-    let popup: HTMLElement = document.createElement('div');
-    popup.id = 'popup';
-    let div: HTMLElement = document.createElement('div');
-    div.id = 'waitingpopup';
-    div.classList.add('waitingpopup');
-    let span: HTMLElement = document.createElement('span');
-    span.classList.add('image');
-    div.appendChild(span);
-    popup.appendChild(div);
-    document.getElementById('Grid').appendChild(popup);
-
-    function show(args: DetailDataBoundEventArgs): void {
-        div = document.getElementById('waitingpopup') || div;
-        popup = document.getElementById('popup') || popup;
-        let element: HTMLElement = <HTMLElement>args.detailElement || this.element;
-        if (!element.querySelector('#popup')) {
-            element.firstElementChild.appendChild(popup);
-        }
-        let width: number = element.offsetWidth;
-        let height: number = element.offsetHeight;
-        popup.style.width = width + 'px';
-        popup.style.height = height + 'px';
-        popup.style.top = '0px';
-        popup.style.left = '0px';
-        div.style.top = (element.offsetHeight / 2 - 25) + 'px';
-        div.style.left = (element.offsetWidth / 2 - 25) + 'px';
-        popup.style.display = '';
-    }
-
-    let hide: EmitType<Object> = () => {
-        popup.style.display = 'none';
-    };
-
     let grid: Grid = new Grid({
         dataSource: employeeData,
         allowSorting: true,
@@ -62,17 +28,10 @@ this.default = (): void => {
             { field: 'City', headerText: 'City', width: 110 },
             { field: 'Country', headerText: 'Country', width: 110 }
         ],
-        detailDataBound: show,
-        dataBound: hide,
-        created: hide,
         childGrid: {
             dataSource: dataManger,
             queryString: 'EmployeeID',
             allowPaging: true,
-            detailDataBound: show,
-            dataBound: hide,
-            actionBegin: show,
-            actionComplete: hide,
             columns: [
                 { field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 120 },
                 { field: 'ShipCity', headerText: 'Ship City', width: 120 },
@@ -82,8 +41,6 @@ this.default = (): void => {
             childGrid: {
                 dataSource: dataManger2,
                 queryString: 'CustomerID',
-                detailDataBound: show,
-                dataBound: hide,
                 columns: [
                     { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'right', width: 75 },
                     { field: 'Phone', headerText: 'Phone', width: 100 },

src/grid/hierarchy.ts

@@ -1 +1 @@
-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Grid, Page, Selection } from '@syncfusion/ej2-grids';\nimport { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\n\nGrid.Inject(Page, Selection);\n\n/**\n * RemoteData sample\n */\n\n    let data: Object = new DataManager({\n        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',\n        adaptor: new ODataV4Adaptor,\n        crossDomain: true\n    });\n    let grid: Grid = new Grid(\n        {\n            dataSource: data,\n            allowPaging: true,\n            actionBegin: show,\n            actionComplete: hide,\n            created: show,\n            dataBound: hide,\n            columns: [\n                { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'right' },\n                { field: 'ProductName', headerText: 'Product Name', width: 170 },\n                { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'right', format: 'C2', },\n                { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'right' },\n                {\n                    field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'center', type: 'boolean',\n                    displayAsCheckBox: true\n                },\n            ],\n            pageSettings: { pageCount: 5 }\n        });\n    grid.appendTo('#Grid');\n    function show(): void {\n        let div: HTMLElement = document.getElementById('waitingpopup');\n        let popup: HTMLElement = document.getElementById('popup');\n        let width: number = grid.element.offsetWidth;\n        let height: number = grid.element.offsetHeight;\n        popup.style.width = width + 'px';\n        popup.style.height = height + 'px';\n        div.style.top = (height / 2 - 25) + 'px';\n        div.style.left = (width / 2 - 25) + 'px';\n        popup.style.display = '';\n    }\n    function hide(): void {\n        let popup: HTMLElement = document.getElementById('popup') as HTMLElement;\n        popup.style.display = 'none';\n    }\n\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\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<body>\n<style>\n    .waitingpopup {\n        position: absolute;\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    }\n    \n    #popup {\n        position: absolute;\n        background-color: transparent;\n        z-index: 100;\n    }\n</style>\n<div class=\"control-section\">\n    <div class=\"content-wrapper\">\n        <div id=\"Grid\">\n            <div id=\"popup\">\n                <div id=\"waitingpopup\" class=\"waitingpopup\">\n                    <span id=\"gif\" class=\"image\"></span>\n                </div>\n            </div>\n        </div>\n    </div>\n    \n\n</div></body></html>","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    },\n    map: {\n        main: \"index.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-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.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-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.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-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Grid, Page, Selection } from '@syncfusion/ej2-grids';\nimport { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\n\nGrid.Inject(Page, Selection);\n\n/**\n * RemoteData sample\n */\n\n    let data: Object = new DataManager({\n        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',\n        adaptor: new ODataV4Adaptor,\n        crossDomain: true\n    });\n    let grid: Grid = new Grid(\n        {\n            dataSource: data,\n            allowPaging: true,\n            columns: [\n                { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'right' },\n                { field: 'ProductName', headerText: 'Product Name', width: 170 },\n                { field: 'UnitPrice', headerText: 'Unit Price', width: 135, textAlign: 'right', format: 'C2', },\n                { field: 'UnitsInStock', headerText: 'Units In Stock', width: 160, textAlign: 'right' },\n                {\n                    field: 'Discontinued', headerText: 'Discontinued', width: 150, textAlign: 'center', type: 'boolean',\n                    displayAsCheckBox: true\n                },\n            ],\n            pageSettings: { pageCount: 5 }\n        });\n    grid.appendTo('#Grid');\n\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\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<body>\n<div class=\"control-section\">\n    <div class=\"content-wrapper\">\n        <div id=\"Grid\">\n        </div>\n    </div>\n    \n\n</div></body></html>","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    },\n    map: {\n        main: \"index.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-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.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-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.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-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

src/grid/remotedata-plnkr.json

@@ -1,39 +1,6 @@
-<style>
-    .waitingpopup {
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: #fff;
-        border-radius: 50%;
-        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);
-        width: 50px;
-        height: 50px;
-    }
-    
-    .image {
-        position: absolute;
-        background-repeat: no-repeat;
-        background-image: url('src/grid/images/Medium-36px-spin.gif');
-        background-position: center;
-        width: 50px;
-        height: 50px;
-        padding: 6px;
-    }
-    
-    #popup {
-        position: absolute;
-        background-color: transparent;
-        z-index: 100;
-    }
-</style>
 <div class="control-section">
     <div class="content-wrapper">
         <div id="Grid">
-            <div id="popup">
-                <div id="waitingpopup" class="waitingpopup">
-                    <span id="gif" class="image"></span>
-                </div>
-            </div>
         </div>
     </div>
     <div id="description">

src/grid/remotedata.html

@@ -16,10 +16,6 @@ this.default = (): void => {
         {
             dataSource: data,
             allowPaging: true,
-            actionBegin: show,
-            actionComplete: hide,
-            created: show,
-            dataBound: hide,
             columns: [
                 { field: 'ProductID', headerText: 'Product ID', width: 130, textAlign: 'right' },
                 { field: 'ProductName', headerText: 'Product Name', width: 170 },
@@ -33,20 +29,5 @@ this.default = (): void => {
             pageSettings: { pageCount: 5 }
         });
     grid.appendTo('#Grid');
-    function show(): void {
-        let div: HTMLElement = document.getElementById('waitingpopup');
-        let popup: HTMLElement = document.getElementById('popup');
-        let width: number = grid.element.offsetWidth;
-        let height: number = grid.element.offsetHeight;
-        popup.style.width = width + 'px';
-        popup.style.height = height + 'px';
-        div.style.top = (height / 2 - 25) + 'px';
-        div.style.left = (width / 2 - 25) + 'px';
-        popup.style.display = '';
-    }
-    function hide(): void {
-        let popup: HTMLElement = document.getElementById('popup') as HTMLElement;
-        popup.style.display = 'none';
-    }
 };