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, });