Angular CardView Properties

| undefined

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

activeStateEnabled

Specifies whether the UI component changes its visual state as a result of user interaction.

Type:

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

allowColumnReordering

Specifies whether a user can reorder columns.

Type:

Default Value: false

This property reorders header panel items.

cardContentTemplate

Specifies a custom template for card content.

Type:

Template Data:

CardTemplateData

The card's data.

jQuery

index.js

$('#card-view').dxCardView({
    // ...
    cardContentTemplate: (info) => {
        return createVehicleCardContent(info.card);
    },
})

const createVehicleCardContent = (card) => {
    const { TrademarkName, Name, CategoryName } = card.data;

    const name = `${TrademarkName} ${Name}`;
    const priceText = card.fields.find(f => f.column.dataField === 'Price')?.text;

    return $('<div>').append(
        $('<div>').text(name).attr('title', name),
        $('<div>').text(priceText),
        $('<div>').text(CategoryName)
    )
};

Angular

app.component.html

app.component.ts

<dx-card-view ...
    cardContentTemplate="vehicleCardContentTemplate"
>
    <div *dxTemplate="let model of 'vehicleCardContentTemplate'">
        <ng-container *ngIf="model.card?.data as data">
            <div>
                <div title="{{ data.trademarkName + ' ' + data.Name }}">
                    {{ data.TrademarkName + ' ' + data.Name }}
                </div>
                <div>{{ getFormattedPrice(model.card) }}</div>
                <div>{{ data.CategoryName }}</div>
            </div>
        </ng-container>
    </div>
</dx-card-view>

import { CardInfo } from 'devextreme-angular/ui/card-view';

// ...
export class AppComponent {
    getFormattedPrice(card: CardInfo): string {
        const priceText = card.fields.find(f => f?.column?.dataField === 'Price');
        return priceText?.text ?? '';
    }
}

Vue

App.vue

<template>
    <DxCardView ...
        card-content-template="vehicleCardContentTemplate"
    >
        <template #vehicleCardContentTemplate="{ data: { card } }">
            <div>
                <div :title="`${card.data.TrademarkName} ${card.data.Name}`">
                    {{ card.data.TrademarkName + ' ' + card.data.Name }}
                </div>
                <div>{{ card.fields?.find(f => f.column?.dataField === 'Price')?.text }}</div>
                <div>{{ card.data.CategoryName }}</div>
            </div>
        </template>
    </DxCardView>
</template>

React

App.tsx

import CardView, { CardViewTypes } from "devextreme-react/card-view"

// ...
function vehicleCardContentRender(model: CardViewTypes.CardTemplateData) {
    const { TrademarkName, Name, CategoryName } = model.card.data;
    const name = `${TrademarkName} ${Name}`;
    const price = model.card.fields.find(f => f.column.dataField === 'Price')?.text;

    return (
        <div>
            <div title={name}>{name}</div>
            <div>{price}</div>
            <div>{CategoryName}</div>
        </div>
    )
}

function App() {
    return (
        <CardView ...
            cardContentRender={vehicleCardContentRender}
        >
        </CardView>
    )
}

cardCover

Configures the card cover.

Selector: dxo-card-cover

Type:

CardCover

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    cardCover: {
        imageExpr: (data) => data.imgUrl,
        altExpr: (data) => data.imgAlt,
        aspectRatio: 3.5,
        maxHeight: 200,
    }
})

Angular

app.component.html

app.component.ts

<dx-card-view ... >
    <dxo-card-view-card-cover
        imageExpr="imgUrlExpr"
        altExpr="imgAltExpr"
        aspectRatio="3.5"
        maxHeight="200"
    ></dxo-card-view-card-cover>
</dx-card-view>

// ...
export class AppComponent {
    imgUrlExpr(data: Employee): string {
        return data.imgUrl;
    }
    imgAltExpr(data: Employee): string {
        return data.imgAlt;
    }
}

Vue

App.vue

<template>
    <DxCardView ... >
        <DxCardCover
            image-expr="imgUrlExpr"
            alt-expr="imgAltExpr"
            aspect-ratio="3.5"
            max-height="200"
        />
    </DxCardView>
</template>

<script setup lang="ts">
import DxCardView, { DxCardCover } from 'devextreme-vue/card-view';

function imgUrlExpr(data: Employee): string {
    return data.imgUrl;
}
function imgAltExpr(data: Employee): string {
    return data.imgAlt;
}
</script>

