Popup - The FooterTemplate property has changed its behavior and signature

What Changed

1. Footer visibility no longer depends on the FooterTemplate property. We introduced a new ShowFooter option (the default value is false).
2. The FooterTemplate property now affects the entire footer and does not apply any predefined appearance settings. In previous versions, this property affected the content area only and applied the predefined alignment and paddings.
3. The FooterTemplate property changed its type from RenderFragment to RenderFragment<IPopupElementInfo>.

Reasons for Change

In v21.1, we made the footer's behavior and API more consistent with the header:

• Popup has the ShowHeader property that specifies header visibility. The ShowFooter option now defines footer visibility in the same way.
• The FooterTemplate property's behavior is now consistent with the HeaderTemplate property's behavior. We added the FooterContentTemplate and HeaderContentTemplate properties that allow you to customize the content area and apply the predefined content alignment and paddings.

We also decided to pass the IPopupElementInfo object as the context parameter to the FooterTemplate. The parameter contains an API that can be useful when customizing footers. For instance, you can use context.CloseCallback to implement a Close button.

Impact on Existing Apps

Changes 1 and 2 affect all applications that use FooterTemplate.

Razor
<DxPopup ...>
     @*...*@
    <FooterTemplate>
         @*...*@
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@(() => PopupVisible = false)" Text="OK"/>
    </FooterTemplate>
</DxPopup>

Change 3 affects applications in the following cases only:

1. If you nest a Popup and another templated component. The following error occurs: "…The child content element 'ChildContent' of component 'X' uses the same parameter name ('context') …"

Razor
<DxPopup ...>
    <FooterTemplate>
        <DxFormLayout>
            @*...*@
            <DxFormLayoutItem>
                <Template>
                    <DxButton Click="OnClick" Text="OK"></DxButton>
                </Template>
            </DxFormLayoutItem>
        </DxFormLayout>
    </FooterTemplate>
</DxPopup>

2. If you create a FooterTemplate in C# code instead of markup.

Razor
<DxPopup FooterTemplate="@CreateTemplate()" ...>
    @*...*@
</DxPopup>

@code {
    public RenderFragment CreateTemplate() {
        return x => @<p>My Text</p>;
    }

How to Update Existing Apps

Enable the ShowFooter option and replace FooterTemplate with FooterContentTemplate.

Razor
<DxPopup ...ShowFooter="true">
     @*...*@
    <FooterContentTemplate>
         @*...*@
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@(() => PopupVisible = false)" Text="OK"/>
    </FooterContentTemplate>
</DxPopup>

If you nest a Popup and another templated component, specify the Context parameter explicitly in one of them.

Razor
<FooterTemplate Context="PopupContext">
    <DxFormLayout>
        @*...*@
        <DxFormLayoutItem>
            <Template Context="ItemContext">
                <DxButton Click="OnClick" Text="OK"></DxButton>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayout>
</FooterTemplate>

If you create a footer template in C# code, use the RenderFragment<IPopupElementInfo> type instead of RenderFragment.

Razor
<DxPopup FooterTemplate="@CreateTemplate()" ...>
    @*...*@
</DxPopup>

@code {
    public RenderFragment<IPopupElementInfo> CreateTemplate() {
        return x => @<p>My Text</p>;
    }