Introducing the New React MultiColumn ComboBox
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (26).NET MAUI  (233)Angular  (115)ASP.NET  (49)ASP.NET Core  (80)ASP.NET MVC  (85)Azure  (42)Black Friday Deal  (1)Blazor  (243)BoldSign  (15)DocIO  (24)Essential JS 2  (108)Essential Studio  (198)File Formats  (73)Flutter  (140)JavaScript  (227)Microsoft  (121)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (988)TypeScript  (32)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (54)Windows Forms  (59)WinUI  (72)Word  (18)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (154)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (696)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (47)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (530)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (426)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (650)What's new  (355)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New React MultiColumn ComboBox

Introducing the New React MultiColumn ComboBox

TL;DR: The Syncfusion React MultiColumn ComboBox introduces advanced multi-column dropdown functionality, complete with customizable layouts, sorting, virtualization, and additional features. Let’s delve into its exceptional capabilities and the steps to get started.

We’re delighted to introduce the new Syncfusion React MultiColumn ComboBox component in the Essential Studio 2024 Volume 2 release.

The React MultiColumn ComboBox is a dropdown component that displays items in a detailed table-like format with multiple columns, offering more information than standard dropdown lists. It uses the Syncfusion Data Grid component, which allows for displaying and managing complex data structures in an organized and efficient manner. This makes it ideal for apps that require handling extensive datasets with ease.

Let’s explore this new component in detail!

Key features 

The key features of the React MultiColumn ComboBox are as follows: 

Customized column layouts

The React MultiColumn ComboBox allows us to customize the column layouts based on our specific needs. This feature enables data to be displayed across multiple columns, enhancing the user experience by presenting complex datasets in an organized manner and making it easier for users to navigate and select the required information.

Customized column layouts in React MultiColumn ComboBox
Customized column layout in React MultiColumn ComboBox

Organizing data with grouping

By organizing the data into groups, we can categorize related items and make navigation easier and quicker. This is particularly useful when dealing with large datasets, as grouping related items can save time when scrolling through longer lists.

Grouping data in React MultiColumn ComboBox
Grouping data in React MultiColumn ComboBox

Filtering

Filtering allows us to search for specific items within the MultiColumn ComboBox based on the text input. As users type into the input field, the component dynamically filters the data to display only those items that match the entered text. This helps users locate the desired information without scrolling through extensive lists.

Refer to the following image.

Filtering data in React MultiColumn ComboBox
Filtering data in React MultiColumn ComboBox

Sorting

Sorting arranges data in a specific order (ascending or descending) based on column values. In the React MultiColumn ComboBox, sorting allows users to organize data alphabetically, numerically, or by any other relevant criteria defined for the columns. Clicking the column header for the first time sorts the column in ascending order, clicking it again sorts it in descending order, and a third click clears the sorting. The available sort types are:

  • Single column sorting
  • Multiple column sorting
Sorting data in React MultiColumn ComboBox
Sorting data in React MultiColumn ComboBox

Data virtualization

This feature dynamically loads and displays data as the user scrolls or interacts with the component rather than loading the entire dataset at once. This significantly reduces the initial load time, making the component more responsive. It improves performance by efficiently managing memory and processing power, especially with large datasets.

Data virtualization feature in React MultiColumn ComboBox
Data virtualization feature in React MultiColumn ComboBox

Customizable templates

Customizable templates enable you to define how data should be displayed within the MultiColumn ComboBox. You can create templates for individual items, headers, and footers to provide a more customized and informative user interface. This ensures that the information is shown in a way that best suits your app’s needs.

Refer to the following image.

Custom templates in React MultiColumn ComboBox
Custom templates in React MultiColumn ComboBox

Supported platforms

We have introduced the new MultiColumn ComboBox component in the following platforms as part of the 2024 volume 2 release.   

Platform 

Demo 

Documentation 

JavaScript

JavaScript MultiColumn ComboBox demos

Getting started with JavaScript MultiColumn ComboBox

Angular

Angular MultiColumn ComboBox demos

Getting started with Angular MultiColumn ComboBox

React

React MultiColumn ComboBox demos 

