Search code examples
c#asp.netaspxgridviewaspx-user-control

Bind Image to CardViewBinaryImageColumn


I have a simple CardView:

  <dx:ASPxCardView ID="CardViewProfile" runat="server" KeyFieldName="Id" AutoGenerateColumns="false">
        <Columns>
            <dx:CardViewBinaryImageColumn FieldName="Photo">
                <PropertiesBinaryImage ImageHeight="175px">
                    <EditingSettings Enabled="true" UploadSettings-UploadValidationSettings-MaxFileSize="4194304" />
                </PropertiesBinaryImage>
            </dx:CardViewBinaryImageColumn>
            <dx:CardViewMemoColumn FieldName="Id" Caption="Codice Utente" ReadOnly="true"/>
            <dx:CardViewTextColumn FieldName="Name"/>
            <dx:CardViewTextColumn FieldName="Surname"/>

        </Columns>
        <CardLayoutProperties ColCount="3">
            <Items>
                <dx:CardViewColumnLayoutItem ColumnName="Photo" ShowCaption="False" ColSpan="1" RowSpan="4"/>
                <dx:CardViewColumnLayoutItem ColumnName="Id" />
                <dx:CardViewColumnLayoutItem ColumnName="Name" />
                <dx:CardViewColumnLayoutItem ColumnName="Surname" />
            </Items>
        </CardLayoutProperties>
    </dx:ASPxCardView>

And I bind it like this:

User user = DBContext.getUserByID(user_id);
List<User> datasource = new List<User>();
datasource.Add(user);

CardViewProfile.DataSource = datasource;
CardViewProfile.DataBind();

The object User contains: Id, Name, Surname and a Photo field containing a string representing the path of the picture on the server. How do I bind this picture to the CardViewBinaryImageColumn? Thank you.


Solution

  • <dx:CardViewBinaryImageColumn /> is used for showing images from binary data.

    If you want to display an image using a url, try replacing the column with the following:

     <dx:CardViewImageColumn FieldName="Photo" Caption="Photo" />
    

    Dev Express have an example: Deve https://demos.devexpress.com/ASPxCardViewDemos/Adaptivity/AdaptiveLayout.aspx?device=tablet&rotate=0