Available in the Full Version

Data Grid - Sorting (Remote)

Product NameUnits In StockSupplier NameDiscontinued
Chai39Exotic Liquids
Chang17Exotic Liquids
Aniseed Syrup13Exotic Liquids
Chef Anton's Cajun Seasoning53New Orleans Cajun Delights
Chef Anton's Gumbo Mix0New Orleans Cajun Delights
Grandma's Boysenberry Spread120Grandma Kelly's Homestead
Uncle Bob's Organic Dried Pears15Grandma Kelly's Homestead
Northwoods Cranberry Sauce6Grandma Kelly's Homestead
Mishi Kobe Niku29Tokyo Traders
Ikura31Tokyo Traders
Queso Cabrales22Cooperativa de Quesos 'Las Cabras'
Queso Manchego La Pastora86Cooperativa de Quesos 'Las Cabras'
Konbu24Mayumi's
Tofu35Mayumi's
Genen Shouyu39Mayumi's
Pavlova29Pavlova, Ltd.
Alice Mutton0Pavlova, Ltd.
Carnarvon Tigers42Pavlova, Ltd.
Teatime Chocolate Biscuits25Specialty Biscuits, Ltd.
Sir Rodney's Marmalade40Specialty Biscuits, Ltd.
Sir Rodney's Scones3Specialty Biscuits, Ltd.
Gustaf's Knäckebröd104PB Knäckebröd AB
Tunnbröd61PB Knäckebröd AB
Guaraná Fantástica20Refrescos Americanas LTDA
NuNuCa Nuß-Nougat-Creme76Heli Süßwaren GmbH & Co. KG
Gumbär Gummibärchen15Heli Süßwaren GmbH & Co. KG
Schoggi Schokolade49Heli Süßwaren GmbH & Co. KG
Rössle Sauerkraut26Plutzer Lebensmittelgroßmärkte AG
Thüringer Rostbratwurst0Plutzer Lebensmittelgroßmärkte AG
Nord-Ost Matjeshering10Nord-Ost-Fisch Handelsgesellschaft mbH
Gorgonzola Telino0Formaggi Fortini s.r.l.
Mascarpone Fabioli9Formaggi Fortini s.r.l.
Geitost112Norske Meierier
Sasquatch Ale111Bigfoot Breweries
Steeleye Stout20Bigfoot Breweries
Inlagd Sill112Svensk Sjöföda AB
Gravad lax11Svensk Sjöföda AB
Côte de Blaye17Aux joyeux ecclésiastiques
Chartreuse verte69Aux joyeux ecclésiastiques
Boston Crab Meat123New England Seafood Cannery
Jack's New England Clam Chowder85New England Seafood Cannery
Singaporean Hokkien Fried Mee26Leka Trading
Ipoh Coffee17Leka Trading
Gula Malacca27Leka Trading
Rogede sild5Lyngbysild
Spegesild95Lyngbysild
Zaanse koeken36Zaanse Snoepfabriek
Chocolade15Zaanse Snoepfabriek
Maxilaku10Karkki Oy
Valkoinen suklaa65Karkki Oy
Manjimup Dried Apples20G'day, Mate
Filo Mix38G'day, Mate
Perth Pasties0G'day, Mate
Tourtière21Ma Maison
Pâté chinois115Ma Maison
Gnocchi di nonna Alice21Pasta Buttini s.r.l.
Ravioli Angelo36Pasta Buttini s.r.l.
Escargots de Bourgogne62Escargots Nouveaux
Raclette Courdavault79Gai pâturage
Camembert Pierrot19Gai pâturage
Sirop d'érable113Forêts d'érables
Tarte au sucre17Forêts d'érables
Vegie-spread24Pavlova, Ltd.
Wimmers gute Semmelknödel22Plutzer Lebensmittelgroßmärkte AG
Louisiana Fiery Hot Pepper Sauce76New Orleans Cajun Delights
Louisiana Hot Spiced Okra4New Orleans Cajun Delights
Laughing Lumberjack Lager52Bigfoot Breweries
Scottish Longbreads6Specialty Biscuits, Ltd.
Gudbrandsdalsost26Norske Meierier
Outback Lager15Pavlova, Ltd.
Flotemysost26Norske Meierier
Mozzarella di Giovanni14Formaggi Fortini s.r.l.
Röd Kaviar101Svensk Sjöföda AB
Longlife Tofu4Tokyo Traders
Rhönbräu Klosterbier125Plutzer Lebensmittelgroßmärkte AG
Lakkalikööri57Karkki Oy
Original Frankfurter grüne Soße32Plutzer Lebensmittelgroßmärkte AG

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 remote sorting functionality of the igGridSorting feature. Requests are handled by the Ignite UI for jQuery Grid MVC Helper Wrapper which automatically processes the request sorting parameters and transforms them into LINQ expressions. For this to work the controller action method responsible for the sorting should be decorated with GridDataSourceAction attribute. Finally an IQueryable data provider should be passed as a view model.

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")
        .Height("500px")
        .Width("100%")
        .AutoGenerateColumns(false)
        .AutoGenerateLayouts(false)
        .RenderCheckboxes(true)
        .Columns(column =>
        {
            column.For(x => x.ProductName).HeaderText("Product Name").Width("35%");
            column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("15%");
            column.For(x => x.SupplierName).HeaderText("Supplier Name").Width("35%");
            column.For(x => x.Discontinued).HeaderText("Discontinued").Width("15%");
        })
        .Features(features =>
        {
            features.Sorting().Type(OpType.Remote);
        })
        .DataSourceUrl(Url.Action("GetProducts"))
        .Render()
    )

</body>
</html>