Vue SelectBox - Customize Group Headers
By default, group headers display text of the key field in a bold font. If you need a more flexible solution, specify groupTemplate. In Angular and Vue, you can declare it in the markup. In React, you can use a render function or component as shown in the following example:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import SelectBox from 'devextreme-react/select-box';
- import DataSource from "devextreme/data/data_source";
- const fruitsVegetables = [{
- key: "Fruits",
- items: [
- { name: "Apples", count: 10 },
- { name: "Oranges", count: 12 },
- { name: "Lemons", count: 15 }
- ]
- }, {
- key: "Vegetables",
- items: [
- { name: "Potatoes", count: 5 },
- { name: "Tomatoes", count: 9 },
- { name: "Turnips", count: 8 }
- ]
- }];
- const selectBoxDataSource = new DataSource({
- store: fruitsVegetables,
- map: function(groupedItem) {
- let overallCount = 0;
- groupedItem.items.forEach(function(item) {
- overallCount += item.count;
- })
- return Object.assign(groupedItem, { overallCount: overallCount });
- }
- });
- const renderGroup = (data) => {
- return (
- <p>
- {data.key + ' | Count: ' + data.overallCount}
- </p>
- );
- }
- class App extends React.Component {
- render() {
- return (
- <SelectBox ...
- dataSource={selectBoxDataSource}
- grouped="true"
- displayExpr="name"
- valueExpr="count"
- groupRender={renderGroup}
- />
- );
- }
- }
- export default App;
If you use jQuery, use DOM manipulation methods to combine the HTML markup for group headers. To apply this markup, use the groupTemplate callback function as shown in the following code.
- const fruitsVegetables = [{
- // ...
- // omitted for brevity
- // see the AngularJS code
- }];
- $(function() {
- $("#selectBoxContainer").dxSelectBox({
- dataSource: new DevExpress.data.DataSource({
- store: fruitsVegetables,
- map: function(groupedItem) {
- let overallCount = 0;
- groupedItem.items.forEach(function(item) {
- overallCount += item.count;
- });
- return $.extend(groupedItem, { overallCount: overallCount })
- }
- }),
- grouped: true,
- groupTemplate: function(groupData, _, groupElement) {
- groupElement.append(
- $("<p>").text(groupData.key + " | Count: " + groupData.overallCount)
- )
- },
- displayExpr: 'name',
- valueExpr: 'count'
- });
- });
In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.