Validate Card Data

Jun 16, 2022
3 minutes to read

This topic describes how to validate data in the ASPxCardView control.

Validate Cards

Handle the ASPxCardView.CardValidating event to validate cards on the server side. The card view raises this event when you call the ASPxCardView.DoCardValidation, UpdateEdit() methods or when a user clicks the “Update” button.

ASPX

aspx

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        ...
    </Columns>
</dx:ASPxCardView>

csharp

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    // Specifies an error message for an individual cell.
    foreach (CardViewColumn column in CardView.Columns) {
        CardViewColumn card = column as CardViewColumn;
        if (card == null) continue;
        if (e.NewValues[card.FieldName] == null)
            e.Errors[card] = "Value cannot be null.";
    }

    if (e.NewValues["ProductName"] != null &&
        e.NewValues["ProductName"].ToString().Length < 6) {
        e.Errors[(CardViewColumn)CardView.Columns["ProductName"]] = "Field value must be at least two characters long.";
    }

    // Specifies an error message for a card.
    if (e.Errors.Count > 0) e.CardError = "Please, fill all fields.";
}

Use the ASPxGridBehaviorSettings.EncodeErrorHtml option to specify whether the card view renders error text (e.CardError) as HTML or as text (without HTML tags).

ASPX

aspx

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        ...    
    </Columns>
    <SettingsBehavior EncodeErrorHtml="true" />
    ...
</dx:ASPxCardView>

csharp

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    ...
    if (e.Errors.Count > 0) e.CardError = "Please, <b>fill</b> all fields.";
}

You can use the HtmlCardPrepared event to find cards with invalid data and specify their style settings. In the following example, cards with invalid data are colored in red.

ASPX

aspx

<dx:ASPxCardView ID="CardView" runat="server" OnHtmlCardPrepared="CardView_HtmlCardPrepared" ...>
    <Columns>

        ...
    </Columns>
    ...
</dx:ASPxCardView>

csharp

protected void CardView_HtmlCardPrepared(object sender, ASPxCardViewHtmlCardPreparedEventArgs e)
{
    if (_your_condition_) {
        e.Card.ForeColor = System.Drawing.Color.Red;
    }
}

Validate Edit Cells

Use the following APIs to specify validation settings for individual edit cells.

The EditProperties.ValidationSettings property allows you to access to an edit cell’s validation settings. For example, a column editor’s ValidationSettings.RequiredField property specifies that an input field is required.
The Validation event fires when validation errors occur.

Custom Validation

Set the EnableCustomValidation property to true to show an error frame when you handle validation errors on any event except standard (Validation or CardValidating).

ASPX

aspx

<dx:ASPxCardView ID="CardView" runat="server" ...>
    <Columns>
        <dx:CardViewComboBoxColumn FieldName="CategoryID" Caption="Category Name">
            <PropertiesComboBox ClientInstanceName="category" ...>
                <ValidationSettings EnableCustomValidation="true" />
                <ClientSideEvents TextChanged="onChanged" />
            </PropertiesComboBox>
        </dx:CardViewComboBoxColumn>
        ...
    </Columns>
</dx:ASPxCardView>

function onChanged(s, e) {
    if (category.GetText() == 'Produce') {
        category.SetIsValid(false);
        category.SetErrorText('invalid value');
    }
}

Validate Data in Templates

Handle the CardValidating event to validate custom editor values in the edit form and edit item templates on the server side.

Edit Form Template

ASPX

aspx

<dx:ASPxCardView ID="ASPxCardView1" runat="server" onCardValidating="ASPxCardView1_CardValidating" >
    <Templates>
        <EditForm>
            <div>
                <dx:ASPxMemo ID="notesEditor" .../>
                <dx:ASPxButton ID="ASPxButton1" OnClick="ASPxButton1_Click" Text="Save changes" ...>
                </dx:ASPxButton>
            </div>
        </EditForm>
    </Templates>
    ...
</dx:ASPxCardView>

csharp

protected void ASPxCardView1_CardValidating(object sender, DevExpress.Web.ASPxCardViewDataValidationEventArgs e)
{
    ASPxMemo memo = ASPxCardView1.FindEditFormTemplateControl("notesEditor") as ASPxMemo;
    if (memo.Text == "")
        e.CardError = "Please, fill all fields.";
}
protected void ASPxButton1_Click(object sender, EventArgs e)
{
    ASPxCardView1.UpdateEdit();
}

Edit Item Template

csharp

protected void ASPxCardView1_CardValidating(object sender, DevExpress.Web.ASPxCardViewDataValidationEventArgs e)
{
    ASPxMemo memo = ASPxCardView1.FindEditFormLayoutItemTemplateControl("notesEditor") as ASPxMemo;
    if (memo.Text == "")
        e.CardError = "Please, fill notes.";
}

ASPX

aspx

<dx:ASPxCardView ID="ASPxCardView1" runat="server" onCardValidating="ASPxCardView1_CardValidating" >
    <Columns>
        <dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0">
            <EditItemTemplate>
                <dx:ASPxMemo ID="notesEditor" Text='<%# Bind("ProductName") %>' ... />
            </EditItemTemplate>
        </dx:CardViewTextColumn>
    </Columns>
    ...
</dx:ASPxCardView>