Control Types

Docs

The type of control used to modify a column value can be controlled using the ControlType method. The sample also demonstrates use of the Placeholder and Annotation column methods to help the user provide input values

Razor
                                
                                        
DbNetEditCore inputTypesEdit = new DbNetEditCore("dbnetsuitecore", "inputtypes");
inputTypesEdit.Insert = true;
inputTypesEdit.Delete = true;
inputTypesEdit.ValidationMessageType = ValidationMessageType.Application;
inputTypesEdit.LayoutColumns = 2;

inputTypesEdit.Column("Id").Hidden();

inputTypesEdit.Column("Range").
    ControlType(EditControlType.Range).
    Validation(new InputValidation(0, 100, 10)).
    Annotation("This Range type uses a slider to set a numeric value and can be given minimum and maximum values along with an increment");

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}"));

inputTypesEdit.Column("Email").
    ControlType(EditControlType.Email).
    Size(40).
    Annotation("The Email type automatically validates the input to ensure it is a valid email address");

inputTypesEdit.Column("Url").
    ControlType(EditControlType.Url).
    Size(40).
    Annotation("Like the Email type Url type automatically validates the input to ensure it is a valid url");

inputTypesEdit.Column("AppointmentDate").
    ControlType(EditControlType.Date).
    DataType(typeof(DateTime)).
    Annotation("You can use the native data picker and validation by setting the control type to Date");

inputTypesEdit.Column("AppointmentTime").
    ControlType(EditControlType.Time).
    DataType(typeof(TimeSpan)).
    Annotation("The Time control type can be used to manage the input of time values");

inputTypesEdit.Column("WeekNumber").
    ControlType(EditControlType.Week).
    Annotation("The Week control type can be used to manage the input of week number values");

inputTypesEdit.Column("Month").
    ControlType(EditControlType.Month).
    Annotation("The Month control type can be used to manage the input of year/month values");

inputTypesEdit.Column("ExpiryDateTime").
    ControlType(EditControlType.DateTime).
    Annotation("The Month control type can be used to manage the input of date/time values");

inputTypesEdit.Column("Colour").
    ControlType(EditControlType.Color).
    Validation(new InputValidation(true)).
    Annotation("The Color control type includes a color picker and stores the value as a 6 characater hex code");

inputTypesEdit.Column("Password").
    ControlType(EditControlType.Password).
    Validation(new InputValidation(true) {MinLength = 8, MaxLength = 16}).
    Annotation("The Password control type hides the text entered by the user");

inputTypesEdit.Column("Quantity").
    ControlType(EditControlType.Number).
    Annotation("The Number control type restricts entry to numeric values only and can be further validated using max, min and step constraints");

@inputTypesEdit.Render()