-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Reporting
-
AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
Card View - Data Validation
DevExtreme CardView allows you to validate user input as necessary. You can apply pre-defined validation rules or custom rules to individual columns.
Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.DataValidation.Employee>
@(Html.DevExtreme().CardView<DevExtreme.NETCore.Demos.Models.CardView.DataValidation.Employee>()
.ID("cardView")
.DataSource(Model, "ID")
.CardsPerRow(Mode.Auto)
.CardMinWidth(350)
.Height(840)
.CardCover(cc => {
cc
.ImageExpr(new JS("cardCoverImageExpr"))
.AltExpr(new JS("cardCoverAltExpr"));
})
.Editing(e => {
e
.AllowAdding(true)
.AllowUpdating(true)
.AllowDeleting(true)
.Popup(p => p
.Title("Employee Info")
.ShowTitle(true)
.Width(700)
.Height(525)
)
.Form(f => f.Items(items => {
items.AddGroup()
.Caption("Personal Data")
.ColCount(2)
.ColSpan(2)
.Items(groupItems => {
groupItems.AddSimple().DataField("FirstName");
groupItems.AddSimple().DataField("LastName");
groupItems.AddSimple().DataField("BirthDate");
groupItems.AddSimple().DataField("Picture");
});
items.AddGroup()
.Caption("Main Info")
.ColCount(2)
.ColSpan(2)
.Items(groupItems => {
groupItems.AddSimple().DataField("HireDate");
groupItems.AddSimple().DataField("Title");
groupItems.AddSimple().DataField("Department");
groupItems
.AddSimple().DataField("Notes")
.Editor(editor => editor.TextArea().Height(100));
});
items.AddGroup()
.Caption("Contacts")
.ColCount(2)
.ColSpan(2)
.Items(groupItems => {
groupItems
.AddSimple().DataField("Address")
.ColSpan(2);
groupItems.AddSimple().DataField("City");
groupItems.AddSimple().DataField("Zipcode");
groupItems
.AddSimple().DataField("MobilePhone")
.Editor(editor => editor.TextBox()
.Mask("+1 (000) 000-0000")
.UseMaskedValue(true)
);
groupItems.AddSimple().DataField("Email");
});
}));
})
.SearchPanel(sp => sp.Visible(true))
.Columns(c => {
c.Add()
.Caption("Full Name")
.CalculateFieldValue("calculateFullName");
c.Add()
.DataField("BirthDate")
.DataType(GridColumnDataType.Date)
.ValidationRules(
vr => vr.AddRequired()
);
c.Add()
.DataField("HireDate")
.DataType(GridColumnDataType.Date)
.ValidationRules(
vr => {
vr.AddRequired();
vr
.AddCustom()
.ValidationCallback("hireDateValidationCallback")
.Message("Hire date cannot be earlier than birth date");
}
);
c.Add()
.Caption("Position")
.DataField("Title")
.ValidationRules(
vr => vr.AddRequired()
);
c.Add().DataField("Department");
c.Add().DataField("Address");
c.Add().DataField("MobilePhone")
.ValidationRules(
vr => vr.AddRequired()
);
c.Add()
.DataField("Email")
.ValidationRules(
vr => {
vr.AddRequired();
vr.AddEmail();
vr
.AddAsync()
.ValidationCallback("emailValidationCallback")
.Message("Email address is not unique")
.IgnoreEmptyValue(true);
}
);
c.Add()
.DataField("Notes")
.Visible(false);
c.Add()
.DataField("FirstName")
.Visible(false)
.ValidationRules(
vr => vr.AddRequired()
);
c.Add()
.DataField("LastName")
.Visible(false)
.ValidationRules(
vr => vr.AddRequired()
);
c.Add()
.DataField("City")
.Visible(false);
c.Add()
.DataField("Zipcode")
.Visible(false);
c.Add()
.DataField("Picture")
.Visible(false);
})
)
<script>
function cardCoverImageExpr({ Picture }) {
return Picture && `@Url.Content("~/images/employees/new")/${Picture}`;
}
function cardCoverAltExpr({ FirstName, LastName }) {
return `Photo of ${FirstName} ${LastName}`;
}
function calculateFullName(data) {
return `${data.FirstName} ${data.LastName}`;
}
function hireDateValidationCallback(params) {
return new Date(params.value) > new Date(params.data.BirthDate);
}
function emailValidationCallback(params) {
return $.ajax({
url: 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
id: params.data.id,
email: params.value,
}),
});
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.CardView.ColumnChooser;
using DevExtreme.NETCore.Demos.Models.CardView.ColumnHeaderFilter;
using DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering;
using DevExtreme.NETCore.Demos.Models.CardView.DataValidation;
using DevExtreme.NETCore.Demos.Models.CardView.FilterPanel;
using DevExtreme.NETCore.Demos.Models.CardView.Overview;
using DevExtreme.NETCore.Demos.Models.CardView.PopupEditing;
using DevExtreme.NETCore.Demos.Models.CardView.SearchPanel;
using DevExtreme.NETCore.Demos.Models.CardView.Selection;
using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray;
using DevExtreme.NETCore.Demos.Models.CardView.Sorting;
using DevExtreme.NETCore.Demos.Models.SampleData;
namespace DevExtreme.NETCore.Demos.Controllers {
public class CardViewController : Controller {
public ActionResult DataValidation() {
return View(DataValidationSampleData.Employees);
}
}
}
In this demo, the following rules are used:
- required
Specifies that field values should not be empty. ThebirthDate
,hireDate
,title
,firstName
, andlastName
fields use required rule. - pattern
Specifies a pattern that field values should match. ThemobilePhone
field uses pattern rule. - email
Specifies that field values match the Email pattern. Theemail
field uses email rule. - async
Specifies custom validation parameters that are used to validate a value on the server. Theemail
field uses async rule. - custom
Specifies custom validation rules. This demo implements a custom rule to prevent users from settinghireDate
earlier thanbirthDate
.