Getting started with React MultiColumn ComboBox

Vue

Vue MultiColumn ComboBox demos 

Getting started with Vue MultiColumn ComboBox

ASP.NET Core

ASP.NET Core MultiColumn ComboBox demos

Getting started with ASP.NET Core MultiColumn ComboBox

ASP.NET MVC

ASP.NET MVC MultiColumn ComboBox demos

Getting started with ASP.NET MVC MultiColumn ComboBox

Getting started with the React MultiColumn ComboBox

We’ve seen the marvelous features of the React MultiColumn ComboBox component. Let’s see how to integrate it into our application.

Step #1: Create a new React app

First, create a new React app by installing the create-react-app NPM package in the desired location using the following command.

npx create-react-app my-app

Step #2: Add the Syncfusion packages

The NPM public registry contains all the Syncfusion Essential JS 2 packages currently available. Use the following command to install the React MultiColumn ComboBox component.

npm install @syncfusion/ej2-react-multicolumn-combobox --save

Step #3: Add the CSS references for the Syncfusion React components

After installing the NPM package, the CSS files for the Syncfusion React components will be available in the ../node modules/@syncfusion package folder. Import the React MultiColumn ComboBox component’s required CSS references as follows in the src/App.css file.

@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-react-multicolumn-combobox/styles/material3.css";

Step #4: Adding React MultiColumn ComboBox to the app

Now, import the MultiColumnComboBoxComponent from ej2- react-multicolumn-combobox package in the App.tsx file. Define each column using the ColumnDirective tag inside the ColumnsDirective tag, as shown in the following example.

import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2- react-multicolumn-combobox'; 
import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
 
function App() {
// Define the array of object data.
  const employeeData: Object[] = [ 
    { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
    { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
    { "EmpID": 1003, "Name": "John", "Designation": "Tester", "Country": "Germany" },
    { "EmpID": 1004, "Name": "Robert King", "Designation": "Product Manager", "Country": "India" },
    { "EmpID": 1005, "Name": "Steven Buchanan", "Designation": "Developer", "Country": "Italy" },
    { "EmpID": 1006, "Name": "Jane Smith", "Designation": "Developer", "Country": "Europe" },
    { "EmpID": 1007, "Name": "James Brown", "Designation": "Developer", "Country": "Australia" },
    { "EmpID": 1008, "Name": "Laura Callahan", "Designation": "Developer", "Country": "Africa" },
    { "EmpID": 1009, "Name": "Mario Pontes", "Designation": "Developer", "Country": "Russia" }
  ];
  // Maps the appropriate column to fields property.
  const fields: Object = { text: 'Name', value: 'EmpID' };
  return ( 
    <div id='timeline' style={{ height: "350px" }}> 
      <MultiColumnComboBoxComponent dataSource={this.employeeData} fields={this.fields}>
           <ColumnsDirective>
              <ColumnDirective field='EmpID' header='Employee ID' width={120}></ColumnDirective>
 	      <ColumnDirective field='Name' header='Name' width={120}></ColumnDirective>
	      <ColumnDirective field='Designation' header='Designation' width={120}></ColumnDirective>
 	      <ColumnDirective field='Country' header='Country' width={100}></ColumnDirective>
          </ColumnsDirective>
      </MultiColumnComboBoxComponent>
    </div> 
  ); 
} 
 
const root = ReactDOM.createRoot(document.getElementById("element")); 
root.render(<App />);

Step #5: Run the application

Finally, run the application in the browser using the following command.

npm start

Refer to the following image.

Integrating MultiColumn ComboBox in React application
Integrating MultiColumn ComboBox in React application

Conclusion

Thanks for reading! We hope you enjoyed learning about the new Syncfusion React MultiColumn ComboBox and its features. This component is now available in our 2024 Volume 2 release. Check out our Release Notes and What’s New pages to discover all the new updates in this release. Try them out and share your thoughts in the comments section below!

The newest version of Essential Studio is available on the license and downloads page for existing Syncfusion customers. If you are not a customer, try our 30-day free trial to test these new features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Comments (1)

Any idea when Blazor support will be added ?

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed