|
|
The properties of the form columns can be set using the following methods of the object created by the Column method of the form 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);
...
|
Annotation(string)
This method allows an annotation to be associated with the column being edited and is displayed directly below the form element. The text can include HTML mark-up.
|
...
inputTypesEdit.Column("Phone").
ControlType(EditControlType.Tel).
Placeholder("Please enter your mobile number").
Annotation("Phone number must be in US format e.g. 123-456-7890").
Validation(new InputValidation("\\d{3}[\\-]\\d{3}[\\-]\\d{4}"));
...
|
Demo
Browse()
Designating at least one column as a browse column will enable the browse window for the control which allows the user to browse all and select from the selected records.
|
...
employeesEdit.Column(new string[] { "lastname", "firstname", "photo" }).Browse();
...
|
Demo
ControlType(EditControlType)
This method allows you to customise the control used to manage the input of a column value in a form.
|
...
inputTypesEdit.Column("Email").
ControlType(EditControlType.Email).
Size(40).
Annotation("The <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email' target='_blank'>Email</a> type automatically validates the input to ensure it is a valid email address");
...
|
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
|
...
productsEdit.Column("discontinued").DataType(typeof(Boolean));
...
|
DefaultValue(string)
Allows you to specify an initial value that will appear in the form column when you add a new record
|
...
ProductsEdit.Column(nameof(Product.ReorderLevel)).DefaultValue("0");
ProductsEdit.Column(nameof(Product.UnitsInStock)).DefaultValue("0");
...
|
Demo
Display(bool)
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. The FileConfiguration class allows the file to be restricted to particular extension types and also to allow the file metatdata to be associated with other columns in the form such that they are automatically populated when a new file is uploaded.
|
...
filesEdit.Column("Content").File(new FileConfiguration("pdf", new Dictionary<FileMetaData, string>() { { FileMetaData.FileName, "FileName" }, { FileMetaData.ContentType, "ContentType" }, { FileMetaData.LastModified, "LastModified" }, { FileMetaData.Size, "Size" } }));
filesEdit.Bind(EventType.OnFileSelected, "setDescription");
...
|
Demo
ForeignKey()
Specifies that a column as a foreign key in the context of Linked form control and matched against the primary key of the parent control.
|
...
ordersEdit.Column("CustomerID").ForeignKey().Hidden();
...
|
Demo
Format(string)
Specifies a standard .Net formatting string for the specified column name(s)
|
...
ordersEdit.Column("Freight").Format("c");
...
|
Demo
Hidden()
Hides the specified column name(s). Typically used to hide primary and foreign keys elements that are not editable
|
...
ordersEdit.Column("CustomerID").ForeignKey().Hidden();
...
|
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.
|
...
imagesEdit.Column("Content").Image(new ImageConfiguration(new List<string>() { "jpg", "png" }, new Dictionary<FileMetaData, string>() { { FileMetaData.FileName, "FileName" }, { FileMetaData.ContentType, "ContentType" }, { FileMetaData.LastModified, "LastModified" }, { FileMetaData.Size, "Size" } }));
imagesEdit.Bind(EventType.OnFileSelected, "setDescription");
...
|
Demo
Label(string)
Sets the label for the specified column
|
...
orderDetailsEdit.Column("ProductID").Lookup(new Lookup("Products", "ProductId", "ProductName")).Label("Product");
...
|
Demo
Lookup(),
Lookup(Lookup),
Lookup(enum, useNameAsValue = false),
Lookup<T>(Dictionary<T,string> lookup)
At it's simplest you can call Lookup with no parameters and this will create a lookup made of distinct existing values from the specified column. This will only work where the value and description values are the same and you only need selectable values to come from the existing dataset.
A more typical scenario is where you want to select a foreign key value from a separate lookup table based on a descriptive value. In this case you can you the Lookup object as a second parameter to describe the table/view name, foreign key value and descriptive column names.
|
...
productsForm.Column("supplierid").Lookup(new Lookup("suppliers", "supplierid", "companyname")).Label("Supplier");
productsForm.Column("categoryid").Lookup(new Lookup("categories", "categoryid", "categoryname")).Label("Category");
...
|
Demo
Lookup columns can also be made dependent on (filtered by) another column by defining the lookup as a parametrised SQL select statement where the name of the parameter matches the parent column on which it is dependent. At runtime the lookup will then be filtered by whatever value is in that column
|
...
customersEdit.Column("region").Lookup();
customersEdit.Column("country").Lookup(new Lookup("select distinct country from customers where region = @region"));
customersEdit.Column("city").Lookup(new Lookup("select distinct city from customers where country = @country"));
...
|
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
}
|
|
...
employeesEdit.Column("country").Lookup("country", typeof(CountryEnum), true);
...
|
You can also use a Dictionary object as a lookup.
|
...
employeesEdit.Column(nameof(Employee.Gender)).Lookup(
new Dictionary<string, string>() { { "M", "Male" }, { "F", "Female" } }
);
employeesEdit.Column(nameof(Employee.PayFrequency)).Lookup(
new Dictionary<int, string>() { { 1, "Weekly" }, { 2, "Monthly" } }
);
...
|
Pattern(string)
This method allows an HTML input pattern to be assigned to an input control to validate the allowed range of entered values
|
...
employeesEdit.Column("titleofcourtesy").Pattern("Mr.|Dr.|Ms.|Mr.");
...
|
Demo
Placeholder(string)
The Placeholder method specifies a hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
|
...
inputTypesEdit.Column("Phone").
ControlType(EditControlType.Tel).
Placeholder("Please enter your mobile number").
Annotation("Phone number must be in US format e.g. 123-456-7890 which is enforced by a regular expression").
Validation(new InputValidation("\\d{3}[\\-]\\d{3}[\\-]\\d{4}"));
...
|
Demo
ReadOnly()
Sets the input control(s) specified to be read-only.
|
...
customersEdit.Column("CompanyName").ReadOnly();
...
|
Demo
Required()
Sets the input control(s) specified to be required.
|
...
employeesEdit.Column(new string[] { "lastname", "firstname", "titleofcourtesy" }).Required();
...
|
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.
|
...
customersEdit.Column(new string[] { "CompanyName", "City", "Country" }).Search();
...
|
Demo
Size(int)
By default the size of an input is based on the data type of the column or the length of the database column in the case of string based columns. This can be overridden with this column method.
|
...
inputTypesEdit.Column("Url").ControlType(EditControlType.Url).Size(40);
...
|
Demo
Style(string)
Sets an inline CSS style to be applied to the form control for column(s)
|
...
productsEdit.Column("UnitPrice").Style("background-color:gold; font-weight:bold;").Format("c");
...
|
Demo
TextTransform(TextTransform)
Forces a text based field to be Uppercase, Lowercase or Capitalised
|
...
ProductsEdit.Column(nameof(Product.ProductName)).TextTransform(TextTransform.Uppercase);
...
|
Validation(InputValidation)
Applies client-side validation properties to the column(s). For Range and Number control types the Min, Max and Step properties can be set. For text based columns the Pattern property can be assigned a regular expression to validate the input. In addition
|
...
// Range is between 0 and 100 and is incremented/decremented in steps of 10
inputTypesEdit.Column("Range").ControlType(EditControlType.Range).Validation(new InputValidation(0, 100, 10));
// Phone must be in the format 123-456-7890
inputTypesEdit.Column("Phone").ControlType(EditControlType.Tel).Placeholder("Please enter your mobile number").Validation(new InputValidation("\\d{3}[\\-]\\d{3}[\\-]\\d{4}"));
// Password is required and must be at least 8 characters and no more than 16
inputTypesEdit.Column("Password").ControlType(EditControlType.Password).Validation(new InputValidation(true) { MinLength = 8, MaxLength = 16});
...
|
Demo
|
|
