Angular CardView - columns

Default Value: true

allowFiltering

Specifies whether data can be filtered by this column.

Type:

Default Value: true

allowHeaderFiltering

Specifies whether data of this column can be filtered in header filter. Inherits the value of the allowFiltering property.

Type:

Default Value: true

allowHiding

Specifies whether a user can hide the column using the column chooser at runtime. Applies only if columnChooser.enabled is true.

Type:

Default Value: true

allowReordering

Specifies whether users can reorder this column. Overrides the allowColumnReordering property value.

Type:

Default Value: true

allowSearch

Specifies whether this column can be searched. Applies only if searchPanel.visible is true. Inherits the value of the allowFiltering property.

Type:

Default Value: true

allowSorting

Specifies whether a user can sort rows by this column at runtime. Applies only if sorting.mode differs from "none".

Type:

Default Value: true

calculateDisplayValue

Calculates custom display values for column fields. Requires specifying the dataField or calculateFieldValue property.

Type:

Function parameters:

cardData:

The data of the card to which the field belongs.

Context:

The this keyword refers to the column's configuration.

Return Value: any

The value for the field to display.

This property accepts the name of the data source field that supplies display values or a function that combines display values. Specify this function only if all data processing operations are executed on the client.

jQuery

JavaScript

$(function() {
    $("#cardViewContainer").dxCardView({
        columns: [{
            dataField: "countryID", // supplies values for editing
            calculateDisplayValue: function (rowData) { // combines display values
                return rowData.capital + " (" + rowData.country + ")";
            }
        }]
    });
});

Angular

HTML

TypeScript

<dx-card-view ... >
    <dxi-card-view-column
        dataField="countryID" <!-- supplies values for editing -->
        [calculateDisplayValue]="getCountryWithCapital"> <!-- combines display values -->
    </dxi-card-view-column>
</dx-card-view>

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

Vue

App.vue

<template>
    <DxCardView>
        <DxColumn       
            data-field="countryID" <!-- supplies values for editing -->
            :calculate-display-value="getCountryWithCapital" <!-- combines display values -->
        />
    </DxCardView>
</template>

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

import DxCardView, {
    DxColumn 
} from 'devextreme-vue/card-view';

export default {
    components: {
        DxCardView,
        DxColumn 
    },
    methods: {
        getCountryWithCapital(rowData) {
            return rowData.capital + " (" + rowData.country + ")";
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    // ...

    render() {
        return (
            <CardView>
                <Column
                    dataField="countryID" <!-- supplies values for editing -->                 
                    calculateDisplayValue={this.getCountryWithCapital} <!-- combines display values -->
                />
            </CardView>
        );
    }

    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
export default App;

The UI component utilizes the specified display values in sorting and searching.

Do not use this property to format text in cells. Instead, use the format, customizeText, or fieldTemplate property.

calculateFieldValue

Calculates custom field values.

Type:

Function parameters:

cardData:

The data of the card to which the field belongs.

Context:

The this keyword refers to the column's configuration.

Return Value: any

A field's custom value.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    columns: [{
        caption: 'Location',
        calculateFieldValue(cardData) {
            return `${cardData.City}, ${cardData.State}`;
        }
    }]
})

Angular

app.component.html

app.component.ts

<dx-card-view ... >
    <dxi-card-view-column
        caption="Location"
        [calculateFieldValue]="calculateLocation"
    ></dxi-card-view-column>
</dx-card-view>

// ...
export class AppComponent {
    calculateLocation(cardData: Employee): string {
        return `${cardData.City}, ${cardData.State}`;
    }
}

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn
            caption="Location"
            :calculate-field-value="calculateLocation"
        />
    </DxCardView>
</template>

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

function calculateLocation(cardData: Employee): string {
    return `${cardData.City}, ${cardData.State}`;
}
</script>

React

App.ts

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

function calculateLocation(cardData: Employee): string {
    return `${cardData.City}, ${cardData.State}`;
}

function App() {
    return (
        <CardView ... >
            <Column
                caption="Location"
                calculateFieldValue={calculateLocation}
            />
        </CardView>
    )
}

calculateFilterExpression

Specifies the column's custom rules to filter data.

Type:

Function parameters:

filterValue: any

