Perform Sorting In Blazor Gantt Chart
The Blazor Gantt Chart is a project planning and management tool that provides a Microsoft Project-like interface to display and manage hierarchical tasks with timeline details. In this quick-start project, you can learn how to enable sorting, sort columns at initial load, sort columns dynamically at runtime, sort custom columns, and clear all the sorted columns in the Syncfusion Gantt Chart in a Blazor WebAssembly application. You’ll also go over the available sort events.
Prerequisites
- Visual Studio 2022
How to run the project
- Checkout this project to a location in your disk.
- Open the solution file using the Visual Studio 2022.
- Restore the NuGet packages by rebuilding the solution.
- Run the project.
Further help
To get more help, check the ASP.NET Core Blazor documentation.
Features and benefits
Data binding
Data binds seamlessly with various local and remote data sources such as JSON, RESTful services, OData services, and WCF services.
Timeline
The Blazor Gantt Chart supports different configurable timeline views: hour, day, week, month, and year.
Task relationships
Create relationships among different tasks to determine the execution order using finish-to-start, start-to-finish, start-to-start, and finish-to-finish task link types.
Editing
Edit a task's fields directly in their respective cells using a dialog or interactively using taskbars.
Unscheduled tasks
The Blazor Gantt Chart provides built-in support for unscheduled tasks. These are tasks not scheduled with proper dates or duration at the start of the project but that can be scheduled properly at any time during the project implementation based on factors such as resource availability and dependent tasks.
Filtering
Data across all columns can be filtered using menu filtering and toolbar search options.
Sorting
Sort a column in ascending or descending order by simply clicking the header. A Ctrl + header click performs multiple sorting.
Selection
Select rows or cells by clicking them. More than one row or cell can be selected by holding the Ctrl or Shift key, or programmatically. A range of cells can be selected by dragging the pointer over cells. This helps copy the selected rows or cells to the clipboard.
Columns
Columns define the schema of a data source in the Blazor Gantt Chart. They support formatting, column definitions, column chooser, column menu, column reordering, and other features.
Read-only
Enable and disable the editing operations using the read-only option.
Appearance customization
Customize the appearance and style of the taskbars using templates.
Auto focus tasks
By selecting the rows in the tree grid section, the tasks that are not visible in the viewport get focused on.
Tooltip
The tooltip displays task information, editing actions for the taskbar, and connector lines when the mouse hovers over a task.
Highlight days and events
Highlight important days or events in a project using event markers.
Data markers
A data marker in a chart represents an important event that occurred on a specific data point. Hovering on a data marker shows an additional description of the event in the tooltip.
Toolbar
Use toolbar options for editing, searching, expanding, collapsing, and deleting selected tasks along with adding a new task.
Mobile-optimized with browser support
Touch support
User-friendly touch gestures and an interactive UI design on Blazor Gantt Chart help produce the best user experience. All Gantt Chart features work on touch devices with zero configuration.
Responsiveness
The Gantt Chart layout can be viewed on various devices. It is also possible to hide specific columns for certain screen sizes using column-based media query support.
Accessibility
Keyboard navigation
Every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component.
Screen reader
The Blazor Gantt Chart has complete WAI-ARIA accessibility support. The Gantt Chart UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Globalization and localization
Globalization
The Blazor Gantt Chart enables users from different locales to use it by formatting the date, currency, and numbering to suit local preferences. It uses the internalization (i18n) library to handle value formatting.
Localization
Users can localize all the strings used in the user interface of the Blazor Gantt Chart control. It uses the localization (l10n) library to localize UI strings.
Related links
Learn More about Blazor Gantt Chart
Download Free Trial
Pricing
Documentation
Online Examples
Watch a How-to Video
Community Forums
Suggest a feature
About Syncfusion Blazor components
Syncfusion's Blazor component library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Gantt Chart, we provide popular Blazor components such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.
About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today, we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing with our Bold product line. Many customers have saved millions in licensing fees by deploying our software.
[email protected] | www.syncfusion.com | 1-888-9 DOTNET
