Custom styling
 Next   Menu    Previous 
Docs

This example uses the rowTransform client-side event to customise the appearance of the grid based on data values. It highlights discontinued products and also products where the stock level is below the re-order level.
Loading...
Razor code

var productsGrid = new GridModel(DataSourceType.SQLite, "Northwind", "Products") { ViewDialog =  new ViewDialog() { LayoutColumns = 2 } };
productsGrid.Columns = new List() {
	new GridColumn("ProductID") { PrimaryKey = true },
	new GridColumn("ProductName"),
	new GridColumn("SupplierID","Supplier") { Lookup = new Lookup("Suppliers", "SupplierId", "CompanyName"), Filter = FilterType.Default },
	new GridColumn("CategoryID","Category") { Lookup = new Lookup("Categories", "CategoryID", "CategoryName"), Filter = FilterType.Default },
	new GridColumn("QuantityPerUnit", "Qty."),
	new GridColumn("UnitPrice","Price") { Format = "c"},
	new GridColumn("UnitsInStock", "Stock"),
	new GridColumn("UnitsOnOrder","On Order"),
	new GridColumn("ReorderLevel"),
	new GridColumn("Discontinued") { DataType = typeof(Boolean)}
};
productsGrid.Bind(GridClientEvent.RowTransform, "highlightGridLowStock");
productsGrid.Bind(GridClientEvent.ViewDialogUpdated, "highlightViewLowStock");

@(await new DbNetSuiteCore.GridControl(HttpContext).Render(productsGrid))