In this video, I'll show you how to Get Started using the DevExpress Pivot Grid for Blazor.
A Pivot Grid is a great way to display and analyze multi-dimensional data from an underlying
data source.
You can use this component to calculate summaries and totals against individual values and display
results within the pivot table's cells.
You'll see how to add the pivot grid.
Bind it to data.
Add Fields.
Then add features like grouping, sorting, and total summaries.
And finally we'll visualize the data by connecting it to a chart.
So let's get started.
I've already created a new Blazor application and configured it to use DevExpress components.
To learn how to do this, you can watch these other videos.
Their links are in the description of this video.
First, we'll add a Pivot Grid component to the application.
I go to Pages/Index.razor, and add the DxPivotGrid open and close tags to the page.
The next step is to bind the grid to data.
The demo uses data from an Entity Framework source by accessing a web service.
I have prepared the implementation and the data is available in the GridData field, a
list of SaleInfo objects.
To bind the grid to the GridData object, I set up the Data property.
Now let's define the grid's fields that supply data to columns, rows, and data cells.
I create a DxPivotGridField object and set up the Field property to connect the field
with a data source field (for example, Region), then I specify the field location using the
Area property.
Then I create two more fields that are located in the Row Header area.
(Country, City)
If I run this now, you'll see the grid displays the Region, Country, and City fields in the
Row Header area.
Now I add a field to the Column Header area, and view the result.
Let's also add fields to the Data Header Area.
I create two fields.
These fields will be used to calculate summary values displayed in the pivot grid cells,
so I need set up the SummaryType property for them.
The Amount field has the Sum type, while the field bound to OrderId has the Count type.
This means that grid cells will display the total number of the OrderId field values.
I also set up a custom caption for this field - Count.
And let's take a look at this in the browser.
As you can see, the grid displays information about sales in multiple columns.
Each column corresponds to a particular date.
Now I want to group grid data by date field values.
I create one more pivot grid field for the Date data source field and set up the GroupInterval
property for these two fields.
I also set up the Caption property.
And for the Quarter field, I specify a header template.
Now the grid displays data grouped by years and quarters.
When I expand a column or a row, the grid displays column and row totals.
For example, here I see the totals for all regions in 2017.
When I expand the North America row, I see totals for this region for each quarter.
The PivotGrid also supports grand totals that display summary totals calculated against
all the rows/columns.
The PivotGrid data is always sorted by row and column fields.
A field header displays a sort order (ascending or descending).
To change the order, I click the field header.
I can also set up sorting data in code.
I set up the SortOrder property for the Year and Quarter columns.
And I run it again.
Now years and quarters are displayed in descending order.
The PivotGrid visualizes large amounts of data that are numeric - this can be hard to
understand.
To make your data more clear to a viewer, you can visualize it in a DxChart component.
This component can display data as bars, areas, lines, and many other forms.
I add a DxChart component to the markup.
To link the pivot grid with the chart, I need to create a DxPivotGridDataProvider.
In the Razor @code block, I create a DxPivotGridDataProvider object based on the Sales.Load() method.
Then I bind the pivot grid to the provider's PivotGridDataSource property, and bind the
chart to the PivotGridDataProvider.ChartDataSource property.
Now I configure the chart.
I add a DxChartCommonSeries object and set up its properties in the following way.
Let's run this one last time.
The chart shows data from the Pivot Grid's lowest expanded level.
Note that the chart is updated when I expand rows in the grid.
And that's it for this video.
I hope you've enjoyed this tutorial on the DevExpress Blazor Pivot Grid component.
If you like this video, give us a thumbs up.
If you have questions, please comment below.
And don't forget to subscribe and ring the bell so you get notified whenever we release
new content.
Thanks for watching.
And Thankyou for choosing DevExpress.