A user input value.
Contains an array if the selectedFilterOperation is one of the following: "between", "anyof", "noneof".

selectedFilterOperation:

| null

A selected filter operation.

target:

A UI element used to filter data.
Possible values: "headerFilter", "filterBuilder", "search".

Context:

The this keyword refers to the column's configuration.

Return Value:

|

Array<any>

|

A filter expression.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    columns: [{
        dataField: 'OrderDate',
        calculateFilterExpression(value, selectedFilterOperations, target) {
            if (value === 'weekends') {
                return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
            }
            return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
        },
    }]
})

function getOrderDay(rowData) {
    return (new Date(rowData.OrderDate)).getDay();
}

Angular

app.component.html

app.component.ts

<dx-card-view ... >
    <dxi-card-view-column
        dataField="OrderDate"
        [calculateFilterExpression]="calculateOrderDateFilterExpression"
    ></dxi-card-view-column>
</dx-card-view>

function getOrderDay(rowData: orderObj) {
    return new Date(rowData.OrderDate).getDay();
}
// ...
export class AppComponent {
    calculateOrderDateFilterExpression(this: DxCardViewTypes.Column, value, selectedFilterOperations, target) {
        if (value === 'weekends') {
            return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
        }
        return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
    }
}

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn
            data-field="OrderDate"
            :calculate-filter-expression="calculateOrderDateFilterExpression"
        />
    </DxCardView>
</template>

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

function getOrderDay(rowData: orderObj) {
    return new Date(rowData.OrderDate).getDay();
}

function calculateOrderDateFilterExpression(this: DxCardViewTypes.Column, value, selectedFilterOperations, target) {
    if (value === 'weekends') {
        return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
    }
    return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as any;
}
</script>

React

App.ts

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

function getOrderDay(rowData: orderObj) {
    return new Date(rowData.OrderDate).getDay();
}

function calculateOrderDateFilterExpression(value, selectedFilterOperations, target) {
    if (value === 'weekends') {
        return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
    }
    return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
}

function App() {
    return (
        <CardView ... >
            <Column
                dataField="OrderDate"
                calculateFilterExpression={calculateOrderDateFilterExpression}
            />
        </CardView>
    )
}

calculateSortValue

Calculates custom values used to sort this column.

Type:

|

Function parameters:

cardData:

The data of the card to which the field belongs.

Context:

The this keyword refers to the column's configuration.

Return Value: any

The value to be used in sorting.

This property requires the name of the data source field used for sorting this column or a function to obtain those values. The following code snippet demonstrates the first approach:

jQuery

JavaScript