React

App.ts

import CardView, { CardCover } from 'devextreme-react/card-view';

function imgUrlExpr(data: Employee): string {
    return data.imgUrl;
}
function imgAltExpr(data: Employee): string {
    return data.imgAlt;
}

function App() {
    return (
        <CardView ... >
            <CardCover
                imageExpr="imgUrlExpr"
                altExpr="imgAltExpr"
                aspectRatio="3.5"
                maxHeight="200"
            />
        </CardView>
    )
}

cardFooterTemplate

Specifies a custom template for a card footer.

Type:

Template Data:

CardTemplateData

The card's data.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    cardFooterTemplate() {
        return $('<div>').dxButton({
            text: 'Click',
            onClick() {
                // Implement custom logic here
            }
        })
    },
})

Angular

app.component.html

<dx-card-view ... 
    cardFooterTemplate="footerTemplate"
>
    <div *dxTemplate="let params of 'footerTemplate'">
        <dx-button
            text="Click"
            (onClick)="handleOnClick()" // Implement custom logic here
        ></dx-button>
    </div>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ...
        card-footer-template="footerTemplate"
    >
        <template #footerTemplate="{ data }">
            <DxButton
                text="Click"
                @click="handleOnClick" // Implement custom logic here
            />
        </template>
    </DxCardView>
</template>

<script setup lang="ts">
import DxCardView from 'devextreme-vue/card-view';
import DxButton from 'devextreme-vue/button';
</script>

React

App.ts

import CardView from 'devextreme-react/card-view';
import Button from 'devextreme-react/button';

function CardFooterTemplate() {
    return (
        <Button
            text="Click"
            onClick={handleOnClick} // Implement custom logic here
        />
    )
}

function App() {
    return (
        <CardView ... 
            cardContentRender={CardFooterTemplate}
        />
    )
}

cardHeader

Configures the card header.

Selector: dxo-card-header

Type:

CardHeader

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    cardHeader: {
        visible: true,
        template: (data, container) => {
            const text = data.card.data.Task_Subject;
            $(container).addClass('task__header-container');
            return $('<div>')
                .addClass('task__header')
                .attr('title', text)
                .text(text);
        },
    },
})

Angular

app.component.html

card-header.component.html

<dx-card-view>
    <dxo-card-view-card-header 
        [visible]="true" 
        template="headerTemplate"
    >
    </dxo-card-view-card-header>
    <div *dxTemplate="let model of 'headerTemplate'">
        <card-header [text]="model.card.data.Task_Subject" />
    </div>
</dx-card-view>

<div class="header" [title]="text">
    {{ text }}
</div>

Vue

App.vue

HeaderTemplate.vue

<template>
    <DxCardView>
        <DxCardHeader
            :visible="true"
            template="headerTemplate"
        />
        <template #headerTemplate="{
            data: {
                card: {
                        data: task,
                    }
                }
            }">
            <HeaderTemplate :text="task.Task_Subject"/>
        </template>
    </DxCardView>
</template>

<script setup lang="ts">
import DxCardView, { DxCardHeader } from 'devextreme-vue/card-view';
</script>

<template>
    <div className="task__header" :title="text">
        {{ text }}
    </div>
</template>

<script setup lang="ts">
defineProps<{
    text: string,
}>();
</script>

React

App.tsx

import CardView, { CardHeader ) from 'devextreme-react/card-view';

function App() {
    return (
        <CardView>
            <CardHeader
                visible={true}
                render={
                    (model) => <HeaderTemplate text={((model.card.data) as Task).Task_Subject} />
                }
            />
        </CardView>
    )
}

<!-- HeaderTemplate.tsx -->
import React from 'react';

interface HeaderTemplateProps {
    text: string;
}

const HeaderTemplate = ({ text }: HeaderTemplateProps) => {
    return (
        <div className="task__header" title={text}>
            {text}
        </div>
    );
}

export default HeaderTemplate;

cardMaxWidth

Specifies the maximum width of the card.

Type:

cardMinWidth

Specifies the minimum width of the card.

Type:

cardsPerRow

Specifies the number of cards per row.

Type:

|

Mode

cardTemplate

Specifies a custom template for the card.

Type:

Template Data:

CardTemplateData

The card's data.

jQuery

index.js

$('#card-view').dxCardView({
    // ...
    cardTemplate: (info) => {
        return createVehicleCard(info.card);
    },
})

const createVehicleCard = (card) => {
    const { TrademarkName, Name, CategoryName, ID } = card.data;

    const cardEl = $('<div>');

    const name = `${TrademarkName} ${Name}`;
    const priceText = card.fields.find(f => f.column.dataField === 'Price')?.text;

    const vehicleInfo = $('<div>').append(
            $('<div>').text(name).attr('title', name),
            $('<div>').text(priceText),
            $('<div>').text(CategoryName)
        )

    const imageWrapper = $('<div>').append(
            $('<img>').attr({
                    src: `images/vehicles/image_${ID}.png`,
                    alt: name,
                })
    );

    cardEl.append(imageWrapper, vehicleInfo);

    return cardEl;
};

Angular

app.component.html

app.component.ts

<dx-card-view ...
    cardTemplate="vehicleCardTemplate"
>
    <div *dxTemplate="let model of 'vehicleCardTemplate'">
        <ng-container *ngIf="model.card?.data as data">
            <div>
                <img
                    src="images/vehicles/image_{{ data.ID }}.png"
                    alt="{{ data.trademarkName + ' ' + data.Name }}"
                />
            </div>
            <div>
                <div title="{{ data.trademarkName + ' ' + data.Name }}">
                    {{ data.TrademarkName + ' ' + data.Name }}
                </div>
                <div>{{ getFormattedPrice(model.card) }}</div>
                <div>{{ data.CategoryName }}</div>
            </div>
        </ng-container>
    </div>
</dx-card-view>

import { CardInfo } from 'devextreme-angular/ui/card-view';

// ...
export class AppComponent {
    getFormattedPrice(card: CardInfo): string {
        const priceText = card.fields.find(f => f?.column?.dataField === 'Price');
        return priceText?.text ?? '';
    }
}

Vue

App.vue

<template>
    <DxCardView ...
        card-template="vehicleCardTemplate"
    >
        <template #vehicleCardTemplate="{ data: { card } }">
            <div>
                <div>
                    <img
                        :src="`images/vehicles/image_${card.data.ID}.png`"
                        :alt="`${card.data.TrademarkName} ${card.data.Name}`"
                    >
                </div>
                <div>
                    <div :title="`${card.data.TrademarkName} ${card.data.Name}`">
                        {{ card.data.TrademarkName + ' ' + card.data.Name }}
                    </div>
                    <div>{{ card.fields?.find(f => f.column?.dataField === 'Price')?.text }}</div>
                    <div>{{ card.data.CategoryName }}</div>
                </div>
            </div>
        </template>
    </DxCardView>
</template>

React

App.tsx

import CardView, { CardViewTypes } from "devextreme-react/card-view"

// ...
function vehicleCardRender(model: CardViewTypes.CardTemplateData) {
    const { TrademarkName, Name, CategoryName, ID } = model.card.data;
    const name = `${TrademarkName} ${Name}`;
    const price = model.card.fields.find(f => f.column.dataField === 'Price')?.text;

    return (
        <div>
            <div>
                <img
                    src={`images/vehicles/image_${ID}.png`}
                    alt={name}
                />
            </div>
            <div>
                <div title={name}>{name}</div>
                <div>{price}</div>
                <div>{CategoryName}</div>
            </div>
        </div>
    )
}

function App() {
    return (
        <CardView ...
            cardRender={vehicleCardRender}
        >
        </CardView>
    )
}

columnChooser

Configures the column chooser.

Selector: dxo-column-chooser

Type:

ColumnChooser

columns[]

An array of CardView columns.

Selector: dxi-column

Type:

Array<ColumnProperties | String>

CardView uses the concept of columns from DataGrid. While it has rows and columns, the columns appear as fields on each card. The header shows the column names, and each field on a card includes a caption that usually matches the column dataField, and a unique value specific to the card.

dataSource

Binds the UI component to data.

Type:

|

Array<any>

|

Store

|

DataSource

|

DataSource Configuration

Default Value: undefined

CardView works with collections of objects.

Depending on your data source, bind CardView to data as follows.

Data Array
Assign the array to the dataSource option and specify the keyExpr.
Read-Only Data in JSON Format
Set the dataSource property to the URL of a JSON file or service that returns JSON data.
OData
Implement an ODataStore. Make sure to specify the key.

Web API, PHP, MongoDB
Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

jQuery

JavaScript

