|
|
The properties of the grid columns can be set using the following methods of the object created by the Column method of the grid object. This object has the following methods which can be chained together in a fluent API style to assign multiple properties to the column or columns selected in the Column method.
|
...
orderTotalsGrid.Column("value").Format("c").DataType(typeof(Decimal)).Aggregate(AggregateType.Sum);
...
|
Aggregate(AggregateType)
Specifies how a column should be aggregated when the values in the grid are being summarised as a result of the GroupBy property being set to true.
|
...
productSalesSummaryGrid.Column("FirstOrder").Aggregate(AggregateType.Min);
productSalesSummaryGrid.Column("LastOrder").Aggregate(AggregateType.Max);
productSalesSummaryGrid.Column("TotalValue").Aggregate(AggregateType.Sum);
productSalesSummaryGrid.Column("AvgValue").Aggregate(AggregateType.Avg);
...
|
Demo
ClearDuplicateValue()
This property helps with the readability of data that has been sub-totaled using the TotalBreak method by removing duplicate data from the specified columns
|
...
DbNetGridCore orderTotalsGrid = new DbNetGridCore("northwind", "Customers join Orders on Customers.CustomerID = Orders.CustomerID join [Order Details] on Orders.OrderID = [Order Details].OrderID");
orderTotalsGrid.Columns = new List<string>() { "CompanyName", "OrderDate", "[Order Details].OrderID", "ProductID", "UnitPrice", "Quantity", "(UnitPrice*Quantity) as Value" };
orderTotalsGrid.Labels = new List<string>() { "Company", "Order Date", "Order ID", "Product", "Unit Price", "Qty", "Value" };
orderTotalsGrid.Column("UnitPrice").Format("c");
orderTotalsGrid.Column("value").Format("c").DataType(typeof(Decimal)).Aggregate(AggregateType.Sum);
orderTotalsGrid.Column(new string[] { "CompanyName", "OrderID" }).Break();
orderTotalsGrid.Column("OrderDate").ClearDuplicateValue();
orderTotalsGrid.Column("ProductID").Lookup(new Lookup("Products", "ProductId", "ProductName"));
@orderTotalsGrid.Render()
...
|
Demo
DataOnly()
This property causes the values for the specified columns to be stored as data properties of the the grid row rather than visible cells.
|
...
customersGrid.Column("CustomerId").DataOnly();
customersGrid.Bind(EventType.OnCellTransform, "addButton");
...
<script type="text/javascript" class="source">
function addButton(sender, args) {
switch(args.columnName.toLowerCase())
{
case "orders":
var $cell = $(args.cell);
var $row = $(args.row);
var customerId = sender.columnValue("customerid", $row);
$cell.html(`<a target='_blank' href='/samples/dbnetgrid/detail?customerid=${customerId}'>Orders</a>`).css('background-color', '#fff').css('text-align', 'center')
break;
}
}
</script>
...
|
Demo
DataType(Type)
Overrides the column data type value of the database in order for it to be rendered correctly. Primarily used with databases that have a limited set of native types such as SQLite
|
...
productsGrid.Column("Discontinued").DataType(typeof(Boolean));
...
|
Display(bool = true)
Controls the showing/hiding of a column in the grid.
File(FileConfiguration)
Specifies that the contents of the column (blob) should be treated as file. An optional second parameter uses the FileConfiguration class to associate uploaded file metadata with names of columns in the edit dialog which will be automatically populated whenever a file is uploaded.
|
...
downloadGrid.Bind(EventType.OnConfigureBinaryData, "configureImageFileName");
downloadGrid.Column("Photo").File(new FileConfiguration("jpg"));
...
<script type="text/javascript" class="source">
function configureImageFileName(sender, args) {
var fileName = sender.columnValue("photopath", args.row);
args.fileName = fileName.split('/').pop().replace(".bmp", ".jpg");
}
</script>
...
|
Demo
Filter()
Specifies that the column name(s) will have a column filter
|
...
productsGrid.Column(new String[] { "ProductID", "ProductName", "SupplierID", "CategoryID", "QuantityPerUnit", "UnitPrice", "UnitsInStock", "UnitsOnOrder", "ReorderLevel", "Discontinued" }).Filter();
...
|
Demo
FilterMode(FilterMode)
Specifies the nature of the column filter (Input or List). As the names suggest Input (default) allows free text-input (including some operators) into a text box whereas List creates a drop-down list of predefined values (typically used in combination with the Lookup method)
|
...
productsGrid.Column("CategoryID").Lookup(new Lookup("Categories", "CategoryId", "CategoryName")).FilterMode(FilterMode.List);
...
|
Demo
ForeignKey()
Specifies that a column as a foreign key in the context of a Nested or Linked grid control and matched against the primary key of the parent grid.
|
...
ordersGrid.Column("CustomerID").Hidden().ForeignKey();
...
|
Demo
Format(string)
Specifies a standard .Net formatting string for the specified column name(s)
|
...
orderTotalsGrid.Columns = new List<string>() { "Customers.CompanyName", "Orders.OrderDate", "[Order Details].OrderID", "[Order Details].ProductID", "[Order Details].UnitPrice", "[Order Details].Quantity", "(UnitPrice*Quantity) as Value" };
orderTotalsGrid.Labels = new List<string>() { "Company Name", "Order Date", "Order ID", "Product", "Unit Price", "Qty", "Value" };
orderTotalsGrid.Column(new string[] { "UnitPrice", "Value" }).Format("c");
...
|
Demo
GroupHeader()
Identifies the column(s) as a group heading which will delimit the rows into sections titled with the column value(s).
|
...
ordersGrid.Column("CustomerID").Lookup(new Lookup("Customers", "CustomerId", "CompanyName")).GroupHeader();
...
|
Demo
Hidden()
Hides the specified column(s)
|
...
ordersGrid.Column("CustomerID").Hidden().ForeignKey();
...
|
Demo
Image(ImageConfiguration)
Specifies that the contents of the column (blob) should be treated as an image. An optional second parameter uses the ImageConfiguration class to associate uploaded file metadata with names of columns in the form which will be automatically populated whenever a file is uploaded.
|
...
employeesGrid.Bind(EventType.OnConfigureBinaryData, "configureImageFileName");
employeesGrid.Column("Photo").Image( new ImageConfiguration("jpg"));
...
<script type="text/javascript" class="source">
function configureImageFileName(sender, args) {
var fileName = sender.columnValue("photopath", args.row);
args.fileName = fileName.split('/').pop().replace(".bmp", ".jpg");
}
</script>
...
|
Demo
Label(string, string)
Sets the label for the specified column
|
...
productsGrid.Column("supplierid").Lookup(new Lookup("suppliers", "supplierid", "companyname")).Label("Supplier");
...
|
Demo
Lookup(Lookup),
Lookup(enum, useNameAsValue = false),
Lookup<T>(Dictionary<T,string> lookup)
A lookup is used to converts a foreign key value into a descriptive value by creating a lookup against another table/view
|
...
productsGrid.Column("supplierid").Lookup(new Lookup("suppliers", "supplierid", "companyname")).Label("Supplier");
...
|
Demo
You can also use an Enum as a lookup. Simply pass the type of the enum to the method. By default the column will be assigned the integer value of the enum when selected but can also use the string value by passing true to the useNameAsValue parameter. The lookup text will use the enum name unless a description attribute has been used in which case it will use the attribute value.
|
public enum CountryEnum
{
[Description("United States")]
USA,
[Description("United Kingdom")]
UK
}
|
|
...
employeesGrid.Column("country").Lookup(typeof(CountryEnum), true);
...
|
Demo
You can also use a Dictionary object as a lookup.
|
...
employeesGrid.Column(nameof(Employee.Gender)).Lookup(
new Dictionary<string, string>() { { "M", "Male" }, { "F", "Female" } }
);
employeesGrid.Column(nameof(Employee.PayFrequency)).Lookup(
new Dictionary<int, string>() { { 1, "Weekly" }, { 2, "Monthly" } }
);
...
|
Demo
Search()
By default all columns are searchable using the Search dialog. If you only want to search on a specific columns you can specify them with this method.
|
...
customersGrid.Column(new string[] { "CompanyName", "City", "Country" }).Search();
...
|
Style(string)
Sets an inline CSS style to be applied to the grid column
|
...
productsGrid.Column("UnitPrice").Style("background-color:gold; color:steelblue").Format("c");
...
|
Demo
TotalBreak(string)
Specifies the column(s) upon which a change in value will trigger sub-totaling
|
...
orderTotalsGrid.Column("UnitPrice").Format("c");
orderTotalsGrid.Column("value").Format("c").DataType(typeof(Decimal)).Aggregate(AggregateType.Sum);
orderTotalsGrid.Column(new string[] { "CompanyName", "OrderID" }).TotalBreak();
orderTotalsGrid.Column("OrderDate").ClearDuplicateValue();
...
|
Demo
View()
Specifies the column(s) which will appear in the View dialog
|
...
employeesGrid.Column(new String[] { "firstname", "lastname", "photo", "notes", "photopath" }).View();
...
|
Demo
|
|