$(function() {
    $("#cardViewContainer").dxCardView({
        columns: [{
            dataField: "Position", // supplies column values 
            calculateSortValue: "isOnVacation" // supplies values used to sort the Position column
        }]
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxi-card-view-column
        dataField="Position" <!-- supplies column values -->
        calculateSortValue="isOnVacation"> <!-- supplies values used to sort the Position column -->
    </dxi-card-view-column>
</dx-card-view>

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Position" <!-- supplies column values -->
            calculate-sort-value="isOnVacation" <!-- supplies values used to sort the Position column -->
        />
    </DxDataGrid>
</template>
<script setup lang="ts">
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
</script>

React

App.tsx

import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';

function App() {
    // ...
    return (
        <DataGrid ...>
            <Column
                dataField="Position" // supplies column values
                calculateSortValue="isOnVacation" // supplies values used to sort the Position column
            />
        </DataGrid>
    );
}

export default App;

The following code snippet uses calculateSortValue to concatenate State and City values for sorting the Employee column:

jQuery

JavaScript

$(function() {
    const cardView = $("#cardViewContainer").dxCardView({
        columns: [{
            dataField: "Employee",
            sortOrder: "asc",
            calculateSortValue: function (cardData) {
                return cardData.State + cardData.City;
            }
        }]
    }).dxCardView("instance");
});

Angular

app.component.html

app.component.ts

<dx-card-view ... >
    <dxi-card-view-column
        dataField="Employee"
        sortOrder="asc"
        [calculateSortValue]="sortByLocation">
    </dxi-card-view-column>
</dx-card-view>

import { DxCardViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    sortByLocation (cardData) {
        return cardData.State + cardData.City;
    }
}

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Employee"
            :calculate-sort-value="sortByLocation"
        />
    </DxDataGrid>
</template>
<script setup lang="ts">
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

const sortByLocation = (cardData) => {
    return cardData.State + cardData.City;
}
</script>

React

App.tsx

import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';

function sortByLocation(cardData){
    return cardData.State + cardData.City;
}

function App() {
    // ...
    return (
        <DataGrid ...>
            <Column
                dataField="Employee"
                calculateSortValue={sortByLocation}
            />
        </DataGrid>
    );
}

export default App;

caption

Specifies a caption for the column.

Type:

| undefined

Use this property to display a descriptive or friendly name for the column. If this property is not set, the caption will be generated from the name of the dataField.

customizeText

Customizes text displayed in field values.

Type:

Function parameters:

fieldInfo:

Information on the current field.

Object structure:

Name	Type	Description
groupInterval	String \| Number	Indicates how header filter values were combined into groups. Available if target is "headerFilter".
target	String	The UI element where the customizeText function was called: "card", "headerFilter", "search", "filterPanel", or "filterBuilder".
value	any	The field value.
valueText	String	The formatted value converted to a string.

Context:

The this keyword refers to the column's configuration.

Return Value:

The text the field value should display.

jQuery

index.js

$(function() {
    $("#cardViewContainer").dxCardView({
        // ...
        columns: [{
            dataField: "Temperature",
            customizeText: function(fieldInfo) {
                return fieldInfo.value + " °C";
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

<dx-card-view ... >
   <dxi-card-view-column
       dataField="Temperature"
       [customizeText]="customizeText"
   ></dxi-card-view-column>
</dx-card-view>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    customizeText(fieldInfo) {
        return fieldInfo.value + " °C";
    }
}

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn
            data-field="Temperature" 
            :customize-text="customizeText"
        />
    </DxCardView>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.light.css';
import { DxCardView, DxColumn } from "devextreme-vue/card-view";

function customizeText(fieldInfo) {
    return fieldInfo.value + " °C";
}
</script>

React

App.tsx

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

const customizeText = (fieldInfo) => {
    return fieldInfo.value + " °C";
}

function App() {
    return (
        <CardView ... >
            <Column dataField="Temperature" customizeText={customizeText} />
        </CardView>
    );
}
export default App;

dataField

Binds the column to a field of the dataSource.

Type:

| undefined

NOTE

Review the following notes about data binding:

If you create an unbound column (use the calculateFieldValue function), specify the columns[].name property instead of dataField.
Data field names cannot be equal to this and should not contain the following characters: ., :, [, and ].
Column caption is generated from the dataField value. If you want to use a custom caption, specify it in the caption property. Unlike dataField, caption can contain any characters.

dataType

Converts column values to a different data type.

Type:

DataType

| undefined

If data fields have values of one type but need to be another in the UI component, set the correct type in this property.

editorOptions

Configures the default UI component used for editing.

Type: any

falseText

In a boolean column, replaces all false items with a specified text.

Type:

Default Value: 'false'

fieldCaptionTemplate

Specifies a custom template for the field caption.

Type:

Template Data:

FieldTemplateData

The field's data.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    columns: [{
        // ...
        fieldCaptionTemplate(data) {
            return $('<div>')
                .append(
                    $('<i>').addClass("dx-icon-errorcircle"),
                    $('<span>').text(data.field.column.caption)
                )
        },
    }]
})

Angular

app.component.html

<dx-card-view ... >
    <dxi-card-view-column ...
        fieldCaptionTemplate="captionTemplate"
    ></dxi-card-view-column>
    <div *dxTemplate="let data of 'captionTemplate'">
        <i class="dx-icon-errorcircle"></i>
        <span>{{ data.field.column.caption }}</span>
    </div>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn ...
            field-caption-template="captionTemplate"
        />
        <template #captionTemplate="{ data }">
            <div>
                <i class="dx-icon-errorcircle"></i>
                <span>{{ data.field.column.caption }}</span>
            </div>
        </template>
    </DxCardView>
</template>

React

App.tsx

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

function captionRender(data: CardViewTypes.FieldTemplateData) {
    return (
        <div>
            <i class="dx-icon-errorcircle"></i>
            <span>{data.field.column.caption}</span>
        </div>
    )
}

// ...
function App() {
    return (
        <CardView ... >
            <Column ...
                fieldCaptionRender={captionRender}
            />
        </CardView>
    )
}

fieldTemplate

Specifies a custom template for the field.

Type:

Template Data:

FieldTemplateData

The field's data.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    columns: [{
        // ...
        fieldTemplate(data) {
            return $('<div>')
                .addClass('task__progress')
                .dxProgressBar({
                    value: data.field.value,
                });
        }
    }]
})

Angular

app.component.html

<dx-card-view ... >
    <dxi-card-view-column ...
        fieldTemplate="progressTemplate"
    ></dxi-card-view-column>
    <div *dxTemplate="let data of 'progressTemplate'">
        <dx-progress-bar
            [value]="data.field.value"
        ></dx-progress-bar>
    </div>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn ...
            field-template="progressTemplate"
        />
        <template #progressTemplate="{ data }">
            <DxProgressBar
                :value="data.field.value"
            />
        </template>
    </DxCardView>
</template>

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

// ...
</script>

React

App.tsx

import CardView, { Column, CardViewTypes } from 'devextreme-react/card-view';
import { ProgressBar } from 'devextreme-react/progress-bar';

function progressRender(data: CardViewTypes.FieldTemplateData) {
    return (
        <ProgressBar value={data.field.value} />
    )
}

// ...
function App() {
    return (
        <CardView ... >
            <Column ...
                fieldRender={progressRender}
            />
        </CardView>
    )
}

fieldValueTemplate

Specifies a custom template for the field value.

Type:

Template Data:

FieldTemplateData

The field's data.

jQuery

index.js

$(#dxCardView).dxCardView({
    // ...
    columns: [{
        dataField: 'Email',
        fieldValueTemplate(data) {
            return $('<a>')
                .attr('href', `mailto:${data.field.value}`)
                .text(data.field.text);
        }
    }]
})

Angular

app.component.html

<dx-card-view ... >
    <dxi-card-view-column
        dataField="Email"
        fieldValueTemplate="emailTemplate"
    ></dxi-card-view-column>
    <div *dxTemplate="let params of 'emailTemplate'">
        <a href="mailto:{{ params.field.value }}">{{ params.field.text }}</a>
    </div>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn
            data-field="Email"
            field-value-template="emailTemplate"
        />
        <template #emailTemplate="{ data }" >
            <a :href="`mailto:${data.field.value}`">{{ data.field.text }}</a>
        </template>
    </DxCardView>
</template>

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

React

App.ts

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

function EmailComponent(data) {
    return (
        <a href={`mailto:${data.field.value}`}>{data.field.text}</a>
    );
}

function App() {
    return (
        <CardView ... >
            <Column
                dataField="Email"
                fieldValueComponent={EmailComponent}
            />
        </CardView>
    )
}

filterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values. Applies only if headerFilter.visible and allowHeaderFiltering are true.

Type:

FilterType

Default Value: 'include'

This property accepts the following values.

include
Values in the header filter are unselected initially, and a user can select values to apply a filter.
exclude
All values in the header filter are selected initially. A user can deselect values to change the filter.

This property changes when the user clicks the Select all button in the header filter (only if header filter displays plain data):

Select all	filterType / filterValues
Button is not pressed	`filterType: "include"` `filterValues: null`
Button is pressed	`filterType: "exclude"` `filterValues: null`

filterValue

Specifies the filter value.

Type: any | undefined

Default Value: undefined

Raised Events: onOptionChanged

filterValues

Specifies the values in the header filter.

Type:

Array<any>

Raised Events: onOptionChanged

format

Formats a value before it is displayed in a field.

Selector: dxo-format

Type:

Format

Default Value: ''

See the format section for information on accepted values.

formItem

Configures the form item that the field produces in the editing state.

Selector: dxo-form-item

Type:

Simple Form Item

NOTE

The component does not check validation rules in the formItem object. Use the columns.validationRules property to customize validation instead.

headerFilter

Specifies data settings for the header filter.

Selector: dxo-header-filter

Type:

ColumnHeaderFilter

| undefined

headerItemCssClass

CSS class name applied to header item elements.

Type:

headerItemTemplate

Specifies a custom template for the header item.

Type:

Template Data:

ColumnTemplateData

The column's data.

name

Specifies the column's unique identifier. If not set in code, this value is inherited from the dataField.

Type:

| undefined

This property's value is used to refer to the column in code.

setFieldValue

Specifies a function to be invoked after the user has edited a field value, but before it is saved in the data source.

Type:

Function parameters:

newData:

The data object where new data should be set.

value: any

The input value.

currentCardData:

Accesses the current card data in read-only mode.

Context:

The this keyword refers to the column's configuration.

Return Value: void |

Promise<void> (jQuery or native)

Return a promise for an asynchronous operation or return nothing.

This function allows you to process user input before it is saved to the data source. It accepts the newData, value, and currentCardData parameters. value is the user input that you should assign to one of the newData fields. Fill the empty newData object with fields whose values should be saved in the current row's data object. You can use the read-only currentCardData parameter to access the current card's data.

jQuery

index.js

$(function() {
    $("#cardViewContainer").dxCardView({
        // ...
        columns: [
            "Price",
            {
                dataField: "Count",
                dataType: "number",
                setFieldValue: function(newData, value, currentCardData) {
                    newData.Count = value;
                    newData.TotalPrice = currentCardData.Price * value;
                }
            },
            "TotalPrice",
            // ...
        ]
    });
});

Angular

app.component.html

app.component.ts

<dx-card-view ... >
    <dxi-card-view-column dataField="Price"></dxi-card-view-column>
    <dxi-card-view-column
        dataField="Count"
        dataType="number"
        [setFieldValue]="setFieldValue">
    </dxi-card-view-column>
    <dxi--card-viewcolumn dataField="TotalPrice"></dxi-card-view-column>
</dx-card-view>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    setFieldValue (newData, value, currentCardData) {
        newData.Count = value;
        newData.TotalPrice = currentCardData.Price * value;
    }
}

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumn data-field="Price" />
        <DxColumn data-field="Count" data-type="number" :set-cell-value="setFieldValue" />
        <DxColumn data-field="TotalPrice" />
    </DxCardView>
