Your search did not match any results.

Card View - Popup Editing

DevExtreme CardView allows users to edit data within a pop-up edit form. To start editing a card, click the Edit button within the card header (only one card can be edited at any point in time). The pop-up edit form can include any field from the component data source (the corresponding column does not need to be visible within the CardView - see the Notes field in this demo).

Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.PopupEditing.Employee> @(Html.DevExtreme().CardView<DevExtreme.NETCore.Demos.Models.CardView.PopupEditing.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"); 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); c.Add() .DataField("HireDate") .DataType(GridColumnDataType.Date); c.Add() .Caption("Position") .DataField("Title"); c.Add().DataField("Department"); c.Add().DataField("Address"); c.Add().DataField("MobilePhone"); c.Add().DataField("Email"); c.Add() .DataField("Notes") .Visible(false); c.Add() .DataField("FirstName") .Visible(false); c.Add() .DataField("LastName") .Visible(false); 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}`; } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; 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 PopupEditing() { return View(PopupEditingSampleData.Employees); } } }

To enable card editing, set the following editing properties to true:

CardView uses DevExtreme Form and Popup components to display the form and the popup. Default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the editing object's form and popup properties as demonstrated in this demo.