Binding

Use the following steps to display data within the Grid View control:

  1. Create a column for each data field whose data you want to display.
  2. Call the Bind method with the data source object as a parameter.

Some operations (e.g., editing and grouping) also require a key field to be specified using the KeyField method.

You can initialize grid columns in one of the following ways:

Product Name Quantity Per Unit Unit Price Units On Order Total
Chai10 boxes x 20 bags180$0.00
Chang24 - 12 oz bottles1940$760.00
Aniseed Syrup12 - 550 ml bottles1070$700.00
Chef Anton's Cajun Seasoning48 - 6 oz jars220$0.00
Chef Anton's Gumbo Mix36 boxes210$0.00
Grandma's Boysenberry Spread12 - 8 oz jars250$0.00
Uncle Bob's Organic Dried Pears12 - 1 lb pkgs.300$0.00
Northwoods Cranberry Sauce12 - 12 oz jars400$0.00
Mishi Kobe Niku18 - 500 g pkgs.970$0.00
Ikura12 - 200 ml jars310$0.00
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<DevExpress.AspNetCore.DemoModels.SalesProduct>("bindingGrid")
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns.Add(m => m.ProductName);
        columns.Add(m => m.QuantityPerUnit);
        columns.Add()
            .FieldName("UnitPrice");
        columns.Add()
            .FieldName("UnitsOnOrder");
        columns.AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitsOnOrder * UnitPrice")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("Binding")
            .Controller("GridView")))
    .Bind(Model))
using System;
using Microsoft.AspNetCore.Mvc;
using DevExpress.AspNetCore.DemoModels;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public IActionResult Binding() {
            return PartialView("DataBinding/Binding", SimpleBindingContext.Products);
        }
    }
}
using System.ComponentModel.DataAnnotations;

namespace DevExpress.AspNetCore.DemoModels {
    public class SalesProduct {
        [Key]
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public short? UnitsOnOrder { get; set; }
        public short? UnitsInStock { get; set; }
        public decimal? UnitPrice { get; set; }
        public string QuantityPerUnit { get; set; }
    }
}

Data Annotation

The DevExpress Bootstrap controls rely on the DRY ("Don't Repeat Yourself") ideology of ASP.NET Core MVC validation. This ideology implies that you declaratively specify functionality and behavior of model class properties using Data Annotation attributes. Data validation is performed based on the specified attributes both on the client and server sides.

This demo demonstrates how to change a column's caption and display format using Data Annotation attributes.

Product Price Units In Stock
Chai$18.0039 items
Chang$19.0017 items
Aniseed Syrup$10.0013 items
Chef Anton's Cajun Seasoning$22.0053 items
Chef Anton's Gumbo Mix$21.000 items
Grandma's Boysenberry Spread$25.00120 items
Uncle Bob's Organic Dried Pears$30.0015 items
Northwoods Cranberry Sauce$40.006 items
Mishi Kobe Niku$97.0029 items
Ikura$31.0031 items
@model IEnumerable

@(Html.DevExpress()
    .BootstrapGridView<DevExpress.AspNetCore.DemoModels.DataAnnotationProduct>("dataAnnotationGrid")
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns.Add(m => m.ProductName);
        columns.Add(m => m.UnitPrice);
        columns.Add(m => m.UnitsInStock);
    })
    ...    
.Bind(Model))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public IActionResult DataAnnotation() {
            return PartialView("DataBinding/DataAnnotation", SimpleBindingContext.GetDataAnnotatedProducts());
        }
    }
}
using System.ComponentModel.DataAnnotations;

namespace DevExpress.AspNetCore.DemoModels {
    public class DataAnnotationProduct {
        [Key]
        public int ProductID { get; set; }

        [Display(Name = "Product")]
        public string ProductName { get; set; }

        [DisplayFormat(DataFormatString = "{0} items")]
        public short? UnitsInStock { get; set; }

        [DisplayFormat(DataFormatString = "c")]
        [Display(Name = "Price")]
        public decimal? UnitPrice { get; set; }
    }
}
Screen Size
Color Themes
Demo QR Code