$(function() {
    let serviceUrl = "https://url/to/my/service";
    $("#cardViewContainer").dxCardView({
        // ...
        dataSource: DevExpress.data.AspNet.createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    })
});

Angular

app.component.ts

app.component.html

app.module.ts

import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    store: CustomStore;
    constructor() {
        let serviceUrl = "https://url/to/my/service";
        this.store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    }
}

<dx-card-view ...
    [dataSource]="store">
</dx-card-view>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCardViewModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCardViewModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template> 
    <DxCardView ...
        :data-source="store" />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { DxCardView } from 'devextreme-vue/card-view';

export default {
    components: {
        DxCardView
    },
    data() {
        const serviceUrl = "https://url/to/my/service";
        const store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        });
        return {
            store
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import CardView from 'devextreme-react/card-view';

const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});

class App extends React.Component {
    render() {
        return (
            <CardView ...
                dataSource={store} />
        );
    }
}
export default App;

Any other data source
Implement a CustomStore.

Regardless of the data source on the input, the CardView always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

NOTE

Review the following notes about data binding:

Field names cannot be equal to this and should not contain the following characters: ., :, [, and ].
CardView does not execute dataSource.sort functions. To implement custom sorting logic, implement columns[].calculateSortValue.
If the CardView UI component gets data from a server, configure remoteOperations to notify the UI component about data operations the server performs.

jQuery

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Get and Set Properties.

Angular

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.

Vue

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.

React

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Controlled Mode.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

editing

Configures editing.

Selector: dxo-editing

Type:

dxCardViewEditing

The UI component can allow a user to add, update and delete data. To control which of these operations are allowed, use the allowAdding, allowUpdating and allowDeleting properties.

NOTE

Before allowing a user to add, update, and delete, make sure that your data source supports these actions.

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: dxo-element-attr

Type:

Default Value: {}

jQuery

