JavaScript/jQuery CardView - cardHeader

Configures the card header.

Type:

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;