group
- Getting Started
- Setting Up ASP.NET Core MVC
- Accessibility
- Chart
- ASP.NET
- Overview
- Getting Started
- Design-time Support
- ItemTypes
- Chart Elements
- Chart Types
- Area Chart
- Bar Chart
- Bubble Chart
- Line Chart
- Pie Chart
- Sparklines
- Donut Chart
- Scatter Chart
- Spline Chart
- SplineArea Chart
- RangeArea Chart
- RangeBar Chart
- RangeSpline Chart
- StepLine Chart
- StepArea Chart
- PolarLine Chart
- PolarArea Chart
- PolarBar Chart
- PolarSpline Chart
- PolarSplineArea Chart
- PolarScatter Chart
- Combining Chart Types
- Data Binding
- Exporting
- Localization
- Selection
- Zooming and Panning
- Appearance and Styling
- Server Side Events
- Client Events
- Supported Browsers
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- API
- allowUTCFormatting
- applyAnimation
- axisX
- axisTickText
- axisType
- categoricalValues
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- axisY
- axisTickText
- axisType
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- backgroundColor
- borderColor
- borderRadius
- borderWidth
- chartAreaBackgroundColor
- chartAreaBackgroundImage
- chartAreaBorderColor
- chartAreaBorderWidth
- chartAreaPaddingBottom
- chartAreaPaddingLeft
- chartAreaPaddingRight
- chartAreaPaddingTop
- chartLegend
- dataSeries
- enableAutoFit
- events
- exportOptions
- height
- isInverted
- margin
- primaryHeader
- secondaryHeader
- seriesPalette
- seriesSettings
- area
- bar
- bubble
- donut
- line
- pie
- polararea
- polarbar
- polarline
- polarscatter
- polarspline
- polarsplinearea
- rangearea
- rangebar
- rangesplinearea
- scatter
- spline
- splinearea
- steparea
- stepline
- seriesType
- theme
- tooltipSettings
- width
- zoomMode
- Getting Started
- Events
- How-To
- Methods
- Styling
- Supported Browsers
- ASP.NET
- Barcode
- QR Code
- TagCloud
- TreeMap
- Grid
- ASP.NET
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- JavaScript
- API
- Settings
- altRowTemplate
- altRows
- columnReorder
- columns
- dataSource
- detailCollapseCssClass
- detailCollapseText
- detailExpandCollapse
- detailExpandCssClass
- detailExpandText
- detailTemplate
- editing
- exportOptions
- filtering
- grouping
- height
- maxHeight
- noRecordsTemplate
- noRecordsText
- paging
- resizing
- rowHover
- rowTemplate
- scrolling
- selection
- showHeader
- sorting
- toolbar
- Events
- Properties
- Methods
- addRow
- cancelEditing
- clearSelection
- collapseRow
- dataItem
- deleteRow
- destroy
- editCell
- editRow
- expandRow
- exportCsv
- exportExcel
- exportPdf
- filter
- hideColumn
- insertRow
- isHidden
- isLocked
- lockColumn
- page
- pageSize
- refresh
- reorderColumn
- revertChanges
- saveChanges
- scrollTop
- select
- selectedRowIndices
- showColumn
- sort
- ungroup
- unlockColumn
- Settings
- Getting Started
- Autogenerated Editors
- Binding to Data
- Cancel User Iteraction
- Change Options Dynamically
- Columns
- Custom Editors
- Exporting
- Filtering
- Footer Total Aggregates
- Grouping
- Hierarchy
- Paging
- RTL
- Scrolling
- Selection
- Sorting
- Templates
- Themes
- Validation
- API
- Accordion
- AutoComplete
- Button
- Calendar
- CheckBox
- ColorPicker
- ComboBox
- ContextMenu
- DataSource
- DatePicker
- DateTimePicker
- Draggable
- DropDown
- Droppable
- Editor
- ListBox
- LoadingPanel
- MaskedTextBox
- Menu
- MonthYearPicker
- NumericTextBox
- Pager
- ProgressBar
- RadioButton
- Rating
- RecursiveDataSource
- Slider
- SplitButton
- Splitter
- Switch
- Tabs
- TextBox
- TimePicker
- Timeline
- Tooltip
- TreeView
- Upload
- Window
An array of dictionaries describing grouping options. Each item in the list should contain grouping options for each level of grouping.
Each dictionary must contain the following properties:
- field
- the path to the property to group by
- order
- the sorting order of the groups - "asc" or "desc". Defaults to "asc"
- aggregate
- optional settings for any aggregation to apply for the items within each bottom-level group.
Grouping is applied after client-side filering.
var dataSource = new shield.DataSource({ data: [ { id: 1, name: "item 1", category: 2, arr: [4, "7", { id: null }] }, { id: 2, name: "item 2", category: 1, arr: [1, "9", { id: 12 }] }, { id: 3, name: "item 3", category: 3, arr: [5, "2", { id: "subchild 1" }] }, { id: 4, name: "item 4", category: 2, arr: [7, "4", { id: undefined }] }, { id: 5, name: "item 5", category: 2, arr: [2, "1", { id: null }] }, { id: 6, name: "item 6", category: 3, arr: [3, "3", { id: "subchild 2" }] }, { id: 7, name: "item 7", category: 1, arr: [8, "5", { id: 7 }] }, { id: 8, name: "item 8", category: 1, arr: [10, "8", { id: "child 3" }] }, { id: 9, name: "item 9", category: 3, arr: [9, "10", { id: "child 4" }] }, { id: 10, name: "item 10", category: 2, arr: [6, "6", { id: "13" }] } ], group: [ // group the items by category // sort the groups by their category field in ascending order // calculate min aggregation function for each group { field: "category", order: "asc", aggregate: [ { field: "arr[1]", aggregate: "min" } ] } ] }); dataSource.read().then(function() { console.log(dataSource.view.length + " groups"); // prints: 3 groups console.log("Category: " + dataSource.view[0].value); // prints: Category: 1 console.log(dataSource.view[0].items.length + " items"); // prints: 3 items console.log(dataSource.view[0].aggregate[0].aggregate + " - " + dataSource.view[0].aggregate[0].value); // prints: min 5 console.log("Category: " + dataSource.view[1].value); // prints: Category: 2 console.log(dataSource.view[1].items.length + " items"); // prints: 4 items console.log(dataSource.view[1].aggregate[0].aggregate + " - " + dataSource.view[1].aggregate[0].value); // prints: min 1 console.log("Category: " + dataSource.view[2].value); // prints: Category: 3 console.log(dataSource.view[2].items.length + " items"); // prints: 3 items console.log(dataSource.view[2].aggregate[0].aggregate + " - " + dataSource.view[2].aggregate[0].value); // prints: min 2 });
You can also add more than one group with more than one aggregate:
var dataSource = new shield.DataSource({ ... group: [ { field: "ProductID", order: "asc", aggregate: [ { field: "ProductID", aggregate: "count", type: Number }, { field: "UnitPrice", aggregate: "count", type: Number } ] }, { field: "Discontinued", order: "asc", aggregate: [ { field: "ProductID", aggregate: "count", type: Number } ] } ] });
A live example of DataSource groups and aggregates can be found here: Grouping with aggregates