# grid-default

> Data grid bound via UrlAdaptor with virtualization, filtering, sorting, multi-row selection, and shimmer loading indicator.

**Framework:** aspnet-mvc  **Component:** Grid  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/grid-default.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.Grid
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-default/GridOverview.cshtml

```cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.DropDowns
@section ControlsSection{

<link href="~/Content/styles/Grid/style.css" rel="stylesheet">
    <div class="control-section">
        <div>
            @Html.EJS().DropDownList("DataRange").Index(0).Width("220px").Placeholder("Select a Data Range").DataSource(
                  (IEnumerable<object>)ViewData["Data"]).Change("valueChange").Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).Render()
            <span id='msg'></span>
        </div>
        <br />
        @Html.EJS().Grid("GridOverview").AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col =>
  {
      col.Type("checkbox").HeaderText("").Field("").Width("60").AllowFiltering(false).AllowSorting(false).Add();
      col.Field("EmployeeID").Visible(false).IsPrimaryKey(true).HeaderText("Employee ID").Width("130").Add();
      col.Field("Employees").HeaderText("Employee Name").Template("#empTemplate").Width("200").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
      col.Field("Designation").HeaderText("Designation").Width("170").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
      col.Field("Mail").HeaderText("Mail").Width("230").Add();
      col.Field("Location").HeaderText("Location").Width("140").Template("#coltemplate").Add();
      col.Field("Status").HeaderText("Status").Width("150").Template("#statusTemplate").Add();
      col.Field("Trustworthiness").HeaderText("Trustworthiness").Width("200").Template("#trustTemplate").Add();
      col.Field("Rating").HeaderText("Rating").Width("160").Template("#ratingTemplate").Add();
      col.Field("Software").AllowFiltering(false).AllowSorting(false).HeaderText("Software").Width("180").Template("#progessTemplate").Add();
      col.Field("CurrentSalary").HeaderText("Current Salary").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("160").Add();
      col.Field("Address").HeaderText("Address").Width("240").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();

  }).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()
    </div>

    <script type="text/x-jsrender" id="progessTemplate">
         ${progessDetail(data)}
    </script>

    <template>
        <input class="rating">
    </template>
    <script type="text/x-jsrender" id="ratingTemplate">
         ${ratingDetail(data)}
    </script>

    <script type="text/x-jsrender" id="empTemplate">
        ${empDetails(data)}
    </script>

    <script type="text/javascript">
        var hostUrl = 'https://services.syncfusion.com/aspnet/production/';
        var urlapi = new ej.data.DataManager({
            url: hostUrl + "api/UrlDataSource",
            adaptor: new ej.data.UrlAdaptor()
        });
        var dReady = false;
        var grid;
        var theme;
        var dtTime = false;
        var isDataBound = false;
        var isDataChanged = true;
        var intervalFun;
        var clrIntervalFun;
        var clrIntervalFun1;
        var clrIntervalFun2;
        var dropSlectedIndex = null;
        var stTime;
        stTime = performance.now();
        function empDetails(e) {
            var div = document.createElement('div');
            var empImg = document.createElement('div');
            empImg.className = 'empimg';
            var span = document.createElement('span');
            span.className = 'e-userimg';
            if (e.EmployeeImg === 'usermale') {
                span.classList.add('sf-icon-Male');
            } else {
                span.classList.add('sf-icon-FeMale');
            }
            empImg.appendChild(span);
            var Emptext = document.createElement('span');
            Emptext.id = 'Emptext';
            Emptext.textContent = e.Employees;
            div.appendChild(empImg);
            div.appendChild(Emptext);
            return div.outerHTML;
        }
        function ratingDetail(e) {
	    var temp = document.getElementsByTagName("template")[0];
            var cloneTemplate = temp.content.cloneNode(true);
            var ratingElement = cloneTemplate.querySelector(".rating");
            var rating = new ej.inputs.Rating({
                value: e.Rating,
                readOnly: true,
                cssClass: 'custom-rating'
            });
            rating.appendTo(ratingElement);
            return ratingElement.ej2_instances[0].wrapper.outerHTML;
        }

        function statusDetail(e) {
            var div = document.createElement('div');
            var span = document.createElement('span');
            if (e.Status === 'Active') {
                span.className = 'statustxt e-activecolor';
                span.textContent = 'Active'
                div.className = 'statustemp e-activecolor'
            }
            if (e.Status === 'Inactive') {
                span.className = 'statustxt e-inactivecolor';
                span.textContent = 'Inactive'
                div.className = 'statustemp e-inactivecolor'
            }
            div.appendChild(span);
            return div.outerHTML;
        }
        function load(args) {
            if (window.themeName === "highcontrast") {
                document.getElementById("GridOverview").classList.add("e-hightheme");
            }
            this.dataSource = urlapi;
            this.query = new ej.data.Query().addParams('dataCount', '1000');
            this.on('data-ready', function () {
                dReady = true;
            });
        }
        function complete(args) {
            if (args.requestType === "filterchoicerequest" && (args.filterModel.options.field === "Trustworthiness" || args.filterModel.options.field === "Rating"
                || args.filterModel.options.field === "Status")) {
                var span = args.filterModel.dialogObj.element.querySelectorAll('.e-selectall')[0];
                if (!ej.base.isNullOrUndefined(span)) {
                    ej.base.closest(span, '.e-ftrchk').classList.add("e-hide");
                }
            }
        }
        function progessDetail(e) {
            var myProgress = document.createElement('div');
            myProgress.id = 'myProgress';
            myProgress.className = 'pbar';
            var myBar = document.createElement('div');
            myBar.id = 'myBar';
            myBar.className = 'bar';
            if (e.Status === 'Inactive') {
                myBar.classList.add('progressdisable');
            }
            if (e.Software <= 20) {
                e.Software = e.Software + 30;
            }
            myBar.style.width = e[e.column.field] + '%';
            var pbarlabel = document.createElement('div');
            pbarlabel.id = 'pbarlabel';
            pbarlabel.className = 'barlabel';
            pbarlabel.textContent = e.Software + '%';
            myBar.appendChild(pbarlabel);
            myProgress.appendChild(myBar);
            return myProgress.outerHTML;
        }
        function startTimer(args) {
            clearTimeout(clrIntervalFun);
            clearInterval(intervalFun);
            dtTime = true;
        }
        function valueChange() {
            var grid = document.getElementById("GridOverview").ej2_instances[0];
            this.closePopup();
            dropSlectedIndex = null;
            var index = this.value;
            clearTimeout(clrIntervalFun2);
            clrIntervalFun2 = setTimeout(function () {
                isDataChanged = true;
                stTime = null;
                var contentElement = grid.contentModule.getPanel().firstChild;
                contentElement.scrollLeft = 0;
                contentElement.scrollTop = 0;
                grid.pageSettings.currentPage = 1;
                stTime = performance.now();
                if (grid.query.params.length > 1) {
                    for (var i = 0; i < grid.query.params.length; i++) {
                        if (grid.query.params[i].key === 'dataCount') {
                            grid.query.params[i].value = index.toString();
                            break;
                        }
                    }
                }
                else {
                    grid.query.params[0].value = index.toString();
                }
                grid.setProperties({ dataSource: urlapi });
            }, 100);
        }

        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function () {
                if (dReady && stTime && isDataChanged) {
                    var msgEle = document.getElementById('msg');
                    var val = (performance.now() - stTime).toFixed(0);
                    stTime = null;
                    dtTime = false;
                    dReady = false;
                    isDataChanged = false;
                    msgEle.innerHTML = 'Load Time: ' + "<b>" + val + "</b>" + '<b>ms</b>';
                    msgEle.classList.remove('e-hide');
                }
            });
        });
        observer.observe(document.getElementById('GridOverview'), {
            attributes: true,
            childList: true,
            subtree: true,
        });

    </script>

    <script type="text/x-jsrender" id="trustTemplate">
        <img style="width: 31px; height: 24px" src="@Url.Content("~/Content/grid/${Trustworthiness}.png")" />
        <span id="Trusttext">${Trustworthiness}</span>
    </script>

    <script type="text/x-jsrender" id="statusTemplate">
        ${statusDetail(data)}
    </script>

    <script id="coltemplate" type="text/x-template">
        <div class="image">
            <img src="@Url.Content("~/Content/grid/Map.png")" class="e-image" alt="${Location}" /> &nbsp
            <span id="locationtext">${Location}</span>
        </div>
    </script>

    <style>
        .fabric .empimg {
            background-color: #0078d6;
        }

        .material .empimg {
            background-color: #e3165b;
        }

        .highcontrast .empimg {
            background-color: #ffd939;
        }

        _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-Male::before,
        _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-FeMale::before {
            color: black;
        }

        .highcontrast .e-userimg.sf-icon-Male::before,
        .highcontrast .e-userimg.sf-icon-FeMale::before {
            color: black;
        }

        .bootstrap .empimg {
            background-color: #0078d6;
        }

        .bootstrap4 .empimg,
        .bootstrap5 .empimg {
            background-color: #0078d6;
        }
        
        .tailwind .empimg {
            background-color: #4f46e5;
        }
	    
	.fluent .empimg {
       	    background-color: #106EBE;
    	}
	.tailwind3 .empimg,
	.tailwind3-dark .empimg{
	    background-color:rgba(79, 70, 229);
	}
        #Emptext {
            top: -14px;
            left: 41px;
            position: relative;
        }
        .e-grid.e-rtl #Emptext {
            top: -14px;
            left: -41px;
            position: relative;
        }

        .empimg {
            height: 27px;
            width: 29px;
            border-radius: 14px;
            background-color: #e3165b;
        }

        .e-userimg.sf-icon-Male::before,
        .e-userimg.sf-icon-FeMale::before {           
            font-size: 13px;
        }
        .e-userimg.sf-icon-Male, .e-userimg.sf-icon-FeMale {
            margin: 0px 8px;
            line-height: 26px;
            color: white;
            font-size: 13px;
        }

        .e-userimg.sf-icon-Male::before {
            content: '\e700';
        }

        .e-userimg.sf-icon-FeMale::before {
            content: '\e701';
        }

        td.e-rowcell.e-selectionbackground.e-active {
            background-color: transparent;
        }

        .e-hightheme .e-grid td.e-rowcell.e-selectionbackground.e-active,
	    .highcontrast .e-grid td.e-rowcell.e-selectionbackground.e-active,
        .fluent2-highcontrast .e-grid td.e-rowcell.e-selectionbackground.e-active {
            background-color: transparent;
            color: white;
        }

        .e-bigger .e-grid .statustxt {
            position: relative;
            top: -2px;
        }

        td.e-rowcell .statustxt.e-activecolor {
            color: #00cc00;
            position: relative;
            top: 9px;
        }

        td.e-rowcell .statustxt.e-inactivecolor {
            color: #e60000;
            position: relative;
            top: 9px;
        }

        .bootstrap5 td.e-rowcell .statustxt.e-inactivecolor,
        .bootstrap5 td.e-rowcell .statustxt.e-activecolor {
            top: 8px;
        }

        .bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,
        .bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {
            position: relative;
            top: 1.5px;
        }

        .e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-activecolor,
        .e-bigger.bootstrap5 .e-checkboxfiltertext .statustemp .statustxt.e-inactivecolor {
            top: -0.5px;
        }

        .bootstrap5 .e-checkboxfiltertext #Trusttext {
            margin-left: -4px;
        }

        .statustemp.e-inactivecolor {
            background-color: #ffd7cc;
        }

        .statustemp.e-activecolor {
            background-color: #ccffcc;
        }

        .statustxt.e-activecolor {
            color: #00cc00;
        }

        .statustxt.e-inactivecolor {
            color: #e60000;
        }

        #Trusttext {
            position: relative;
            top: 1px;
        }

        .e-image {
            height: 13px;
            width: 14px;
        }

        .statustemp.e-inactivecolor {
            width: 64px;
        }

        .statustemp.e-activecolor {
            width: 57px;
        }

        .statustemp {
            position: relative;
            height: 19px;
            border-radius: 5px;
            text-align: center
        }

        .highcontrast #msg {
            color: #FFFFFF
        }

        #msg {
            font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
            font-size: 14px;
            font-weight: 400;
            opacity: 0.95;
            color: #333;
            float: right;
            margin-top: 3px;
        }

        .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 {
            color: #ffffff !important;
        }

       @@media only screen and (max-width: 370px) {
        #msg {
            float: left;
            margin-top: 3px;
        }
        #GridOverview {
            margin-top: 36px;
        }
        }

        @@-moz-document url-prefix() {     
            #GridOverview.e-grid.e-grid-min-height .e-rowcell {       
                line-height: 0 !important;
        } }

        #samplecontainer {
            padding-top: 5px;
        }

        #myProgress {
            position: relative;
            height: 18px;
            width: 10em;
            text-align: left;
            background-color: white;
        }

        .highcontrast .e-grid #myProgress {
            background-color: black;
        }

        #myBar {
            position: absolute;
            width: 10%;
            height: 100%;
            background-color: #00b300;
        }

            #myBar.progressdisable {
                background-color: #df2222;
            }

        #pbarlabel {
            position: relative;
            left: 10px;
            line-height: 18px;
            font-size: 10px;
            color: white;
        }

	    .custom-rating.e-rating-container .e-rating-item-container ,
        .e-bigger .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon,
        .e-bigger.custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {
            font-size: 11px;
        }

        .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon {
            -webkit-text-fill-color: lightgrey;
            -webkit-text-stroke: 1px lightgrey;
        }
        .custom-rating.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon {
            background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px #ffa600;
        }
    </style>
}
```

### src/components/grid-default/GridOverviewController.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Grid
{
    public partial class GridController : Controller
    {
        // GET: GridOverview
        public ActionResult GridOverview()
        {
            List<object> DataRange = new List<object>();
            DataRange.Add(new { Text = "1,000 Rows 11 Columns", Value= "1000"});
            DataRange.Add(new { Text = "10,000 Rows 11 Columns" , Value= "10000"});
            DataRange.Add(new { Text = "1,00,000 Rows 11 Columns", Value = "100000" });
            ViewData["Data"] = DataRange;
            return View();
        }
    }
}
```