Available in the Full Version

Data Grid - ASP.NET MVC Helper

Show
records
Product NameCategoryUnit PriceUnits In Stock
ChaiBeverages1839
ChangBeverages1917
Aniseed SyrupCondiments1013
Chef Anton's Cajun SeasoningCondiments2253
Chef Anton's Gumbo MixCondiments21.350
Grandma's Boysenberry SpreadCondiments25120
Uncle Bob's Organic Dried PearsProduce3015
Northwoods Cranberry SauceCondiments406
Mishi Kobe NikuMeat/Poultry9729
IkuraSeafood3131
Queso CabralesDairy Products2122
Queso Manchego La PastoraDairy Products3886
KonbuSeafood624
TofuProduce23.2535
Genen ShouyuCondiments15.539
PavlovaConfections17.4529
Alice MuttonMeat/Poultry390
Carnarvon TigersSeafood62.542
Teatime Chocolate BiscuitsConfections9.225
Sir Rodney's MarmaladeConfections8140
Sir Rodney's SconesConfections103
Gustaf's KnäckebrödGrains/Cereals21104
TunnbrödGrains/Cereals961
Guaraná FantásticaBeverages4.520
NuNuCa Nuß-Nougat-CremeConfections1476
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how you can utilize the ASP.NET MVC helper to implement remote features functionalities for the igGrid. The igGrid ASP.NET MVC helper contains a GridDataSourceAction attribute class which greatly simplifies server side grid requests processing. Given an IEnumerable/IQueryable data source a controller method decorated with this attribute will automatically process grid features requests and will return the transformed data back to the igGrid in JSON format. Use the Paging, Sorting and Filtering features to experience the remote igGrid capabilities.

Code View

Copy to Clipboard
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IQueryable<IgniteUI.SamplesBrowser.Models.Northwind.Product>
<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    @(Html.Infragistics()
        .Grid(Model)
        .ID("grid")
        .Width("100%")
        .Height("500px")
        .PrimaryKey("ID")
        .AutoGenerateColumns(false)
        .AutoGenerateLayouts(false)
        .Columns(column =>
        {
            column.For(x => x.ProductName).HeaderText("Product Name").Width("30%");
            column.For(x => x.CategoryName).HeaderText("Category").Width("30%");
            column.For(x => x.UnitPrice).HeaderText("Unit Price").Width("20%");
            column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("20%");
        })
        .Features(features =>
        {
            features.Sorting().Type(OpType.Remote);
            features.Paging().Type(OpType.Remote);
            features.Filtering().Type(OpType.Remote);
            features.Responsive().ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("CategoryName").Classes("ui-hidden-phone");
                cs.ColumnSetting().ColumnKey("UnitPrice").Classes("ui-hidden-phone ui-hidden-tablet");
            });
        })
        .DataSourceUrl(Url.Action("GetProducts"))
        .Render()
    )
</body>
</html>