General Components Extra List Editors Card Getting Started

CardListEditor. Getting Started

In this lesson, you will learn, how to start applying the ASPxCardListEditor to display a collection of objects within the List View. Firstly, you need to implement business classes for the demonstration, and add the card template and css file to the project. Then you can use the ASPxCardListEditor to display data. Do the following steps.

Prepare the data to be displayed. We suggest that you use CardListEditorObject class for the example. Add a new DevExpress XAF Domain Object to the Module Project, name it CardListEditorObject, and replace the automatically generated CardListEditorObject.cs file content with the following code.

[DomainComponent, DefaultClassOptions]
public class CardListEditorObject : BaseObject
{
  public CardListEditorObject(Session session)
    : base(session)
  {
  }
  public String Title
  {
    get
    {
      return GetPropertyValue<String>("Title");
    }
    set
    {
      SetPropertyValue("Title", value);
    }
  }
  public String Description
  {
    get
    {
      return GetPropertyValue<String>("Director");
    }
    set
    {
      SetPropertyValue("Director", value);
    }
  }
  [Size(SizeAttribute.Unlimited), ValueConverter(typeof(ImageValueConverter))]
  public Image Cover
  {
    get
    {
      return GetPropertyValue<Image>("Cover");
    }
    set
    {
      SetPropertyValue("Cover", value);
    }
  }
}

<DomainComponent, DefaultClassOptions> _
Public Class CardListEditorObject
  Inherits BaseObject
  Public Sub New(ByVal session As Session)
    MyBase.New(session)
  End Sub
  Public Property Title As String
    Get
      Return GetPropertyValue(Of String)("Title")
    End Get
    Set
      SetPropertyValue("Title", value)
    End Set
  End Property
  Public Property Description As String
    Get
      Return GetPropertyValue(Of String)("Director")
    End Get
    Set
      SetPropertyValue("Director", value)
    End Set
  End Property
  <Size(SizeAttribute.Unlimited), ValueConverter(GetType(ImageValueConverter))> _
Public Property Cover As Image
    Get
      Return GetPropertyValue(Of Image)("Cover")
    End Get
    Set
      SetPropertyValue("Cover", value)
    End Set
  End Property
End Class

Run the application. The CardListEditorObject_ListView, which displays objects using the standart GridListEditor, is shown in the figure below.

cardlisteditor_2

Create card template. The template is an ascx Web User Control derived from CardListEditorTemplateBase class. In this topic, to display Title, Description, and Cover properties, a ready-made template is supplied.
Add base template to Web Application Project, name it CardListEditorTemplateBase and implement ICardTemplate interface. Use code snippet below:

public partial class CardListEditorTemplateBase : UserControl, ICardTemplate
{
  internal ASPxCardListEditorControl Control { get; set; }
  internal Object CurrentObject { get; set; }
  internal IModelCardListEditor Model { get; set; }
  internal XafCallbackManager CallbackManager
  {
    get
    {
      return Page != null ? ((ICallbackManagerHolder)Page).CallbackManager : null;
    }
  }
  protected int CustomImageWidth { get; set; }
  protected int CustomImageHeight { get; set; }
  protected int Count { get; set; }
  protected int CurrentObjectID { get; set; }
  protected Position PositionOnPage { get; set; }
  protected IMemberInfo KeyMember;
  public void SetupCurrentObject(object control, object currentObject, int currentObjectID, int count, Position positionOnPage, IMemberInfo keyMember)
  {
    Control = (ASPxCardListEditorControl)control;
    CurrentObject = currentObject;
    CurrentObjectID = currentObjectID;
    Count = count;
    PositionOnPage = positionOnPage;
    Model = Control.CardListViewModel;
    KeyMember = keyMember;
  }
  protected string GetImageUrl(Image image)
  {
    return image == null ? string.Empty : ImageResourceHttpHandler.GetWebResourceUrl("IC_" + WebImageHelper.GetImageHash(image));
  }
  protected string GetOnclickScript()
  {
    return CallbackManager != null ? CallbackManager.GetScript(Control.UniqueID, string.Format("'{0}'", KeyMember.GetValue(CurrentObject))) : String.Empty;
  }
  protected byte[] GetImageByteArray(Image image)
  {
    var ms = new MemoryStream();
    if (image != null)
    {
      image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
    }
    return ms.ToArray();
  }
  protected T GetCurrentObject<T>()
  {
    return (T)CurrentObject;
  }
}
enum LeadingProperty
{
  Width,
  Height,
  Unassigned
}