</template>
<script setup lang="ts">
import 'devextreme/dist/css/dx.light.css';
import { DxCardView, DxColumn } from 'devextreme-vue/card-view';

const setFieldValue = (newData, value, currentCardData) => {
    newData.Count = value;
    newData.TotalPrice = currentCardData.Price * value;
}
</script>

React

App.js

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

const App = () => {
    setFieldValue(newData, value, currentCardData) {
        newData.Count = value;
        newData.TotalPrice = currentCardData.Price * value;
    }

    render() {
        return (
            <CardView ... >
                <Column dataField="Price" />
                <Column dataField="Count" dataType="numeric" setFieldValue={setFieldValue}/>
                <Column dataField="TotalPrice" />
            </CardView>
        );
    }
}
export default App;

showInColumnChooser

Specifies whether the column chooser can contain the column header.

Type:

Default Value: true

sortIndex

Specifies the index according to which columns participate in sorting.

Type:

Number

| undefined

Raised Events: onOptionChanged

This property accepts an integer specifying the index of the column in a collection of columns with applied sorting.

sortingMethod

Specifies a custom comparison function for sorting. Applies only when sorting is performed on the client.

Type:

| undefined

Function parameters:

value1: any

A value to be compared.

value2: any

A value to be compared.

Context:

The this keyword refers to the column's configuration.

Return Value:

Number

Specifies whether value1 goes before value2.

This function accepts two cell values and should return a number that indicates their sort order:

Less than zero
value1 goes before value2.
Zero
value1 and value2 remain unchanged relative to each other.
Greater than zero
value1 goes after value2.

The function performs a culture-insensitive string comparison.

sortOrder

Specifies the sort order of column values.

Type:

SortOrder

| undefined

Raised Events: onOptionChanged

Rows initially follow the order of the data source. To change the order, set the sortOrder property to "asc" for ascending or "desc" for descending. For multi-column sorting, set the sortIndex. Without this, sorted columns receive a sort index based on their placement in the columns array.

trueText

In a boolean column, replaces all true items with the specified text.

Type:

Default Value: 'true'

validationRules

Specifies validation rules to be checked when field values are updated.

Selector: dxi-validation-rule

Type:

visible

Specifies whether the column is visible.

Type: