{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-virtual-scrolling",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Grid",
  "variant": "virtual-scrolling",
  "dependencies": [
    "@syncfusion/ej2-grids"
  ],
  "description": "Data grid with virtual scrolling for large orders plus rating templates and status indicators.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/grid-virtual-scrolling.md"
  },
  "files": [
    {
      "target": "src/components/grid-virtual-scrolling/virtual-scrolling.html",
      "content": "<script type=\"text/x-template\" id=\"paymentTemplate\">\n    ${paymentTemplate(data)}\n</script>\n<template>\n    <input class=\"rating\">\n</template>\n<script type=\"text/x-jsrender\" id=\"ratingTemplate\">\n    ${ratingDetail(data)}\n</script>\n<script type=\"text/x-jsrender\" id=\"priorityTemplate\">\n    ${priorityDetail(data)}\n</script>\n<script type=\"text/x-jsrender\" id=\"paymentStatusTemplate\">\n    ${paymentStatusDetail(data)}\n</script>\n<script type=\"text/x-jsrender\" id=\"orderStatusTemplate\">\n    ${orderStatusDetail(data)}\n</script>\n<script type=\"text/x-jsrender\" id=\"stockStatusTemplate\">\n    ${stockStatusDetail(data)}\n</script>\n<script type=\"text/x-jsrender\" id=\"stockLevelTemplate\">\n    ${stockLevelDetail(data)}\n</script>\n<!-- custom code start -->\n<style>\n    .custom-rating.e-rating-container .e-rating-item-container,\n    .e-bigger .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon,\n    .e-bigger.custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {\n        font-size: 11px;\n    }\n\n    .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {\n        -webkit-text-fill-color: lightgrey;\n        -webkit-text-stroke: 1px lightgrey;\n    }\n\n    .custom-rating.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon {\n        background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        -webkit-text-stroke: 1px #ffa600;\n    }\n\n    .virtual-statustemp {\n        position: relative;\n        padding: 15px 0;\n        border-radius: 5px;\n        text-align: center\n    }\n\n    .virtual-statustemp.e-highcolor {\n        background-color: #f8d7da;\n    }\n\n    .virtual-statustemp.e-lowcolor {\n        background-color: #d4edda;\n    }\n\n    .virtual-statustemp.e-mediumcolor {\n        background-color: #fff3cd;\n    }\n\n    .virtual-statustemp.e-criticalcolor {\n        background-color: #efacac;\n    }\n\n    td.e-rowcell .virtual-statustxt.e-highcolor {\n        color: #b21f2d;\n    }\n\n    td.e-rowcell .virtual-statustxt.e-lowcolor {\n        color: #155724;\n    }\n\n    td.e-rowcell .virtual-statustxt.e-mediumcolor {\n        color: #856404;\n    }\n\n    td.e-rowcell .virtual-statustxt.e-criticalcolor {\n        color: darkred;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-highcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-highcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-highcolor {\n        color: #FF6F61;\n    }\n\n    .material3-dark .virtual-statustemp.e-highcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-highcolor,\n    .fluent2-dark .virtual-statustemp.e-highcolor,\n    .tailwind3-dark .virtual-statustemp.e-highcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-highcolor,\n    .fluent-dark .virtual-statustemp.e-highcolor,\n    .highcontrast .virtual-statustemp.e-highcolor {\n        background-color: #3E1F1F;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-lowcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-lowcolor {\n        color: #81C784;\n    }\n\n    .material3-dark .virtual-statustemp.e-lowcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-lowcolor,\n    .fluent2-dark .virtual-statustemp.e-lowcolor,\n    .tailwind3-dark .virtual-statustemp.e-lowcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-lowcolor,\n    .fluent-dark .virtual-statustemp.e-lowcolor,\n    .highcontrast .virtual-statustemp.e-lowcolor {\n        background-color: #1F3A2E;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-mediumcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-mediumcolor {\n        color: #FFD54F;\n    }\n\n    .material3-dark .virtual-statustemp.e-mediumcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-mediumcolor,\n    .fluent2-dark .virtual-statustemp.e-mediumcolor,\n    .tailwind3-dark .virtual-statustemp.e-mediumcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-mediumcolor,\n    .fluent-dark .virtual-statustemp.e-mediumcolor,\n    .highcontrast .virtual-statustemp.e-mediumcolor {\n        background-color: #3A2E1F;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-criticalcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-criticalcolor {\n        color: #F28B82;\n    }\n\n    .material3-dark .virtual-statustemp.e-criticalcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-criticalcolor,\n    .fluent2-dark .virtual-statustemp.e-criticalcolor,\n    .tailwind3-dark .virtual-statustemp.e-criticalcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-criticalcolor,\n    .fluent-dark .virtual-statustemp.e-criticalcolor,\n    .highcontrast .virtual-statustemp.e-criticalcolor {\n        background-color: #5A1A1A;\n    }\n\n    .image {\n        position: absolute;\n        background-repeat: no-repeat;\n        background-image: url('src/grid/images/spinner.gif');\n        background-position: center;\n        width: 16px;\n        height: 28px;\n    }\n\n    .e-bigger .image {\n        height: 36px;\n    }\n\n    #popup {\n        position: absolute;\n        background-color: transparent;\n        display: none;\n        z-index: 100;\n    }\n\n    .div-button {\n        margin: 5px 5px 5px 0;\n    }\n\n    #performanceTime {\n        float: right;\n        margin-top: 3px;\n    }\n\n    .e-bigger #performanceTime {\n        margin-top: 8px;\n    }\n\n    .virtual-statustemp.e-paidcolor {\n        background-color: #e6f4ea;\n    }\n\n    .virtual-statustxt.e-paidcolor {\n        color: #155724;\n    }\n\n    .virtual-statustemp.e-pendingcolor {\n        background-color: #fff8e1;\n    }\n\n    .virtual-statustxt.e-pendingcolor {\n        color: #856404;\n    }\n\n    .virtual-statustemp.e-refundcolor {\n        background-color: #fff0f0;\n    }\n\n    .virtual-statustxt.e-refundcolor {\n        color: #b21f2d;\n    }\n\n    .virtual-statustemp.e-deliveredcolor {\n        background-color: #e6f3ea;\n    }\n\n    .virtual-statustxt.e-deliveredcolor {\n        color: #2e7d32;\n    }\n\n    .virtual-statustemp.e-shippedcolor {\n        background-color: #e7f0fb;\n    }\n\n    .virtual-statustxt.e-shippedcolor {\n        color: #1565c0;\n    }\n\n    .virtual-statustemp.e-processingcolor {\n        background-color: #fff8e6;\n    }\n\n    .virtual-statustxt.e-processingcolor {\n        color: #ff9800;\n    }\n\n    .virtual-statustemp.e-packedcolor {\n        background-color: #fff7ed;\n    }\n\n    .virtual-statustxt.e-packedcolor {\n        color: #d97706;\n    }\n\n    .virtual-statustemp.e-returnedcolor {\n        background-color: #FCE4E4;\n    }\n\n    .virtual-statustxt.e-returnedcolor {\n        color: #8B0000;\n    }\n\n    .virtual-statustemp.e-cancelcolor {\n        background-color: #f2f2f2;\n    }\n\n    .virtual-statustxt.e-cancelcolor {\n        color: #6b6b6b;\n    }\n\n    .virtual-statustemp.e-orderedcolor {\n        background-color: #E0F2F1;\n    }\n\n    .virtual-statustxt.e-orderedcolor {\n        color: #00796B;\n    }\n\n    .virtual-statustemp.e-failedcolor {\n        background-color: #f2f2f2;\n    }\n\n    .virtual-statustxt.e-failedcolor {\n        color: #6b6b6b;\n    }\n\n    .material3-dark .virtual-statustemp.e-paidcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-paidcolor,\n    .fluent2-dark .virtual-statustemp.e-paidcolor,\n    .tailwind3-dark .virtual-statustemp.e-paidcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-paidcolor,\n    .fluent-dark .virtual-statustemp.e-paidcolor,\n    .highcontrast .virtual-statustemp.e-paidcolor {\n        background-color: #133b2b;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-paidcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-paidcolor {\n        color: #81C784;\n    }\n\n    .material3-dark .virtual-statustemp.e-pendingcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-pendingcolor,\n    .fluent2-dark .virtual-statustemp.e-pendingcolor,\n    .tailwind3-dark .virtual-statustemp.e-pendingcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-pendingcolor,\n    .fluent-dark .virtual-statustemp.e-pendingcolor,\n    .highcontrast .virtual-statustemp.e-pendingcolor {\n        background-color: #3a331f;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-pendingcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-pendingcolor {\n        color: #FFD54F;\n    }\n\n    .material3-dark .virtual-statustemp.e-refundcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-refundcolor,\n    .fluent2-dark .virtual-statustemp.e-refundcolor,\n    .tailwind3-dark .virtual-statustemp.e-refundcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-refundcolor,\n    .fluent-dark .virtual-statustemp.e-refundcolor,\n    .highcontrast .virtual-statustemp.e-refundcolor {\n        background-color: #3a1f1f;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-refundcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-refundcolor {\n        color: #FF8A80;\n    }\n\n    .material3-dark .virtual-statustemp.e-deliveredcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-deliveredcolor,\n    .fluent2-dark .virtual-statustemp.e-deliveredcolor,\n    .tailwind3-dark .virtual-statustemp.e-deliveredcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-deliveredcolor,\n    .fluent-dark .virtual-statustemp.e-deliveredcolor,\n    .highcontrast .virtual-statustemp.e-deliveredcolor {\n        background-color: #173924;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-deliveredcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-deliveredcolor {\n        color: #A5D6A7;\n    }\n\n    .material3-dark .virtual-statustemp.e-shippedcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-shippedcolor,\n    .fluent2-dark .virtual-statustemp.e-shippedcolor,\n    .tailwind3-dark .virtual-statustemp.e-shippedcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-shippedcolor,\n    .fluent-dark .virtual-statustemp.e-shippedcolor,\n    .highcontrast .virtual-statustemp.e-shippedcolor {\n        background-color: #12321f;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-shippedcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-shippedcolor {\n        color: #A5D6A7;\n    }\n\n    .material3-dark .virtual-statustemp.e-processingcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-processingcolor,\n    .fluent2-dark .virtual-statustemp.e-processingcolor,\n    .tailwind3-dark .virtual-statustemp.e-processingcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-processingcolor,\n    .fluent-dark .virtual-statustemp.e-processingcolor,\n    .highcontrast .virtual-statustemp.e-processingcolor {\n        background-color: #332f1f;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {\n        color: #FFD54F;\n    }\n\n    .material3-dark .virtual-statustemp.e-cancelcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-cancelcolor,\n    .fluent2-dark .virtual-statustemp.e-cancelcolor,\n    .tailwind3-dark .virtual-statustemp.e-cancelcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-cancelcolor,\n    .fluent-dark .virtual-statustemp.e-cancelcolor,\n    .highcontrast .virtual-statustemp.e-cancelcolor {\n        background-color: #3a1a1a;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-cancelcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-cancelcolor {\n        color: #F28B82;\n    }\n\n    /* additional dark-theme overrides for new badge classes */\n    .material3-dark .virtual-statustemp.e-packedcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-packedcolor,\n    .fluent2-dark .virtual-statustemp.e-packedcolor,\n    .tailwind3-dark .virtual-statustemp.e-packedcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-packedcolor,\n    .fluent-dark .virtual-statustemp.e-packedcolor,\n    .highcontrast .virtual-statustemp.e-packedcolor {\n        background-color: #5c3a11;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-packedcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-packedcolor {\n        color: #FFD54F;\n    }\n\n    .material3-dark .virtual-statustemp.e-processingcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-processingcolor,\n    .fluent2-dark .virtual-statustemp.e-processingcolor,\n    .tailwind3-dark .virtual-statustemp.e-processingcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-processingcolor,\n    .fluent-dark .virtual-statustemp.e-processingcolor,\n    .highcontrast .virtual-statustemp.e-processingcolor {\n        background-color: #5a3a00;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-processingcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-processingcolor {\n        color: #FFD54F;\n    }\n\n    .material3-dark .virtual-statustemp.e-returnedcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-returnedcolor,\n    .fluent2-dark .virtual-statustemp.e-returnedcolor,\n    .tailwind3-dark .virtual-statustemp.e-returnedcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-returnedcolor,\n    .fluent-dark .virtual-statustemp.e-returnedcolor,\n    .highcontrast .virtual-statustemp.e-returnedcolor {\n        background-color: #3a2a28;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-returnedcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-returnedcolor {\n        color: #FFCDD2;\n    }\n\n    .material3-dark .virtual-statustemp.e-orderedcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-orderedcolor,\n    .fluent2-dark .virtual-statustemp.e-orderedcolor,\n    .tailwind3-dark .virtual-statustemp.e-orderedcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-orderedcolor,\n    .fluent-dark .virtual-statustemp.e-orderedcolor,\n    .highcontrast .virtual-statustemp.e-orderedcolor {\n        background-color: #2b2b2b;\n        border-color: #444;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-orderedcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-orderedcolor {\n        color: #ECEFF1;\n    }\n\n    .material3-dark .virtual-statustemp.e-failedcolor,\n    .bootstrap5\\.3-dark .virtual-statustemp.e-failedcolor,\n    .fluent2-dark .virtual-statustemp.e-failedcolor,\n    .tailwind3-dark .virtual-statustemp.e-failedcolor,\n    .fluent2-highcontrast .virtual-statustemp.e-failedcolor,\n    .fluent-dark .virtual-statustemp.e-failedcolor,\n    .highcontrast .virtual-statustemp.e-failedcolor {\n        background-color: #4a4a4a;\n    }\n\n    .material3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .bootstrap5\\.3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .fluent2-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .tailwind3-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .fluent2-highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .fluent-dark td.e-rowcell .virtual-statustxt.e-failedcolor,\n    .highcontrast td.e-rowcell .virtual-statustxt.e-failedcolor {\n        color: #ffffff;\n    }\n\n    td.e-rowcell .e-payment-info {\n        display: flex;\n        align-items: center;\n    }\n\n    td.e-rowcell .e-payment-info img {\n        margin-right: 5px;\n    }\n\n    .material3-dark td.e-rowcell .e-payment-info img,\n    .bootstrap5\\.3-dark td.e-rowcell .e-payment-info img,\n    .fluent2-dark td.e-rowcell .e-payment-info img,\n    .tailwind3-dark td.e-rowcell .e-payment-info img,\n    .fluent2-highcontrast td.e-rowcell .e-payment-info img,\n    .fluent-dark td.e-rowcell .e-payment-info img,\n    .highcontrast td.e-rowcell .e-payment-info img {\n        filter: brightness(0) invert(1);\n    }\n\n    .fluent2-highcontrast td.e-rowcell .e-row:hover .e-payment-info img,\n    .fluent2-highcontrast td.e-rowcell .e-rowcell.e-selectionbackground .e-payment-info img {\n        filter: none;\n    }\n</style>\n<!-- custom code end -->\n<div class=\"control-section\">\n    <div class=\"content-wrapper\">\n        <div class='div-button'>\n            <button id='genarate' class=\"e-info\"> Load 100K Data</button>\n            <span id=\"popup\">\n                <span id=\"gif\" class=\"image\"></span>\n            </span>\n            <span id=\"performanceTime\">Time Taken: 0 ms</span>\n        </div>\n        <div id=\"Grid\">\n        </div>\n    </div>\n</div>\n"
    },
    {
      "target": "src/components/grid-virtual-scrolling/virtual-scrolling.ts",
      "content": "import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { createVirtualOrderData, virtualOrderData } from '../data-source';\nimport { Rating } from '@syncfusion/ej2-inputs';\n/**\n * virtualscrolling sample\n */\nGrid.Inject(VirtualScroll, Edit, Toolbar);\n\n(window as any).default = (): void => {\n    let date1: number; let flag: boolean = true; let genarateData: Button = new Button({}, '#genarate');\n    let data: Object[] = [];\n    genarateData.element.onclick = () => {\n        if (!data.length) {\n            show(); createVirtualOrderData(); date1 = new Date().getTime(); grid.dataSource = data = virtualOrderData;\n        }\n    };\n    let grid: Grid = new Grid(\n        {\n            dataSource: [], enableVirtualization: true, enableColumnVirtualization: true, height: 400, rowHeight: 50,\n            editSettings: { allowEditing: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' },\n            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n            clipMode:'EllipsisWithTooltip',\n            columns: [\n                { field: 'OrderID', headerText: 'Order ID', width: 110, isPrimaryKey: true, validationRules: { required: true } },\n                { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right', editType: 'datepickeredit' },\n                { field: 'ShipDate', headerText: 'Ship Date', width: 140, format: 'yMd', textAlign: 'Right', editType: 'datepickeredit' },\n                { field: 'OrderStatus', headerText: 'Order Status', width: 140, textAlign: 'Center', editType: 'dropdownedit', template: '#orderStatusTemplate', validationRules: { required: true } },\n                { field: 'Priority', headerText: 'Priority', width: 110, textAlign: 'Center', editType: 'dropdownedit', template: '#priorityTemplate' },\n                { field: 'CustomerName', headerText: 'Customer Name', width: 190, validationRules: { required: true } },\n                { field: 'CustomerID', headerText: 'Customer ID', width: 110, visible: false },\n                { field: 'Email', headerText: 'Email', width: 200 },\n                { field: 'Phone', headerText: 'Phone Number', width: 140, textAlign: 'Right' },\n                { field: 'ShipAddress', headerText: 'Ship Address', width: 180 },\n                { field: 'ShipCity', headerText: 'Ship City', width: 120 },\n                { field: 'ShipState', headerText: 'Ship State Code', width: 130 },\n                { field: 'ShipPostalCode', headerText: 'Ship Postal Code', width: 130, textAlign: 'Right' },\n                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },\n                { field: 'ProductName', headerText: 'Product Name', width: 250 },\n                { field: 'ProductID', headerText: 'Product ID', width: 110, visible: false },\n                { field: 'Category', headerText: 'Category', width: 120 },\n                { field: 'Warehouse', headerText: 'Ware house', width: 110, editType: 'dropdownedit', visible: false },\n                { field: 'InventoryCount', headerText: 'Inventory Count', width: 150, textAlign: 'Right', visible: false },\n                {\n                    field: 'Quantity', headerText: 'Quantity', width: 100, textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'UnitPrice', headerText: 'Unit Price', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'Discount', headerText: 'Discount (%)', width: 120, textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'Tax', headerText: 'Tax (%)', width: 100, textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'SubTotal', headerText: 'Sub Total', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'TaxAmount', headerText: 'Tax Amount', width: 110, format: 'C2', textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'ShipFee', headerText: 'Ship Fee', width: 120, format: 'C2', textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                {\n                    field: 'TotalAmount', headerText: 'Total Amount', width: 120, format: 'C2', textAlign: 'Right', editType: 'numericedit',\n                    edit: { params: { showSpinButton: false } }\n                },\n                { field: 'PaymentMethod', headerText: 'Payment Method', width: 140, editType: 'dropdownedit', template: '#paymentTemplate', validationRules: { required: true } },\n                { field: 'PaymentStatus', headerText: 'Payment Status', width: 140, textAlign: 'Center', editType: 'dropdownedit', template: '#paymentStatusTemplate', validationRules: { required: true } },\n                {\n                    field: 'Rating', headerText: 'Delivery Rating', width: 160, textAlign: 'Center', visible: false,\n                    template: '#ratingTemplate', editType: 'dropdownedit'\n                }\n            ],\n            dataBound: hide,\n            load: function (args: any) {\n                if (grid.enableVirtualization) {\n                    args.enableSeamlessScrolling = true;\n                }\n            }\n        });\n    grid.appendTo('#Grid');\n\n    function show(): void {\n        document.getElementById('popup')!.style.display = 'inline-block';\n    }\n    function hide(): void {\n        if (flag && date1) {\n            let date2: number = new Date().getTime();\n            document.getElementById('performanceTime')!.innerHTML = 'Time Taken: ' + (date2 - date1) + 'ms';\n            grid.editSettings.allowAdding = true;\n            flag = false; genarateData.disabled = true;\n        }\n        document.getElementById('popup')!.style.display = 'none';\n    }\n    (window as { ratingDetail?: (e: any) => any }).ratingDetail = (e: any): any => {\n        const temp: HTMLTemplateElement = document.getElementsByTagName(\"template\")[0];\n        const cloneTemplate: any = temp.content.cloneNode(true);\n        const ratingElement: HTMLElement = cloneTemplate.querySelector(\".rating\");\n        const rating = new Rating({\n            value: e.Rating,\n            readOnly: true,\n            cssClass: 'custom-rating'\n        });\n        rating.appendTo(ratingElement);\n        return (ratingElement as any).ej2_instances[0].wrapper.outerHTML;\n    };\n    (window as { priorityDetail?: (e: any) => any }).priorityDetail = (e: any): any => {\n        const div: Element = document.createElement('div');\n        const span: Element = document.createElement('span');\n        if (e.Priority === 'High') {\n            span.className = 'virtual-statustxt e-highcolor';\n            span.textContent = 'High';\n            div.className = 'virtual-statustemp e-highcolor';\n        } else if (e.Priority === 'Low') {\n            span.className = 'virtual-statustxt e-lowcolor';\n            span.textContent = 'Low';\n            div.className = 'virtual-statustemp e-lowcolor';\n        } else if (e.Priority === 'Medium') {\n            span.className = 'virtual-statustxt e-mediumcolor';\n            span.textContent = 'Medium';\n            div.className = 'virtual-statustemp e-mediumcolor';\n        } else {\n            span.className = 'virtual-statustxt e-criticalcolor';\n            span.textContent = 'Critical';\n            div.className = 'virtual-statustemp e-criticalcolor';\n        }\n        div.appendChild(span);\n        return div.outerHTML;\n    };\n    (window as { paymentStatusDetail?: (e: any) => any }).paymentStatusDetail = (e: any): any => {\n        const div: Element = document.createElement('div');\n        const span: Element = document.createElement('span');\n        const val = (e.PaymentStatus || '').toString();\n        if (val === 'Paid' || val === 'Authorized') {\n            span.className = 'virtual-statustxt e-paidcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-paidcolor';\n        } else if (val === 'Pending') {\n            span.className = 'virtual-statustxt e-pendingcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-pendingcolor';\n        } else if (val === 'Refunded') {\n            span.className = 'virtual-statustxt e-refundcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-refundcolor';\n        } else {\n            span.className = 'virtual-statustxt e-failedcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-failedcolor';\n        }\n        div.appendChild(span);\n        return div.outerHTML;\n    };\n    (window as { orderStatusDetail?: (e: any) => any }).orderStatusDetail = (e: any): any => {\n        const div: Element = document.createElement('div');\n        const span: Element = document.createElement('span');\n        const val: string = (e.OrderStatus || '').toString();\n        if (val === 'Delivered') {\n            span.className = 'virtual-statustxt e-deliveredcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-deliveredcolor';\n        } else if (val === 'Shipped') {\n            span.className = 'virtual-statustxt e-shippedcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-shippedcolor';\n        } else if (val === 'Packed') {\n            span.className = 'virtual-statustxt e-packedcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-packedcolor';\n        } else if (val === 'Processing') {\n            span.className = 'virtual-statustxt e-processingcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-processingcolor';\n        } else if (val === 'Canceled') {\n            span.className = 'virtual-statustxt e-cancelcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-cancelcolor';\n        } else if (val === 'Returned') {\n            span.className = 'virtual-statustxt e-returnedcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-returnedcolor';\n        } else {\n            span.className = 'virtual-statustxt e-orderedcolor';\n            span.textContent = val;\n            div.className = 'virtual-statustemp e-orderedcolor';\n        }\n        div.appendChild(span);\n        return div.outerHTML;\n    };\n    (window as { paymentTemplate?: (e: any) => any }).paymentTemplate = (e: any): any => {\n        const divElement: Element = document.createElement('div');\n        divElement.className = 'e-payment-info';\n        const imgElement: any = document.createElement('img');\n        imgElement.src = 'src/grid/images/payment/' + e.PaymentMethod + '.svg';\n        imgElement.alt = e.PaymentMethod;\n        const nameElement: HTMLElement = document.createElement('span');\n        nameElement.innerText = e.PaymentMethod;\n        divElement.appendChild(imgElement);\n        divElement.appendChild(nameElement);\n        return divElement.outerHTML;\n    };\n};\n"
    }
  ]
}