Group header in React Drop down list component
2 Feb 20236 minutes to read
The following example demonstrate about how to disable the Fixed group header in DropDownList through CSS by using visibility
attribute.
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the data with category
vegetableData = [
{ Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },
{ Vegetable: 'Spinach', Category: 'Leafy and Salad', Id: 'item2' },
{ Vegetable: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item3' },
{ Vegetable: 'Yarrow', Category: 'Leafy and Salad', Id: 'item4' },
{ Vegetable: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item5' },
{ Vegetable: 'Chickpea', Category: 'Beans', Id: 'item6' },
{ Vegetable: 'Green bean', Category: 'Beans', Id: 'item7' },
{ Vegetable: 'Horse gram', Category: 'Beans', Id: 'item8' },
{ Vegetable: 'Garlic', Category: 'Bulb and Stem', Id: 'item9' },
{ Vegetable: 'Nopal', Category: 'Bulb and Stem', Id: 'item10' },
{ Vegetable: 'Onion', Category: 'Bulb and Stem', Id: 'item11' }
];
// map the groupBy field with Category column
fields = { groupBy: 'Category', text: 'Vegetable', value: 'Id' };
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" popupHeight='200px' fields={this.fields} dataSource={this.vegetableData} placeholder="Select a vegetable"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the data with category
private vegetableData: { [key: string]: Object }[] = [
{ Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },
{ Vegetable: 'Spinach', Category: 'Leafy and Salad', Id: 'item2' },
{ Vegetable: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item3' },
{ Vegetable: 'Yarrow', Category: 'Leafy and Salad', Id: 'item4' },
{ Vegetable: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item5' },
{ Vegetable: 'Chickpea', Category: 'Beans', Id: 'item6' },
{ Vegetable: 'Green bean', Category: 'Beans', Id: 'item7' },
{ Vegetable: 'Horse gram', Category: 'Beans', Id: 'item8' },
{ Vegetable: 'Garlic', Category: 'Bulb and Stem', Id: 'item9' },
{ Vegetable: 'Nopal', Category: 'Bulb and Stem', Id: 'item10' },
{ Vegetable: 'Onion', Category: 'Bulb and Stem', Id: 'item11' }
];
// map the groupBy field with Category column
private fields: object = { groupBy: 'Category', text: 'Vegetable', value: 'Id' };
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" popupHeight='200px' fields={this.fields} dataSource={this.vegetableData} placeholder="Select a vegetable" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));