How to create a custom dialog in a Blazor Pivot Table when double-clicking on a value cell?

Introduction

In certain situations, you may 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 showing 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 on a value cell.

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

In order to create a custom dialog when double-clicking on a value cell in a pivot table, you can utilize the DrillThrough event. This event is triggered upon clicking a value cell in the pivot table and allows for the creation of a custom dialog box. The code example below demonstrates how to create a custom dialog by 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 prevented the default drill-through dialog box from appearing by setting the args.Cancel property to true. Following this, we have created a custom dialog box using the Syncfusion Blazor Dialog Component and its properties, for instance, 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.

Conclusion

I 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 feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

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!