THEMES
THEME SETTINGS

Data Editors Overview

ListBox
Ana Trujillo
Giovanni Rovelli
Jaime Yorres
John Steel
ProgressBar
TrackBar
DropDownEdit
ComboBox
v
SpinEdit
+
-
DateEdit
v
TextBox
TimeEdit
+
-
ButtonEdit
...

RadioButtonList
ColorEdit
v

CheckBoxList
Memo
RadioButton
CheckBox
TokenBox
Captcha
Captcha image
Show another codeShow another code
Button
Submit
Calendar
<<<July 2017>>>
SunMonTueWedThuFriSat
262526272829301
272345678
289101112131415
2916171819202122
3023242526272829
31303112345
TodayClear
About the Data Editors

The DevExpress ASP.NET MVC Data Editors is a powerful collection of over 20 data edit and multi-purpose extensions available in both unbound and data-aware mode. The editors can be used for standalone data editing or within container extensions such as the GridView, TreeList, and FormLayout.

Within the code fragments below you can find how to add various editors to your project.

@Html.DevExpress().ListBox(settings => {
    settings.Name = "listBox1";
    settings.Width = Unit.Pixel(163);
    settings.Properties.Items.Add("Ana Trujillo");
    settings.Properties.Items.Add("Giovanni Rovelli");
    settings.Properties.Items.Add("Jaime Yorres");
    settings.Properties.Items.Add("John Steel");
    settings.SelectedIndex = 1;
}).GetHtml()

@Html.DevExpress().ProgressBar(settings => {
    settings.Name = "progressBar";
    settings.Properties.ShowPosition = true;
    settings.Position = 42;
}).GetHtml()

@Html.DevExpress().TrackBar(settings => {
    settings.Name = "trackBar";
    settings.Properties.MinValue = 0;
    settings.Properties.MaxValue = 50;
    settings.Properties.Step = 1;
    settings.PositionStart = 10;
    settings.Properties.ScalePosition =
      ScalePosition.LeftOrTop;
    settings.Properties.LargeTickInterval = 10;
}).GetHtml()

@Html.DevExpress().DropDownEdit(settings => {
    settings.Name = "dropDownEdit";
    settings.Properties.NullText = "Text area";
    settings.SetDropDownWindowTemplateContent("<div style='padding: 10px 0 10px 3px'>Dropdown content</div>");
}).GetHtml()

@Html.DevExpress().ComboBox(settings => {
    settings.Name = "comboBox";
    settings.Properties.Items.Add("Ana Trujillo");
    settings.Properties.Items.Add("Giovanni Rovelli");
    settings.Properties.Items.Add("Jaime Yorres");
    settings.Properties.Items.Add("John Steel");
    settings.SelectedIndex = 2;
}).GetHtml()

@Html.DevExpress().SpinEdit(settings => {
    settings.Name = "spinEdit";
    settings.Properties.NumberFormat =
      SpinEditNumberFormat.Number;
    settings.Properties.Increment = 100;
    settings.Properties.MinValue = 0;
    settings.Properties.MaxValue = 10000;
    settings.Number = 100;
}).GetHtml()

@Html.DevExpress().DateEdit(settings => {
    settings.Name = "dateEdit";
    settings.Properties.EditFormat = EditFormat.Custom;
    settings.Date = new DateTime(2009, 11, 2, 9, 23, 0);
    settings.Properties.TimeSectionProperties.
      TimeEditProperties.EditFormatString = "hh:mm tt";
}).GetHtml()

@Html.DevExpress().TextBox(settings => {
    settings.Name = "textBox";
    settings.Text = "123456";
    settings.Properties.DisplayFormatString = "[ 00 - 00 - 00 ]";
}).GetHtml()

@Html.DevExpress().ColorEdit(settings => {
    settings.Name = "colorEdit";
    settings.Color = Color.FromArgb(255, 153, 0);
}).GetHtml()

@Html.DevExpress().TimeEdit(settings => {
    settings.Name = "timeEdit";
    settings.DateTime = new DateTime(2009, 11, 01, 15, 31, 34);
    settings.Properties.ValidationSettings.ErrorDisplayMode =
      ErrorDisplayMode.None;
}).GetHtml()

@Html.DevExpress().ButtonEdit(settings => {
    settings.Name = "buttonEdit";
    settings.Text = "Andy McKee - Rylynn";
    settings.Properties.Buttons.Add();
}).GetHtml()

@Html.DevExpress().RadioButtonList(settings => {
    settings.Name = "radioButtonList";
    settings.Properties.RepeatDirection =
      RepeatDirection.Horizontal;
    settings.Properties.Items.Add("MVC").Selected = true;
    settings.Properties.Items.Add("WPF");
}).GetHtml()

@Html.DevExpress().CheckBoxList(settings => {
    settings.Name = "checkBoxList";
    settings.Properties.RepeatDirection =
      RepeatDirection.Horizontal;
    settings.Properties.Items.Add("Wi-Fi").Selected = true;
    settings.Properties.Items.Add("3G");
}).GetHtml()

@Html.DevExpress().RadioButton(settings => {
    settings.Name = "radioButton";
    settings.Text = "Click to change state";
}).GetHtml()

@Html.DevExpress().CheckBox(settings => {
    settings.Name = "checkBox";
    settings.Text = "Click to change state";
}).GetHtml()

@Html.DevExpress().Memo(settings => {
    settings.Name = "memo";
    settings.Text = "Confections - Desserts, candies, and sweet breads.";
}).GetHtml()

@Html.DevExpress().Captcha(settings => {
    settings.Name = "captcha";
    settings.CallbackRouteValues = new {
      Controller = "Overview", Action = "CaptchaPartial"
    };
    settings.CodeLength = 7;
    settings.TextBox.Position =
     DevExpress.Web.Captcha.ControlPosition.Bottom;
    settings.ValidationSettings.ErrorText = "The code is incorrect";
}).GetHtml()

@Html.DevExpress().Calendar(settings => {
    settings.Name = "calendar";
    settings.Properties.ShowClearButton = true;
    settings.Properties.ShowDayHeaders = true;
    settings.Properties.ShowHeader = true;
    settings.Properties.ShowTodayButton = true;
    settings.Properties.ShowWeekNumbers = true;
}).GetHtml()

@Html.DevExpress().Button(settings => {
    settings.Name = "button";
    settings.Text = "Submit";
    settings.UseSubmitBehavior = true;
}).GetHtml()

@Html.DevExpress().TokenBox(settings => {
    settings.Name = "tokenBox";
    settings.Properties.IncrementalFilteringMode =
      IncrementalFilteringMode.Contains;
    settings.Properties.NullText = "Type Jaime";
    settings.Properties.Items.Add("Ana Trujillo");
    settings.Properties.Items.Add("Giovanni Rovelli");
    settings.Properties.Items.Add("Jaime Yorres");
    settings.Properties.Items.Add("John Steel");
}).GetHtml()

Key Features
  • Advanced Masked Input
    Data Editors make data entry validation simple with support for masked input.
  • Display Value Formatting
    Editor display values can be formatted using standard formatting mechanisms and you can display input watermarks for editors with blank values.
  • Built-in Validation Engine
    With a few option settings, you can enable built-in data input validation. Automatic client and server-side validations are supported. The editors provide two built-in error indication options including error frames and error icons.
  • Help Text
    Data Editors can render the Help Text - a brief description of the purpose of the editor.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for DevExpress ASP.NET MVC Data Editors. This functionality, coupled with the ability to handle a rich set of client events, allows you to maintain total control over behavior on the client side.
Version: v2017 vol 1.4
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.