diff --git a/e2e/testcafe-devextreme/tests/cardView/cardHeader.ts b/e2e/testcafe-devextreme/tests/cardView/cardHeader.ts
new file mode 100644
index 000000000000..85d05b322c7b
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/cardView/cardHeader.ts
@@ -0,0 +1,40 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture.disablePageReloads`CardView - Card Header`
+ .page(url(__dirname, '../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('cardHeader item with a named template should render the template content (T1328152)', async (t) => {
+ const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+ await t.expect(cardView.isReady()).ok();
+
+ await t.expect(cardView.getCard(0).getToolbarItemContent(0).textContent).eql('custom_content');
+}).before(async () => createWidget('dxCardView', {
+ dataSource: [
+ { id: 1 },
+ ],
+ keyExpr: 'id',
+ cardHeader: {
+ visible: true,
+ items: [
+ { template: 'myTemplate' },
+ ],
+ },
+ templatesRenderAsynchronously: true,
+ integrationOptions: {
+ templates: {
+ myTemplate: {
+ render(e) {
+ setTimeout(() => {
+ $('
').text('custom_content').appendTo(e.container);
+ e.onRendered?.();
+ }, 100);
+ },
+ },
+ },
+ },
+}));
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
index c94cc8970d2c..5f84d536f5d7 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
+++ b/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
@@ -103,10 +103,15 @@ function MainViewComponent({
export class MainView extends View {
protected override component = MainViewComponent;
+ private readonly integrationOptions = computed(() => ({
+ templates: this.options.oneWay('integrationOptions.templates').value,
+ }));
+
private readonly config = computed(() => ({
rtlEnabled: this.options.oneWay('rtlEnabled').value,
disabled: this.options.oneWay('disabled').value,
templatesRenderAsynchronously: this.options.oneWay('templatesRenderAsynchronously').value,
+ integrationOptions: this.integrationOptions.value,
}));
private readonly commonProps = {
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts b/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts
index d227b2dfcbff..68838638faa6 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts
@@ -5,10 +5,12 @@ export interface Config {
rtlEnabled: WidgetProperties['rtlEnabled'];
disabled: WidgetProperties['disabled'];
templatesRenderAsynchronously: unknown; // TODO: Properties['templatesRenderAsynchronously'];
+ integrationOptions: Pick, 'templates'> | undefined;
}
export const ConfigContext = createContext({
rtlEnabled: undefined,
disabled: undefined,
templatesRenderAsynchronously: undefined,
+ integrationOptions: undefined,
});