-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Pivot Grid - Field Panel
A field panel is an element that displays pivot grid fields involved in summary calculation. This panel consists of four field areas: column, row, data, and filter. Users can drag and drop fields between these areas, similar to the field chooser. You can use the field panel and the field chooser simultaneously, as shown in this demo.
Enable the fieldPanel.visible property to display the field panel. If you want to hide fields from specific areas, disable the corresponding properties in the fieldPanel object:
If you have technical questions, please create a support ticket in the DevExpress Support Center.
@using DevExtreme.MVC.Demos.Models
@(Html.DevExtreme().PivotGrid<Sale>()
.ID("sales")
.AllowSortingBySummary(true)
.AllowSorting(true)
.AllowFiltering(true)
.Height(490)
.ShowBorders(true)
.FieldPanel(p => p
.ShowColumnFields(true)
.ShowDataFields(true)
.ShowFilterFields(true)
.ShowRowFields(true)
.AllowFieldDragging(true)
.Visible(true)
)
.FieldChooser(c => c.Height(500))
.DataSource(d => d
.Store(s => s.WebApi().Controller("PivotGridData"))
.Fields(fields => {
fields.AddFor(m => m.Region)
.Width(120)
.Area(PivotGridArea.Row);
fields.AddFor(m => m.City)
.Width(150)
.Area(PivotGridArea.Row)
.Selector(@<text>
function(data) {
return data.City + " (" + data.Country + ")";
}
</text>);
fields.AddFor(m => m.Date)
.Area(PivotGridArea.Column);
fields.AddFor(m => m.Amount)
.Caption("Sales (Sum)")
.Area(PivotGridArea.Data)
.SummaryType(SummaryType.Sum)
.Format(Format.Currency);
})
)
.OnContextMenuPreparing("contextMenu_preparing")
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Show Data Fields")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getPivotGridInstance().option("fieldPanel.showDataFields", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Show Row Fields")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getPivotGridInstance().option("fieldPanel.showRowFields", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Show Column Fields")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getPivotGridInstance().option("fieldPanel.showColumnFields", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Show Filter Fields")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getPivotGridInstance().option("fieldPanel.showFilterFields", data.value);
}
</text>)
)
</div>
</div>
<script>
function contextMenu_preparing(e) {
var dataSource = e.component.getDataSource(),
sourceField = e.field;
if(sourceField) {
if(!sourceField.groupName || sourceField.groupIndex === 0) {
e.items.push({
text: "Hide field",
onItemClick: function() {
var fieldIndex;
if(sourceField.groupName) {
fieldIndex = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex].index;
} else {
fieldIndex = sourceField.index;
}
dataSource.field(fieldIndex, {
area: null
});
dataSource.load();
}
});
}
if(sourceField.dataType === "number") {
var setSummaryType = function(args) {
dataSource.field(sourceField.index, {
summaryType: args.itemData.value
});
dataSource.load();
},
menuItems = [];
e.items.push({ text: "Summary Type", items: menuItems });
$.each(["Sum", "Avg", "Min", "Max"], function(_, summaryType) {
var summaryTypeValue = summaryType.toLowerCase();
menuItems.push({
text: summaryType,
value: summaryType.toLowerCase(),
onItemClick: setSummaryType,
selected: e.field.summaryType === summaryTypeValue
});
});
}
}
}
function getPivotGridInstance() {
return $("#sales").dxPivotGrid("instance");
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
In this demo, you can click the checkboxes below the PivotGrid to enable or disable these properties.
If you do not want users to drag and drop fields, disable the fieldPanel.allowFieldDragging property. In this case, the users can only use the field chooser to reorganize the fields.
The field panel also allows users to sort and filter pivot grid fields. Click a field to change the sort order. Click a funnel icon to open the filter popup. To enable these features, set the allowSorting and allowFiltering properties to true.
This demo also shows how to add custom commands to a field's context menu. For instance, right-click the Sales (Sum) field, and you will see three commands. Two of them (Hide field and Summary Type) are custom. Review the onContextMenuPreparing handler implemenation to see how these commands are added to the context menu. For more information, refer to the following help topic: onContextMenuPreparing.