$(function(){
    $("#cardViewContainer").dxCardView({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-card-view ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-card-view>

import { DxCardViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCardViewModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxCardView ...
        :element-attr="cardViewAttributes">
    </DxCardView>
</template>

<script>
import DxCardView from 'devextreme-vue/card-view';

export default {
    components: {
        DxCardView
    },
    data() {
        return {
            cardViewAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import CardView from 'devextreme-react/card-view';

class App extends React.Component {
    cardViewAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <CardView ...
                elementAttr={this.cardViewAttributes}>
            </CardView>
        );
    }
}
export default App;

errorRowEnabled

Indicates whether to show the error row.

Type:

Default Value: true

The error row displays data-related errors that may occur on the server during the UI component's runtime. Setting this property to false hides the error row, but the errors can still be viewed in the browser's console.

fieldHintEnabled

Displays a hint when the mouse hovers over truncated field content.

Type:

FilterBuilder Configuration

filterBuilder

Configures the filter builder.

Selector: dxo-filter-builder

Type:

filterBuilderPopup

Configures the integrated filter builder popup.

Selector: dxo-filter-builder-popup

Type:

Popup Configuration

See the Popup configuration for properties that you can specify in this object.

Angular

NOTE

The nested component that configures the filterBuilderPopup property does not support event bindings and two-way property bindings.

Vue

NOTE

The nested component that configures the filterBuilderPopup property does not support event bindings and two-way property bindings.

filterPanel

Configures the filter panel.

Selector: dxo-filter-panel

Type:

FilterPanel

filterValue

Specifies a filter expression.

Type:

Filter Expression

Default Value: null

Raised Events: onOptionChanged

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Default Value: false

headerFilter

Configures the header filter.

Selector: dxo-header-filter

Type:

HeaderFilter

headerPanel

Configures the header panel.

Selector: dxo-header-panel

Type:

HeaderPanel

height

Specifies the UI component's height.

Type:

|

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

| undefined

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its appearance when a user hovers over it.

Type:

Default Value: false

keyExpr

Specifies the key property (or properties) that supply key values to access data items. Each key value must be unique. This property applies only if data is a simple array.

Type:

|

Array<String>

Default Value: undefined

loadPanel

Configures the load panel.

Selector: dxo-load-panel

Type: dxLoadPanel_Options

The load panel is displayed while the UI component loads data. It consists of a loading indicator and text, both placed on a pane.

Since the load panel is, in fact, the DevExtreme LoadPanel UI component, the loadPanel object can contain any properties of this UI component.

noDataTemplate

Specifies a custom template to be displayed when no data appears in CardView.

Type:

Template Data:

Name	Type	Description
text	String	The "No data" text.

noDataText

Specifies a text string to display when no data appears in CardView.

Type:

Default Value: 'No data'

onCardClick

A function that is executed when a card is clicked or tapped.

Type:

Function parameters:

e:

CardClickEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	CardInfo	The card properties.
cardElement	HTMLElement \| jQuery	The card's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.

onCardDblClick

A function that is executed when a card is double-clicked or double-tapped.

Type:

Function parameters:

e:

CardDblClickEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	CardInfo	The card properties.
cardElement	HTMLElement \| jQuery	The card's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.

onCardHoverChanged

A function that is executed after the pointer enters or leaves a card.

Type:

Function parameters:

e:

CardHoverChangedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	CardInfo	The card properties.
cardElement	HTMLElement \| jQuery	The card's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
eventType	String	Indicates whether the pointer entered or left the card. Can be either "mouseover" or "mouseout".

onCardInserted

A function that is executed after a new card is inserted into the data source.

Type:

Function parameters:

e:

CardInsertedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
data	Object	The data of the card.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onCardInserting

A function that is executed before a new card is inserted into the data source.

Type:

Function parameters:

e:

CardInsertingEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	`true`, a Promise resolved with `true`, or a rejected Promise stops card insertion. `false` or a Promise resolved with `false` or `undefined` continues card insertion.
component	CardView	The UI component's instance.
data	Object	The data of the card that should be inserted.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onCardPrepared

A function that is executed after a card is created.

Type:

Function parameters:

e:

CardPreparedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	CardInfo	The card properties.
cardElement	HTMLElement \| jQuery	The card's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onCardRemoved

A function that is executed after a card was removed from the data source.

Type:

Function parameters:

e:

CardRemovedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
data	any	The card data.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The card's key. If no field specifies the keys in the data source, the entire data object acts as the key.

onCardRemoving

A function that is executed before a card is removed from the data source.

Type:

Function parameters:

e:

CardRemovingEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	`true`, a Promise resolved with `true`, or a rejected Promise stops card removal. `false` or a Promise resolved with `false` or `undefined` continues card removal.
component	CardView	The UI component's instance.
data	any	The data of the card that should be removed.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The card's key.

onCardSaved

A function that is executed after card changes are saved.

Type:

Function parameters:

e:

CardSavedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
changes	Array<DataChange>	All card data (including changes). Differs from onCardSaving, which only consists of pending changes.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onCardSaving

A function that is executed before pending card changes are saved.

Type:

Function parameters:

e:

CardSavingEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Set this field to `true` if the default saving logic should be disabled.
changes	Array<DataChange>	Pending row changes; a copy of the editing.changes array. Includes only card changes, unlike onCardSaved, which contains all card data (including changes).
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
promise	Promise<void> (jQuery or native)	Assign a Promise to this field to perform an asynchronous operation, such as a request to a server.

onCardUpdated

A function that is executed after a card is updated in the data source.

Type:

Function parameters:

e:

CardUpdatedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
data	any	The updated data of the card.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The card's key. If no field specifies the keys in the data source, the entire data object acts as the key.

onCardUpdating

A function that is executed before a card is updated in the data source.

Type:

Function parameters:

e:

CardUpdatingEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	`true`, a Promise resolved with `true`, or a rejected Promise stops card updating. `false` or a Promise resolved with `false` or `undefined` continues card updating.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The card's key.
newData	Object	The card's updated data.
oldData	any	The card's old data.

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Type:

Function parameters:

e:

EventInfo

Information about the event.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onContextMenuPreparing

A function that is executed before the context menu is rendered.

Type:

ContextMenuPreparingEvent

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	any	The card properties.
cardIndex	Number	The index of the card on which the context menu is invoked.
column	Column	This column's configuration.
columnIndex	Number	The index of the column on which the context menu is invoked.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
items	Array<any>	Items to be displayed in the context menu. Their structure is described in the items property description. Each item also contains the onItemClick event handler, which allows you to access the clicked or tapped item's data.
target	ContextMenuTarget	The name of the element on which the context menu is invoked: "headerPanel", "content", or "toolbar". This field is read-only.
targetElement	HTMLElement \| jQuery	The target element's container. It is an HTML Element or a jQuery Element when you use jQuery.

In the following code, the onContextMenuPreparing function adds a custom item to the context menu that is invoked when a user right-clicks any column header:

jQuery

index.js

$(function() {
    $("#cardViewContainer").dxCardView({
        // ...
        onContextMenuPreparing: function(e) { 
            if (e.target == "headerPanel") {
                // e.items can be undefined
                if (!e.items) e.items = [];

                // Add a custom menu item
                e.items.push({
                    text: "Log Column Caption",
                    onItemClick: function() {
                        console.log(e.column.caption);
                    }
                });
            } 
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-card-view ...
    (onContextMenuPreparing)="addMenuItems($event)">
</dx-card-view>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    addMenuItems(e) { 
        if (e.target == 'headerPanel') {
            // e.items can be undefined
            if (!e.items) e.items = [];

            // Add a custom menu item
            e.items.push({
                text: 'Log Column Caption',
                onItemClick: () => {
                    console.log(e.column.caption);
                }
            });
        } 
    }
}

Vue

App.vue

<template>
    <DxCardView ...
        @context-menu-preparing="addMenuItems">
    </DxCardView>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';

import DxCardView from 'devextreme-vue/card-view';

const addMenuItems = (e) => {
    if (e.target == 'headerPanel') {
        // e.items can be undefined
        if (!e.items) e.items = [];

        // Add a custom menu item
        e.items.push({
            text: 'Log Column Caption',
            onItemClick: () => {
                console.log(e.column.caption);
            }
        });
    } 
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView from 'devextreme-react/card-view';

const App = () => {
    const addMenuItems = (e) => {
        if (e.target == 'headerPanel') {
            // e.items can be undefined
            if (!e.items) e.items = [];

            // Add a custom menu item
            e.items.push({
                text: 'Log Column Caption',
                onItemClick: () => {
                    console.log(e.column.caption);
                }
            });
        }
    }
    return (
        <CardView ...
            onContextMenuPreparing={this.addMenuItems}>
        </CardView>
    );
}
export default App;

onDataErrorOccurred

A function that is executed when an error occurs in the data source.

Type:

Function parameters:

e:

Information on the occurred error.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
error	JavaScript Error Object	The standard Error object that defines the error.
model	any	Model data. Available only if you use Knockout.

Default Value: undefined

Handles errors that might occur in the data source. To obtain a human-readable description of the error in the function, use the error.message field.

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

EventInfo

Information about the event.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onEditCanceled

A function that is executed after card changes are discarded.

Type:

Function parameters:

e:

EditCanceledEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
changes	Array<DataChange>	Discarded card changes.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onEditCanceling

A function that is executed when the edit operation is canceled, but card changes are not yet discarded.

Type:

Function parameters:

e:

EditCancelingEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Set this field to `true` if the card changes should not be discarded.
changes	Array<DataChange>	Card changes to be discarded.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

An edit operation can be canceled from the UI (with the Cancel button) or programatically (with the cancelEditData() method).

onEditingStart

A function that is executed before a card switches to the editing state.

Type:

Function parameters:

e:

EditingStartEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel card editing.
component	CardView	The UI component's instance.
data	Object	The data of a card to be edited.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
key	any	The card's key. An added card not saved has the `undefined` key. Without a specified key field in the data source, the data object acts as the key.

onFieldCaptionClick

A function that is executed when a field caption is clicked or tapped.

Type:

Function parameters:

e:

FieldCaptionClickEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldCaptionElement	HTMLElement \| jQuery	The field caption's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFieldCaptionDblClick

A function that is executed when a field caption is double-clicked or double-tapped.

Type:

FieldCaptionDblClickEvent

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldCaptionElement	HTMLElement \| jQuery	The field caption's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFieldCaptionPrepared

A function that is executed after a field caption is created.

Type:

FieldCaptionPreparedEvent

Function parameters:

e:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldCaptionElement	HTMLElement \| jQuery	The field caption's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFieldValueClick

A function that is executed when a field value is clicked or tapped.

Type:

Function parameters:

e:

FieldValueClickEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldValueElement	HTMLElement \| jQuery	The field value's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFieldValueDblClick

A function that is executed when a field value is double-clicked or double-tapped.

Type:

Function parameters:

e:

FieldValueDblClickEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldValueElement	HTMLElement \| jQuery	The field value's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFieldValuePrepared

A function that is executed after a field value is created.

Type:

Function parameters:

e:

FieldValuePreparedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
field	dxCardViewFieldInfo	The field information.
fieldValueElement	HTMLElement \| jQuery	The field value's container. It is an HTML Element or a jQuery Element when you use jQuery.

onFocusedCardChanged

A function that is executed after the focused card changes.

Type:

Function parameters:

e:

FocusedCardChanged

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
card	CardInfo	The card properties.
cardElement	HTMLElement \| jQuery	The focused card's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

jQuery

Get a UI Component Instance

Angular

Get a UI Component Instance

Vue

Get a UI Component Instance

React

Get a UI Component Instance

onInitNewCard

A function that is executed before a new card is added to the UI component.

Type:

Function parameters:

e:

InitNewCardEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
data	Object	The data of the inserted card; initially empty.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
promise	Promise<void> (jQuery or native)	Assign a Promise to this field to perform an asynchronous operation, such as a request to a server.

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
model	any	Model data. Available only if you use Knockout.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	CardView	The UI component's instance.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value	any	The modified property's new value.
previousValue	any	The UI component's previous value.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#cardViewContainer").dxCardView({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-card-view ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-card-view>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxCardViewModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxCardViewModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxCardView ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxCardView from 'devextreme-vue/card-view'; 

export default { 
    components: { 
        DxCardView
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import CardView from 'devextreme-react/card-view'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <CardView ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

View on GitHub

onSelectionChanged

A function that is executed when a card is selected or its selection is cleared.

Type:

Function parameters:

e:

SelectionChangedEvent

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
component	CardView	The UI component's instance.
currentDeselectedCardKeys	Array<any>	The keys of the cards whose selection was cleared.
currentSelectedCardKeys	Array<any>	The keys of the cards that were selected.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
selectedCardKeys	Array<any>	The keys of all selected cards.
selectedCardsData	Array<any>	The data of all selected cards.

pager

Configures the pager.

Selector: dxo-pager

Type: Pager

The pager is an element that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        paging: {
            pageSize: 3,
        },
        pager: {
            showInfo: true,
            showNavigationButtons: true,
            showPageSizeSelector: true
        },
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-card-view-paging [pageSize]="3"></dxo-card-view-paging>
    <dxo-card-view-pager
        [showInfo]="true"
        [showNavigationButtons]="true"
        [showPageSizeSelector]="true"
    ></dxo-card-view-pager>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxPaging :page-size="3" />
        <DxPager
            :show-info="true"
            :show-navigation-buttons="true"
            :show-page-size-selector="true"
        />
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxPaging, DxPager } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { Paging, Pager } from 'devextreme-react/card-view';

function App() {
    return (
        <CardView ... >
            <Paging
                pageSize={3}
            />
            <Pager
                showInfo={true}
                showNavigationButtons={true}
                showPageSizeSelector={true}
            />
        </CardView>
    );
}

export default App;

paging

Configures paging.

Selector: dxo-paging

Type:

Paging

Paging allows the UI component to load data in portions instead of loading it simultaneously. To enable paging, set the paging.enabled property to true.

Users can switch between pages and change paging settings using the pager or they can scroll the pages. Paging settings apply with any scrolling mode.

remoteOperations

Notifies CardView of the server's data processing operations.

Selector: dxo-remote-operations

Type:

RemoteOperations

|

|

Mode

Default Value: 'auto'

Server-side data processing improves the UI component's performance on large datasets. When the server does not implement particular operations (and/or the corresponding remoteOperations fields are false) they are executed on the client. Note that the UI component may send queries to the server while executing a client-side operation.

NOTE

Paging, filtering, and sorting are performed on the server for the ODataStore, but you can change them to the client side by setting the corresponding remoteOperations fields to false. Other operations are always client-side.

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

scrolling

Configures scrolling.

Selector: dxo-scrolling

Type:

searchPanel

Configures the search panel.

Selector: dxo-search-panel

Type:

SearchPanel

selectedCardKeys

Allows you to select cards or determine which cards are selected.

Type:

Array<any>

Raised Events: onSelectionChanged

selection

Configures runtime selection.

Selector: dxo-selection

Type:

SelectionConfiguration

A user can select rows in a single or multiple mode. In multiple mode, a user can select all rows at once. To disable this feature, assign false to the allowSelectAll property.

sorting

Configures sorting.

Selector: dxo-sorting

Type:

Sorting

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

toolbar

Configures the toolbar.

Selector: dxo-toolbar

Type:

Toolbar

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

|

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

wordWrapEnabled

Specifies whether text that does not fit into a field should be wrapped.

Type: