Client-side events

Client-side events can be used to customise the grid UI after it has been rendered. In this example the RowTransform and ViewDialogUpdated client-side events are used to highlighted records where the stock is less than the re-order level and also records for discontinued products

Client-side events are passed a reference to the client-side grid control object along with a second args object which contains data relevant to the event. The client-side control has its own API and in this example the columnValue and columnCell methods are used to interact with the grid page after it has rendered.

Loading...
Razor code

GridModel productGrid = new GridModel(DataSourceType.SQLite, "Northwind", "Products") { ViewDialog = new ViewDialog() { LayoutColumns = 2 } };
productGrid.Columns = new List()
{
    new GridColumn("ProductID") { PrimaryKey = true },
    new GridColumn("ProductName"),
    new GridColumn("SupplierID","Supplier") { Lookup = new Lookup("Suppliers", "SupplierId", "CompanyName"), Filter = true },
    new GridColumn("CategoryID","Category") { Lookup = new Lookup("Categories", "CategoryID", "CategoryName"), Filter = true },
    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)}
};
productGrid.Bind(ClientEvent.RowTransform, "highlightGridLowStock");
productGrid.Bind(ClientEvent.ViewDialogUpdated, "highlightViewLowStock");

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