{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default",
  "dependencies": [
    "Syncfusion.AspNetMvc.Grid"
  ],
  "description": "Data grid bound via UrlAdaptor with virtualization, filtering, sorting, multi-row selection, and shimmer loading indicator.",
  "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": true,
    "platformIndex": "https://ai.syncfusion.com/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/grid-default.md"
  },
  "files": [
    {
      "target": "src/components/grid-default/GridOverview.cshtml",
      "content": "@using Syncfusion.EJ2\n@using Syncfusion.EJ2.DropDowns\n@section ControlsSection{\n\n<link href=\"~/Content/styles/Grid/style.css\" rel=\"stylesheet\">\n    <div class=\"control-section\">\n        <div>\n            @Html.EJS().DropDownList(\"DataRange\").Index(0).Width(\"220px\").Placeholder(\"Select a Data Range\").DataSource(\n                  (IEnumerable<object>)ViewData[\"Data\"]).Change(\"valueChange\").Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).Render()\n            <span id='msg'></span>\n        </div>\n        <br />\n        @Html.EJS().Grid(\"GridOverview\").AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col =>\n  {\n      col.Type(\"checkbox\").HeaderText(\"\").Field(\"\").Width(\"60\").AllowFiltering(false).AllowSorting(false).Add();\n      col.Field(\"EmployeeID\").Visible(false).IsPrimaryKey(true).HeaderText(\"Employee ID\").Width(\"130\").Add();\n      col.Field(\"Employees\").HeaderText(\"Employee Name\").Template(\"#empTemplate\").Width(\"200\").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();\n      col.Field(\"Designation\").HeaderText(\"Designation\").Width(\"170\").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();\n      col.Field(\"Mail\").HeaderText(\"Mail\").Width(\"230\").Add();\n      col.Field(\"Location\").HeaderText(\"Location\").Width(\"140\").Template(\"#coltemplate\").Add();\n      col.Field(\"Status\").HeaderText(\"Status\").Width(\"150\").Template(\"#statusTemplate\").Add();\n      col.Field(\"Trustworthiness\").HeaderText(\"Trustworthiness\").Width(\"200\").Template(\"#trustTemplate\").Add();\n      col.Field(\"Rating\").HeaderText(\"Rating\").Width(\"160\").Template(\"#ratingTemplate\").Add();\n      col.Field(\"Software\").AllowFiltering(false).AllowSorting(false).HeaderText(\"Software\").Width(\"180\").Template(\"#progessTemplate\").Add();\n      col.Field(\"CurrentSalary\").HeaderText(\"Current Salary\").Format(\"C2\").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(\"160\").Add();\n      col.Field(\"Address\").HeaderText(\"Address\").Width(\"240\").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();\n\n  }).EnableVirtualization(true).Height(\"400\").RowHeight(38).EnableHover(false).AllowSorting(true).Load(\"load\").DataBound(\"startTimer\").LoadingIndicator(l => { l.IndicatorType(Syncfusion.EJ2.Grids.IndicatorType.Shimmer); }).ActionComplete(\"complete\").AllowSelection(true).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).PersistSelection(true).CheckboxOnly(true)).Render()\n    </div>\n\n\n    <script type=\"text/x-jsrender\" id=\"progessTemplate\">\n         ${progessDetail(data)}\n    </script>\n\n    <template>\n        <input class=\"rating\">\n    </template>\n    <script type=\"text/x-jsrender\" id=\"ratingTemplate\">\n         ${ratingDetail(data)}\n    </script>\n\n    <script type=\"text/x-jsrender\" id=\"empTemplate\">\n        ${empDetails(data)}\n    </script>\n\n    <script type=\"text/javascript\">\n        var hostUrl = 'https://services.syncfusion.com/aspnet/production/';\n        var urlapi = new ej.data.DataManager({\n            url: hostUrl + \"api/UrlDataSource\",\n            adaptor: new ej.data.UrlAdaptor()\n        });\n        var dReady = false;\n        var grid;\n        var theme;\n        var dtTime = false;\n        var isDataBound = false;\n        var isDataChanged = true;\n        var intervalFun;\n        var clrIntervalFun;\n        var clrIntervalFun1;\n        var clrIntervalFun2;\n        var dropSlectedIndex = null;\n        var stTime;\n        stTime = performance.now();\n        function empDetails(e) {\n            var div = document.createElement('div');\n            var empImg = document.createElement('div');\n            empImg.className = 'empimg';\n            var span = document.createElement('span');\n            span.className = 'e-userimg';\n            if (e.EmployeeImg === 'usermale') {\n                span.classList.add('sf-icon-Male');\n            } else {\n                span.classList.add('sf-icon-FeMale');\n            }\n            empImg.appendChild(span);\n            var Emptext = document.createElement('span');\n            Emptext.id = 'Emptext';\n            Emptext.textContent = e.Employees;\n            div.appendChild(empImg);\n            div.appendChild(Emptext);\n            return div.outerHTML;\n        }\n        function ratingDetail(e) {\n\t    var temp = document.getElementsByTagName(\"template\")[0];\n            var cloneTemplate = temp.content.cloneNode(true);\n            var ratingElement = cloneTemplate.querySelector(\".rating\");\n            var rating = new ej.inputs.Rating({\n                value: e.Rating,\n                readOnly: true,\n                cssClass: 'custom-rating'\n            });\n            rating.appendTo(ratingElement);\n            return ratingElement.ej2_instances[0].wrapper.outerHTML;\n        }\n\n        function statusDetail(e) {\n            var div = document.createElement('div');\n            var span = document.createElement('span');\n            if (e.Status === 'Active') {\n                span.className = 'statustxt e-activecolor';\n                span.textContent = 'Active'\n                div.className = 'statustemp e-activecolor'\n            }\n            if (e.Status === 'Inactive') {\n                span.className = 'statustxt e-inactivecolor';\n                span.textContent = 'Inactive'\n                div.className = 'statustemp e-inactivecolor'\n            }\n            div.appendChild(span);\n            return div.outerHTML;\n        }\n        function load(args) {\n            if (window.themeName === \"highcontrast\") {\n                document.getElementById(\"GridOverview\").classList.add(\"e-hightheme\");\n            }\n            this.dataSource = urlapi;\n            this.query = new ej.data.Query().addParams('dataCount', '1000');\n            this.on('data-ready', function () {\n                dReady = true;\n            });\n        }\n        function complete(args) {\n            if (args.requestType === \"filterchoicerequest\" && (args.filterModel.options.field === \"Trustworthiness\" || args.filterModel.options.field === \"Rating\"\n                || args.filterModel.options.field === \"Status\")) {\n                var span = args.filterModel.dialogObj.element.querySelectorAll('.e-selectall')[0];\n                if (!ej.base.isNullOrUndefined(span)) {\n                    ej.base.closest(span, '.e-ftrchk').classList.add(\"e-hide\");\n                }\n            }\n        }\n        function progessDetail(e) {\n            var myProgress = document.createElement('div');\n            myProgress.id = 'myProgress';\n            myProgress.className = 'pbar';\n            var myBar = document.createElement('div');\n            myBar.id = 'myBar';\n            myBar.className = 'bar';\n            if (e.Status === 'Inactive') {\n                myBar.classList.add('progressdisable');\n            }\n            if (e.Software <= 20) {\n                e.Software = e.Software + 30;\n            }\n            myBar.style.width = e[e.column.field] + '%';\n            var pbarlabel = document.createElement('div');\n            pbarlabel.id = 'pbarlabel';\n            pbarlabel.className = 'barlabel';\n            pbarlabel.textContent = e.Software + '%';\n            myBar.appendChild(pbarlabel);\n            myProgress.appendChild(myBar);\n            return myProgress.outerHTML;\n        }\n        function startTimer(args) {\n            clearTimeout(clrIntervalFun);\n            clearInterval(intervalFun);\n            dtTime = true;\n        }\n        function valueChange() {\n            var grid = document.getElementById(\"GridOverview\").ej2_instances[0];\n            this.closePopup();\n            dropSlectedIndex = null;\n            var index = this.value;\n            clearTimeout(clrIntervalFun2);\n            clrIntervalFun2 = setTimeout(function () {\n                isDataChanged = true;\n                stTime = null;\n                var contentElement = grid.contentModule.getPanel().firstChild;\n                contentElement.scrollLeft = 0;\n                contentElement.scrollTop = 0;\n                grid.pageSettings.currentPage = 1;\n                stTime = performance.now();\n                if (grid.query.params.length > 1) {\n                    for (var i = 0; i < grid.query.params.length; i++) {\n                        if (grid.query.params[i].key === 'dataCount') {\n                            grid.query.params[i].value = index.toString();\n                            break;\n                        }\n                    }\n                }\n                else {\n                    grid.query.params[0].value = index.toString();\n                }\n                grid.setProperties({ dataSource: urlapi });\n            }, 100);\n        }\n\n        var observer = new MutationObserver(function (mutations) {\n            mutations.forEach(function () {\n                if (dReady && stTime && isDataChanged) {\n                    var msgEle = document.getElementById('msg');\n                    var val = (performance.now() - stTime).toFixed(0);\n                    stTime = null;\n                    dtTime = false;\n                    dReady = false;\n                    isDataChanged = false;\n                    msgEle.innerHTML = 'Load Time: ' + \"<b>\" + val + \"</b>\" + '<b>ms</b>';\n                    msgEle.classList.remove('e-hide');\n                }\n            });\n        });\n        observer.observe(document.getElementById('GridOverview'), {\n            attributes: true,\n            childList: true,\n            subtree: true,\n        });\n\n    </script>\n\n    <script type=\"text/x-jsrender\" id=\"trustTemplate\">\n        <img style=\"width: 31px; height: 24px\" src=\"@Url.Content(\"~/Content/grid/${Trustworthiness}.png\")\" />\n        <span id=\"Trusttext\">${Trustworthiness}</span>\n    </script>\n\n    <script type=\"text/x-jsrender\" id=\"statusTemplate\">\n        ${statusDetail(data)}\n    </script>\n\n    <script id=\"coltemplate\" type=\"text/x-template\">\n        <div class=\"image\">\n            <img src=\"@Url.Content(\"~/Content/grid/Map.png\")\" class=\"e-image\" alt=\"${Location}\" /> &nbsp\n            <span id=\"locationtext\">${Location}</span>\n        </div>\n    </script>\n\n\n    <style>\n        .fabric .empimg {\n            background-color: #0078d6;\n        }\n\n        .material .empimg {\n            background-color: #e3165b;\n        }\n\n        .highcontrast .empimg {\n            background-color: #ffd939;\n        }\n\n        _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-Male::before,\n        _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-FeMale::before {\n            color: black;\n        }\n\n        .highcontrast .e-userimg.sf-icon-Male::before,\n        .highcontrast .e-userimg.sf-icon-FeMale::before {\n            color: black;\n        }\n\n        .bootstrap .empimg {\n            background-color: #0078d6;\n        }\n\n        .bootstrap4 .empimg,\n        .bootstrap5 .empimg {\n            background-color: #0078d6;\n        }\n        \n        .tailwind .empimg {\n            background-color: #4f46e5;\n        }\n\t    \n\t.fluent .empimg {\n       \t    background-color: #106EBE;\n    \t}\n\t.tailwind3 .empimg,\n\t.tailwind3-dark .empimg{\n\t    background-color:rgba(79, 70, 229);\n\t}\n        #Emptext {\n            top: -14px;\n            left: 41px;\n            position: relative;\n        }\n        .e-grid.e-rtl #Emptext {\n            top: -14px;\n            left: -41px;\n            position: relative;\n        }\n\n        .empimg {\n            height: 27px;\n            width: 29px;\n            border-radius: 14px;\n            background-color: #e3165b;\n        }\n\n\n        .e-userimg.sf-icon-Male::before,\n        .e-userimg.sf-icon-FeMale::before {           \n            font-size: 13px;\n        }\n        .e-userimg.sf-icon-Male, .e-userimg.sf-icon-FeMale {\n            margin: 0px 8px;\n            line-height: 26px;\n            color: white;\n            font-size: 13px;\n        }\n\n        .e-userimg.sf-icon-Male::before {\n            content: '\\e700';\n        }\n\n        .e-userimg.sf-icon-FeMale::before {\n            content: '\\e701';\n        }\n\n\n        td.e-rowcell.e-selectionbackground.e-active {\n            background-color: transparent;\n        }\n\n        .e-hightheme .e-grid td.e-rowcell.e-selectionbackground.e-active,\n\t    .highcontrast .e-grid td.e-rowcell.e-selectionbackground.e-active,\n        .fluent2-highcontrast .e-grid td.e-rowcell.e-selectionbackground.e-active {\n            background-color: transparent;\n            color: white;\n        }\n\n        .e-bigger .e-grid .statustxt {\n            position: relative;\n            top: -2px;\n        }\n\n        td.e-rowcell .statustxt.e-activecolor {\n            color: #00cc00;\n            position: relative;\n            top: 9px;\n        }\n\n        td.e-rowcell .statustxt.e-inactivecolor {\n            color: #e60000;\n            position: relative;\n            top: 9px;\n        }\n\n        .bootstrap5 td.e-rowcell .statustxt.e-inactivecolor,\n        .bootstrap5 td.e-rowcell .statustxt.e-activecolor {\n            top: 8px;\n        }\n\n        .bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,\n        .bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {\n            position: relative;\n            top: 1.5px;\n        }\n\n        .e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,\n        .e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {\n            top: -0.5px;\n        }\n\n        .bootstrap5 .e-checkboxfiltertext #Trusttext {\n            margin-left: -4px;\n        }\n\n        .statustemp.e-inactivecolor {\n            background-color: #ffd7cc;\n        }\n\n        .statustemp.e-activecolor {\n            background-color: #ccffcc;\n        }\n\n        .statustxt.e-activecolor {\n            color: #00cc00;\n        }\n\n        .statustxt.e-inactivecolor {\n            color: #e60000;\n        }\n\n        #Trusttext {\n            position: relative;\n            top: 1px;\n        }\n\n        .e-image {\n            height: 13px;\n            width: 14px;\n        }\n\n        .statustemp.e-inactivecolor {\n            width: 64px;\n        }\n\n        .statustemp.e-activecolor {\n            width: 57px;\n        }\n\n        .statustemp {\n            position: relative;\n            height: 19px;\n            border-radius: 5px;\n            text-align: center\n        }\n\n        .highcontrast #msg {\n            color: #FFFFFF\n        }\n\n\n        #msg {\n            font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", sans-serif;\n            font-size: 14px;\n            font-weight: 400;\n            opacity: 0.95;\n            color: #333;\n            float: right;\n            margin-top: 3px;\n        }\n\n        .fabric-dark #msg, .bootstrap-dark #msg, .tailwind-dark #msg, .bootstrap5-dark #msg, .material-dark #msg, .material3-dark #msg, .fluent-dark #msg, .fluent2-dark #msg, .fluent2-highcontrast #msg, .bootstrap5\\.3-dark #msg, .tailwind3-dark #msg {\n            color: #ffffff !important;\n        }\n\n       @@media only screen and (max-width: 370px) {\n        #msg {\n            float: left;\n            margin-top: 3px;\n        }\n        #GridOverview {\n            margin-top: 36px;\n        }\n        }\n\n        @@-moz-document url-prefix() {     \n            #GridOverview.e-grid.e-grid-min-height .e-rowcell {       \n                line-height: 0 !important;\n        } }\n\n        #samplecontainer {\n            padding-top: 5px;\n        }\n\n        #myProgress {\n            position: relative;\n            height: 18px;\n            width: 10em;\n            text-align: left;\n            background-color: white;\n        }\n\n        .highcontrast .e-grid #myProgress {\n            background-color: black;\n        }\n\n        #myBar {\n            position: absolute;\n            width: 10%;\n            height: 100%;\n            background-color: #00b300;\n        }\n\n            #myBar.progressdisable {\n                background-color: #df2222;\n            }\n\n        #pbarlabel {\n            position: relative;\n            left: 10px;\n            line-height: 18px;\n            font-size: 10px;\n            color: white;\n        }\n\n\t    .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        .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    </style>\n}"
    },
    {
      "target": "src/components/grid-default/GridOverviewController.cs",
      "content": "using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Web;\nusing System.Web.Mvc;\n\nnamespace EJ2MVCSampleBrowser.Controllers.Grid\n{\n    public partial class GridController : Controller\n    {\n        // GET: GridOverview\n        public ActionResult GridOverview()\n        {\n            List<object> DataRange = new List<object>();\n            DataRange.Add(new { Text = \"1,000 Rows 11 Columns\", Value= \"1000\"});\n            DataRange.Add(new { Text = \"10,000 Rows 11 Columns\" , Value= \"10000\"});\n            DataRange.Add(new { Text = \"1,00,000 Rows 11 Columns\", Value = \"100000\" });\n            ViewData[\"Data\"] = DataRange;\n            return View();\n        }\n    }\n}"
    }
  ]
}