virtualization-plnkr.json

{"index.css":"\r\n    /* ListView position alignment */\r\n\r\n    #ui-list.e-listview {\r\n        margin: auto;\r\n        max-width: 325px;\r\n        line-height: initial;\r\n        border: 1px solid lightgray;\r\n    }\r\n\r\n    /* ListView header alignment */\r\n\r\n    #ui-list.e-listview .e-list-header {\r\n        height: 50px\r\n    }\r\n\r\n    #ui-list.e-listview .e-list-header .e-text {\r\n        line-height: 18px\r\n    }\r\n\r\n    /* ListView template customization */\r\n\r\n    #ui-list.e-listview .showUI {\r\n        display: flex;\r\n    }\r\n\r\n    #ui-list.e-listview .hideUI {\r\n        display: none;\r\n    }\r\n\r\n    #ui-list.e-listview .e-list-item {\r\n        padding: 3px 0;\r\n    }\r\n\r\n    #ui-list.e-listview .R {\r\n        background: lightgrey;\r\n    }\r\n\r\n    #ui-list.e-listview .M {\r\n        background: pink;\r\n    }\r\n\r\n    #ui-list.e-listview .A {\r\n        background: lightgreen;\r\n    }\r\n\r\n    #ui-list.e-listview .S {\r\n        background: lightskyblue;\r\n    }\r\n\r\n    #ui-list.e-listview .J {\r\n        background: orange;\r\n    }\r\n\r\n    #ui-list.e-listview .N {\r\n        background: lightblue;\r\n    }\r\n\r\n    /* ListView theme customization */\r\n\r\n    .highcontrast #ui-list.e-listview .e-list-item,\r\n    .highcontrast #ui-list.e-listview .e-list-header {\r\n        background: rgb(0, 0, 0);\r\n    }\r\n\r\n    .highcontrast #ui-list.e-listview .e-list-item.e-active {\r\n        background: #ffd939;\r\n        color: #000000;\r\n    }\r\n","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n    render() {\r\n        return (\r\n            <div className='property-panel-section'>\r\n                <div className=\"property-panel-header\">\r\n                    {this.props.title}\r\n                </div>\r\n                <div className=\"property-panel-content\">\r\n                    {this.props.children}\r\n                </div>\r\n            </div>\r\n\r\n        )\r\n    }\r\n}\r\n","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Listview · UiVirtualization · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/listview\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/listview/default.html\"><span>Listview</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">UiVirtualization</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                <p>This sample demonstrates the <code>ListView</code> component with the virtual scrolling feature. Scroll the list content to experience the list items dynamic rendering and load more data into listview using dropdownlist.</p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                <p>UI virtualization is an optimization technique to avoid unnecessarily constructing and rendering objects for list items by loading only visible list items in a view port. This helps improve list view performance when loading a large number of items. The list items are updated dynamically while users scroll the list. The virtualization can be enabled by using <a href=\"https://ej2.syncfusion.com/react/documentation/list-view/api-listViewComponent.html#enablevirtualization\">enablevirtualization</a> API in Listview.</p>\n                \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * ListView Virtualization Sample\r\n */\r\n\r\nimport * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { ListViewComponent, ListView, Inject, Virtualization } from '@syncfusion/ej2-react-lists';\r\nimport { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';\r\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nimport { PropertyPane } from './property-pane';\r\nimport { SampleBase } from './sample-base';\r\n\r\n\r\nexport class UiVirtualization extends SampleBase<{}, {}> {\r\n\r\n    public listviewInstance: ListView;\r\n    public commonData: { [key: string]: string | object }[] = [];\r\n    public dataSource: { [key: string]: { [key: string]: string | object }[] } = {};\r\n    public startTime: Date;\r\n    public endTime: Date;\r\n    public liElement: HTMLElement;\r\n\r\n    constructor() {\r\n        super();\r\n        this.commonData = [\r\n            { name: 'Nancy', icon: 'N', id: '0', },\r\n            { name: 'Andrew', icon: 'A', id: '1' },\r\n            { name: 'Janet', icon: 'J', id: '2' },\r\n            { name: 'Margaret', imgUrl: 'http://ej2.syncfusion.com/react/demos/src/listview/images/margaret.png', id: '3' },\r\n            { name: 'Steven', icon: 'S', id: '4' },\r\n            { name: 'Laura', imgUrl: 'http://ej2.syncfusion.com/react/demos/src/listview/images/laura.png', id: '5' },\r\n            { name: 'Robert', icon: 'R', id: '6' },\r\n            { name: 'Michael', icon: 'M', id: '7' },\r\n            { name: 'Albert', imgUrl: 'http://ej2.syncfusion.com/react/demos/src/listview/images/albert.png', id: '8' },\r\n            { name: 'Nolan', icon: 'N', id: '9' }\r\n        ];\r\n\r\n        [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach((ds: string[] | number[]) => {\r\n            let data: { [key: string]: string | object }[] = this.commonData.slice();\r\n            let index: number;\r\n            let spyIndex: number;\r\n            for (let i: number = 10; i <= ds[0]; i++) {\r\n                while (index === spyIndex) {\r\n                    index = parseInt((Math.random() * 10).toString(), 10);\r\n                }\r\n                data.push({ name: data[index].name, icon: data[index].icon, imgUrl: data[index].imgUrl, id: i.toString() });\r\n                spyIndex = index;\r\n            }\r\n            this.dataSource[ds[1]] = data;\r\n        });\r\n    }\r\n\r\n    public template: string = '<div class=\"e-list-wrapper e-list-avatar\">' +\r\n    '<span class=\"e-avatar e-avatar-circle ${icon} ${$imgUrl ? \\'hideUI\\' : \\'showUI\\' }\">' +\r\n    '${icon}</span> <img class=\"e-avatar e-avatar-circle ${$imgUrl ? \\'showUI\\' : \\'hideUI\\' }\" ' +\r\n    'src=\"${$imgUrl ?  $imgUrl : \\' \\' }\" />' +\r\n    '<span class=\"e-list-content\">${name}</span></div>';\r\n\r\n    public ddlDatasource = [\r\n        { value: '1', text: '1k' },\r\n        { value: '5', text: '5k' },\r\n        { value: '10', text: '10k' },\r\n        { value: '25', text: '25k' }\r\n    ];\r\n    public ddlFields: Object = { text: 'text', value: 'value' };\r\n\r\n    public fields: Object = { text: 'name' };\r\n\r\n    public onActionComplete() {\r\n        this.liElement = document.getElementById('ui-list');\r\n        if (Browser.isDevice) {\r\n            this.liElement.classList.add('ui-mobile');\r\n        }\r\n        createSpinner({\r\n            target: this.liElement\r\n        });\r\n        this.endTime = new Date();\r\n        document.getElementById('time').innerText = (this.endTime.getTime() - this.startTime.getTime()) + ' ms';\r\n    }\r\n\r\n    public onActionBegin() {\r\n        this.startTime = new Date();\r\n    }\r\n\r\n    public onChange(e: ChangeEventArgs) {\r\n        showSpinner(this.liElement);\r\n        this.startTime = new Date();\r\n        this.listviewInstance.dataSource = this.dataSource['data' + e.value];\r\n        this.listviewInstance.dataBind();\r\n        this.endTime = new Date();\r\n        document.getElementById('time').innerText = (this.endTime.getTime() - this.startTime.getTime()) + ' ms';\r\n        hideSpinner(this.liElement);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className='control-pane'>\r\n                <div className='ui-control-section control-section'>\r\n                    <div className='col-lg-8'>\r\n                        <div className=\"content-wrapper\" >\r\n                            <ListViewComponent id='ui-list' dataSource={this.dataSource.data1} enableVirtualization={true} headerTitle=\"Contacts\" fields={this.fields} cssClass=\"e-list-template\"\r\n                                height={500} template={this.template} actionComplete={this.onActionComplete.bind(this)} ref={(listview) => { this.listviewInstance = listview }} actionBegin={this.onActionBegin.bind(this)} showHeader={true} >\r\n                                <Inject services={[Virtualization]} />\r\n                            </ListViewComponent>\r\n                        </div>\r\n                    </div>\r\n                    <div id=\"#slider_event\" className='col-lg-4 property-section'>\r\n                        <PropertyPane title='Properties'>\r\n                            <table id=\"Properties\" title=\"Tooltip\" className='property-panel-table' style={{ width: '100%' }}>\r\n                                <tbody>\r\n                                    <tr>\r\n                                        <td style={{ width: '50%' }}>\r\n                                            <div className=\"userselect\">Load data</div>\r\n                                        </td>\r\n                                        <td style={{ width: '50%', paddingRight: '10px' }} >\r\n                                            <div>\r\n                                                <DropDownListComponent id='ddl' dataSource={this.ddlDatasource} fields={this.ddlFields} index={0} change={this.onChange.bind(this)} placeholder=\"Select a range\"\r\n                                                    popupHeight=\"200px\" />\r\n                                            </div>\r\n                                        </td>\r\n                                    </tr>\r\n                                    <tr>\r\n                                        <td style={{ width: '50%' }}>\r\n                                            <div className=\"userselect\">Time taken</div>\r\n                                        </td>\r\n                                        <td style={{ width: '50%', paddingRight: '10px' }}>\r\n                                            <div style={{ paddingLeft: '10px', paddingTop: '0px' }}>\r\n                                                <span id=\"time\">0 ms</span>\r\n                                            </div>\r\n                                        </td>\r\n                                    </tr>\r\n                                </tbody>\r\n                            </table>\r\n                        </PropertyPane>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\nReactDOM.render(<UiVirtualization />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}