Introduction When working with a Blazor Pivot Table, you can display both the table and the chart on the same page simultaneously by setting the View property of PivotViewDisplayOption to Both. In some scenarios, you might want to dynamically switch between different chart types. This can be accomplished using an external dropdown list. This article explains how to create and integrate this dropdown between the table and the chart in pivot component by using JavaScript Interop. Step-by-step implementation Step 1: Create a dropdown for chart type selection First, define the chart type selection dropdown list in your Razor page (Index.razor). Here is an example of how to set up the dropdown using the Syncfusion DropDownList Component: [Index.razor] @using Syncfusion.Blazor.PivotView @using Syncfusion.Blazor.DropDowns <SfPivotView> <PivotViewDisplayOption View="View.Both"></PivotViewDisplayOption> <PivotChartSettings> <PivotChartSeries Type="@ChartType"></PivotChartSeries> </PivotChartSettings> </SfPivotView> // Create the chart selection dropdown <div id="dropdown"> <SfDropDownList TValue="ChartSeriesType" TItem="DropDownData" DataSource="@ChartTypes" @bind-Value="@ChartType"> <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings> </SfDropDownList> </div> @code { public ChartSeriesType ChartType = ChartSeriesType.Column; // Create data source for the dropdown List<DropDownData> ChartTypes = new List<DropDownData>() { new DropDownData { Name = "Column", Value = ChartSeriesType.Column }, new DropDownData { Name = "Bar", Value = ChartSeriesType.Bar }, … Other chart types }; public class DropDownData { public string Name { get; set; } public ChartSeriesType Value { get; set; } } } Here’s a breakdown of how the code works: First, a variable named ChartType is defined that represents the currently selected chart type from the dropdown list. The initial value is set to ChartSeriesType.Column, which represents a column chart. Next, a list named ChartTypes is defined that consists of objects from the DropDownData class. This class includes two properties: Name and Value. The Name property indicates the display text for each chart types (i.e., Column, Bar, and more), while the Value property stores corresponding the ChartSeriesType value. Subsequently, a dropdown list is created using the SfDropDownList component and bind the ChartTypes list as the data source for the dropdown using the DataSource property. Also, bind the ChartType variable using the @bind-Value property. This updates the ChartType variable with the corresponding ChartSeriesType value whenever an item from the dropdown list is selected. Finally, the Type property in the PivotChartSeries is set to the ChartType variable. This ensures that the pivot chart dynamically updates its chart type based on the selected value in the dropdown. Step 2: Positioning the dropdown list at the specified location After creation, the dropdown initially displays at the bottom of the page. However, you have the option to position this dropdown between the table and the chart using JavaScript Interop. To accomplish this, you will need to create a JavaScript file (i.e., dropdownposition.js) and define an asynchronous function called dropdownPosition. This function places the dropdown between the table and the chart. [dropdownPosition.js] async function dropdownPosition() { // Get the Pivot Table component DOM element var element1 = document.getElementsByClassName("e-pivot-table-view"); // Get the Dropdown component DOM element var element2 = document.getElementById("dropdown"); // Append the dropdown (element2) to the pivot table's container (element1). // This places the dropdown at the end of the pivot table, effectively positioning it between the table and the chart. element1[0].appendChild(element2); } First, the pivot table DOM element is accessed by targeting its built-in class name “e-pivot-table-view” using the getElementsByClassName method. Following this, the dropdown element is retrieved by its ID using the getElementById method. Finally, the dropdown element (i.e., element2) is appended to the pivot table container (i.e., element1) using the appendChild method. This will effectively position the dropdown between the table and the chart. This code can be adopted for specific needs, for example, placing this dropdown under the grouping bar. In order to invoke this dropdownPosition function in a Blazor application, it is necessary to use JavaScript interoperability (or JS interop). The following step demonstrates how to achieve this. Step 3: Include the script in your host file To use JavaScript Interop in a Blazor application, refer to the JavaScript file (i.e., dropdownPosition.js) in your host file (i.e., Host.cshtml). Below is an example of how to refer to the JavaScript file in your host page. [Host.cshtml] <html> <body> <script src="scripts/dropdownPosition.js"></script> </body> </html> Step 4: Invoke JavaScript function in razor page Once JavaScript Interop is set up, the dropdownPosition function can be invoked on your razor page (Index.razor) using the IJSRuntime interface. Below is an example of how to invoke the dropdownPosition method in a razor file: [Index.razor] @inject IJSRuntime JSRuntime <SfPivotView> <PivotViewEvents Created="Created"></PivotViewEvents> </SfPivotView> @code { private async Task Created() { await JSRuntime.InvokeVoidAsync("dropdownPosition"); } } In the above code, first the IJSRuntime service is injected using the @inject directive. This service allows interaction with JavaScript code from the razor page. Subsequently, the Created event is used, which triggers when the pivot table component is created. Within this event, use the InvokeVoidAsync method to invoke the dropdownPosition function. This action will position the dropdown element between the table and the chart. The following screenshot portrays the results of the code snippet mentioned above, Screenshot You can refer to this GitHub sample for a practical demonstration of this code. Conclusion We hope you enjoyed learning how to insert a chart type selection dropdown between the table and the chart. 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 are 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!
