ASPx Card List Editor

Displays data in the form of a matrix, every object is shown as a card within a cell. The developer can customize the display of the field inside the card at its discretion. It is possible to customize the number of display options via the Model Editor. List Editor supports Web Editors Templates technology.

The following code snippet demonstrates CardListEditorObject business class for demonstration:

You can view the code used in this lesson in the Xafari.XtraEditors.Module | Editors| CardListEditorObject.cs file of the Xafari XtraEditors demo installed with the product.


Next, it is required to implement the Card List Editor template for displaying CardListEditorObject objects. You need to create Web User Control (.ascx file) which implements controls and layout to display CardListEditorObject class properties within the page.

Add a new Web User Control to the Web Application Project, name it Default, and replace the automatically generated Default.ascx file content with the following code:

Note the DevExpress.ExpressApp.Web and DevExpress.Web assemblies versions. You should reference the appropriate assembly for your version of DevExpress.

Then, you need to specify that template is CardListEditorTemplateBase class descendant. You also need to set the relation between the template controls and the CardListEditorObject class properties. Open Default.ascx.cs file and modify it as follows:

Add CSS classes for the card. Add a new Style Sheet to Web Application Project, name it elements_style.css, and replace the automatically generated file content with the following code

rowPanel CSS class is suggested for the card rows, and cardPanel class is suggested for each individual card.

Register the elements_style.css style file. Open Default.aspx file and add the respective record to the <head> section. Use the following code:

You can view the code used in this lesson in Xafari.XtraEditors.Web project of the Xafari XtraEditors.sln demo solution installed with product. The used files are listed below:

  • Templates|CardListEditorObject_ListView|Default.ascx
  • Stylesheets|elements_style.css

Once the template is ready, invoke the Model Editor. Navigate to the CardListEditorObject_ListView node. Set the PropertyEditorType property to Xafari.Editors.Web.ASPxCardListEditor.

Now you can build and run your applications, and see what they look like after these changes.

ASPx Card List Editor


ASPx Card List Editor exposes a number of additional properties for the flexible customization:

ASPx Card List Editor
  • CardHeight and CardWidth specify the card height and width. The default values are not preset. It is possible to use the saved card values in the template:

CustomImageHeight = int.Parse(Model.CardHeight);

  • CardsColumns and CardsRows specify the number of cards in the row and column. The default value is 3.
  • UsePager is a flag specifies whether to use the CardsRows value or not. If UsePager is false, then the CardsRows value is ignored, and all the elements of the list will be loaded. The default value is true.
  • CardTemplatePath specifies the location of the template, this property is required when using Web Editors Templates.