Public Partial Class CardListEditorTemplateBase
  Inherits UserControl
  Implements ICardTemplate
  Friend Property Control As ASPxCardListEditorControl
  Friend Property CurrentObject As Object
  Friend Property Model As IModelCardListEditor
  Friend ReadOnly Property CallbackManager As XafCallbackManager
    Get
      Return If(Page IsNot Nothing, CType(Page, ICallbackManagerHolder).CallbackManager, Nothing)
    End Get
  End Property
  Protected Property CustomImageWidth As Integer
  Protected Property CustomImageHeight As Integer
  Protected Property Count As Integer
  Protected Property CurrentObjectID As Integer
  Protected Property PositionOnPage As Position
  Protected KeyMember As IMemberInfo
  Public Sub SetupCurrentObject(ByVal control As Object, ByVal currentObject As Object, ByVal currentObjectID As Integer, ByVal count As Integer, ByVal positionOnPage As Position, ByVal keyMember As IMemberInfo)
    Control = CType(control, ASPxCardListEditorControl)
    Me.CurrentObject = currentObject
    Me.CurrentObjectID = currentObjectID
    Me.Count = count
    Me.PositionOnPage = positionOnPage
    Model = Control.CardListViewModel
    Me.KeyMember = keyMember
  End Sub
  Protected Function GetImageUrl(ByVal image As Image) As String
    Return If(image Is Nothing, String.Empty, ImageResourceHttpHandler.GetWebResourceUrl("IC_" + WebImageHelper.GetImageHash(image)))
  End Function
  Protected Function GetOnclickScript() As String
    Return If(CallbackManager IsNot Nothing, CallbackManager.GetScript(Control.UniqueID, String.Format("'{0}'", KeyMember.GetValue(CurrentObject))), [String].Empty)
  End Function
  Protected Function GetImageByteArray(ByVal image As Image) As Byte()
    Dim ms = New MemoryStream()
    If image IsNot Nothing Then
      image.Save(ms, System.Drawing.Imaging.ImageFormat.Png)
    End If
    Return ms.ToArray()
  End Function
  Protected Function GetCurrentObject(Of T)() As T
    Return CType(CurrentObject, T)
  End Function
End Class
Friend Enum LeadingProperty
  Width
  Height
  Unassigned
End Enum

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

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="Simple_XAF_Application.Web.WebUserControl1" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.ExpressApp.Web.Layout" Assembly="DevExpress.ExpressApp.Web.v13.2, Version=13.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>
<%@ Register TagPrefix="asp" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.v13.2, Version=13.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>
<dx:CustomPanel ID="panel" runat="server">
     <asp:ASPxBinaryImage ID="imageControl" runat="server" Width="150"></asp:ASPxBinaryImage>
     <br/>
     <asp:Label ID="lblTitle" runat="server" Font-Size="17px" />
     <br/>
     <asp:Label ID="lblDirector" runat="server" Font-Size="13px" />
     <br/>
     <br/>
</dx:CustomPanel>

Note:

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 in the CardListEditorTemplateBase class descendant. You also need to set the relation between the template controls and the CardListEditorObject class properties. We suggest that you implement these operations in the CardTemplate.ascx.cs file. Open the CardTemplate.ascx.cs file and modify the class definition and the Page_Load method. Use the following code.

public partial class CardTemplate : CardListEditorTemplateBase
{
  //...
  protected void Page_Load(object sender, EventArgs e)
  {
    lblTitle.Text = (GetCurrentObject<CardListEditorObject>()).Title;
    lblDirector.Text = (GetCurrentObject<CardListEditorObject>()).Director;
    imageControl.Value = GetImageByteArray((GetCurrentObject<CardListEditorObject>()).Cover);
    panel.Attributes.Add("onclick", GetOnclickScript());
  }
  //...
}

Public Partial Class CardTemplate
  Inherits CardListEditorTemplateBase
  '...
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    lblTitle.Text = (GetCurrentObject(Of CardListEditorObject)()).Title
    lblDirector.Text = (GetCurrentObject(Of CardListEditorObject)()).Director
    imageControl.Value = GetImageByteArray((GetCurrentObject(Of CardListEditorObject)()).Cover)
    panel.Attributes.Add("onclick", GetOnclickScript())
  End Sub
  '...
End Class

Note:

The possibility to open the card for view/edit/delete by clicking it was added to the panel element. This functionality can be activated for each card element separately.

the rowPanel css class is suggested for the card rows, and cardPanel class is suggested for each individual card. Define the styles in a separate file. Add a new Style Sheet to Web Application Project, name it CardStyles.css, and replace the automatically generated file content with the following code.

.rowPanel:before,
.rowPanel:after {
  display: table;
  content: "";
}
.rowPanel:after {
  clear: both;
}
.cardPanel {
     float:left;
}
.rowPanel {
     text-align:left;
}

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

Invoke the Model Editor. Navigate to the CardListEditorObject_ListView node. Set the CardTemplatePath property to "~\CardTemplate.ascx", set the PropertyEditorType property to "Xafari.Editors.Web.ASPxCardListEditor". The described settings are shown in the image below.

cardlisteditor_3

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

cardlisteditor_4

In this topic we have learned the simplest use of the ASPxCardListEditor. You can also see an example of using the ASPxCardListEditor in Feature Center application solution, installed with Xafari. Additional features of the ASPxCardListEditor are described in Design-Time Features topic.