How to Create a Custom Dialog in a Blazor Pivot Table?

Introduction

In certain situations, you might want to provide additional interactivity by displaying a custom dialog box whenever a value cell is double-clicked in a pivot table. This can be useful for displaying detailed information, conducting validations, or initiating other custom actions. This article will guide you on how to create a custom dialog in the Blazor Pivot Table when double-clicking a value cell.

Creating a custom dialog box upon double-clicking a value cell

To create a custom dialog when double-clicking a value cell in a pivot table, you can utilize the DrillThrough event. This event is triggered when a value cell in the pivot table is clicked, allowing for the creation of a custom dialog box. The code example below demonstrates how to create a custom dialog using the Syncfusion Blazor Dialog Component when double-clicking a value cell in a pivot table.

[Index.razor]

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Popups

<SfPivotView TValue="ProductDetails" ID='PivotView' @ref="pivot" Width="100%" AllowDrillThrough="true">
	...
    <PivotViewEvents TValue="ProductDetails" DrillThrough="drillThrough"></PivotViewEvents>
</SfPivotView>

@*Custom Dialog Component.*@
<SfDialog Target="#PivotView" @ref="Dialog" Width="300px" ShowCloseIcon="true" @bind-Visible="@Visibility">
        <DialogTemplates>
            <Header> Dialog </Header>
            <Content>
                <p>
                    This is a custom dialog, you can update your custom validation here.
                </p>
            </Content>
        </DialogTemplates>
         <DialogAnimationSettings Effect="@AnimationEffect"/>
        <DialogButtons>
            <DialogButton IsPrimary="true" Content="CANCEL" OnClick="@OnBtnClick" />
        </DialogButtons>        
</SfDialog>

@code { 
    SfPivotView<ProductDetails> pivot;
    private SfDialog Dialog { get; set; }
    private bool Visibility { get; set; } = false;
    private DialogEffect AnimationEffect = DialogEffect.Zoom;
  
    // Close the dialog unsing the button.
    private async Task OnBtnClick()
    {
        await Dialog.HideAsync();
    }

    private async Task drillThrough(DrillThroughEventArgs args)
    {
        // Restrict the existing dialog here.
        args.Cancel = true;
        // And display the custom dialog here.
        await Dialog.ShowAsync();

    }
}

In the above code example, inside the DrillThrough event method, we prevent the default drill-through dialog box from appearing by setting the args.Cancel property to true. Following this, we created a custom dialog box using the Syncfusion Blazor Dialog Component and its properties, including its title, message, size, and animation appearance, among others. You can modify this event as per your requirements to customize the dialog box and its contents.

The following GIF image, which portrays the results of the code snippet mentioned above,

Sceenshot

You can refer to this GitHub sample for a practical demonstration of this code snippet.

Conclusion

We hope you enjoyed learning how to create a custom dialog in a Blazor Pivot Table when double-clicking on a value cell.

You can also refer to our Blazor Pivot Table feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data.

For current customers, our Blazor components available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!