Available in the Full Version

Data Grid - DataTable Binding

Show
records
CustomerIDCompanyNameContactNameContactTitleAddressCityRegionPostalCodeCountryPhoneFax
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 57Berlin 12209Germany030-0074321030-0076545
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F. 05021Mexico(5) 555-4729(5) 555-3745
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F. 05023Mexico(5) 555-3932 
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.London WA1 1DPUK(171) 555-7788(171) 555-6750
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8Luleå S-958 22Sweden0921-12 34 650921-12 34 67
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 57Mannheim 68306Germany0621-084600621-08924
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place KléberStrasbourg 67000France88.60.15.3188.60.15.32
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 67Madrid 28023Spain(91) 555 22 82(91) 555 91 99
BONAPBon app'Laurence LebihanOwner12, rue des BouchersMarseille 13008France91.24.45.4091.24.45.41
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.TsawassenBCT2F 8M4Canada(604) 555-4729(604) 555-3745
BSBEVB's BeveragesVictoria AshworthSales RepresentativeFauntleroy CircusLondon EC2 5NTUK(171) 555-1212 
CACTUCactus Comidas para llevarPatricio SimpsonSales AgentCerrito 333Buenos Aires 1010Argentina(1) 135-5555(1) 135-4892
CENTCCentro comercial MoctezumaFrancisco ChangMarketing ManagerSierras de Granada 9993México D.F. 05022Mexico(5) 555-3392(5) 555-7293
CHOPSChop-suey ChineseYang WangOwnerHauptstr. 29Bern 3012Switzerland0452-076545 
COMMIComércio MineiroPedro AfonsoSales AssociateAv. dos Lusíadas, 23Sao PauloSP05432-043Brazil(11) 555-7647 
CONSHConsolidated HoldingsElizabeth BrownSales RepresentativeBerkeley Gardens 12 BreweryLondon WX1 6LTUK(171) 555-2282(171) 555-9199
DRACDDrachenblut DelikatessenSven OttliebOrder AdministratorWalserweg 21Aachen 52066Germany0241-0391230241-059428
DUMONDu monde entierJanine LabruneOwner67, rue des Cinquante OtagesNantes 44000France40.67.88.8840.67.89.89
EASTCEastern ConnectionAnn DevonSales Agent35 King GeorgeLondon WX3 6FWUK(171) 555-0297(171) 555-3373
ERNSHErnst HandelRoland MendelSales ManagerKirchgasse 6Graz 8010Austria7675-34257675-3426
FAMIAFamilia ArquibaldoAria CruzMarketing AssistantRua Orós, 92Sao PauloSP05442-030Brazil(11) 555-9857 
FISSAFISSA Fabrica Inter. Salchichas S.A.Diego RoelAccounting ManagerC/ Moralzarzal, 86Madrid 28034Spain(91) 555 94 44(91) 555 55 93
FOLIGFolies gourmandesMartine RancéAssistant Sales Agent184, chaussée de TournaiLille 59000France20.16.10.1620.16.10.17
FOLKOFolk och fä HBMaria LarssonOwnerÅkergatan 24Bräcke S-844 67Sweden0695-34 67 21 
FRANKFrankenversandPeter FrankenMarketing ManagerBerliner Platz 43München 80805Germany089-0877310089-0877451
 

This sample is designed for a larger screen size.

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

Using the ASP.NET MVC helper, you can bind the igGrid directly to DataTable objects. Remote Sorting implementation is demonstrated by processing the request and sorting the data on DataTable level before returning it.

Code View

Copy to Clipboard
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models.Northwind
@using System.Data
<!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>
    <!-- Note: When grid is defined in the View and DataTable is used as DataSource, grid columns can only be auto-generated -->
    @(Html.Infragistics().Grid<System.Data.DataTable>()
        .ID("grid1")
        .Height("400px")
        .Width("100%")
        .AutoGenerateColumns(true)
        .Features(feature =>
        {
            feature.Responsive()
            .EnableVerticalRendering(false)
            .ReactOnContainerWidthChanges(true)
            .ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("CustomerID").Classes("ui-hidden-phone");
                cs.ColumnSetting().ColumnKey("Region").Classes("ui-hidden-phone");
                cs.ColumnSetting().ColumnKey("Address").Classes("ui-hidden-phone");
                cs.ColumnSetting().ColumnKey("City").Classes("ui-hidden-phone");
                cs.ColumnSetting().ColumnKey("Fax").Classes("ui-hidden-phone");
            });
            feature.Sorting().Type(OpType.Remote).Mode(SortingMode.Multiple);
            feature.Paging().Type(OpType.Remote);
        })
        .DataSource(Model)
        .DataSourceUrl(Url.Action("datatable-binding"))
        .DataBind()
        .Render()
    )

</body>
</html>