Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Resource View in EJ2 Gantt Chart: A Perfect Assistant to Manage Resources

Resource View in EJ2 Gantt Chart: A Perfect Assistant to Manage Resources

Resource management is a vital process in every organization. Resources should be allocated in projects effectively and efficiently to achieve the best productivity. Let’s consider human resources, for instance. It requires planning, scheduling tasks, and placing appropriate employees in the right teams at the right time.

Project managers are responsible for allocating employees to projects and continuously monitoring the performance of the teams in completing the projects according to their schedules. It is a challenging task for managers to accomplish without the right tool.

The Syncfusion Gantt Chart perfectly aids in resource management with its clean and accurate visualization to capture all the needed information in a single place. Managers can track work progress and easily notice if any resource was over allocated. Dynamically, managers can distribute new work or change the existing work for a resource. By using UI interaction like drag and drop, managers can easily re-assign work from one resource to another in case of over allocation or change the scheduled work dates.

Let’s see how to get started with the Syncfusion React Gantt Chart control in this blog and the reasons to choose resource view in Gantt Chart for perfect resource management.

Getting started with React Gantt Chart

Setting up the development environment

Step 1: Use the create-react-app NuGet package to create a React application with basic configuration. For this, you need to install the create-react-app CLI using the following command. Execute this command in the terminal in Visual Studio Code.

npm install -g create-react-app

Step 2: Then, create a new React application using the following command.

create-react-app react-gantt

Here, react-gantt is the name of the application, though you can name it as you wish.

Step 3: Ensure that your application has been created properly by running it is using the following command.

npm start

While running this command, the React application will be launched in the browser with the localhost:3000 URL.

Configuring Gantt Chart in a React application

The React application is ready now, and you can configure the Gantt Chart component in it. The Gantt Chart component is available in the @syncfusion/ej2-react-gantt package.

Install this package in your React application. Do this by executing the following command.

npm install @syncfusion/ej2-react-gantt --save

Themes in Gantt Chart

The following themes are available to paint the Gantt Chart according to your website theme preference:

  • Material
  • Bootstrap
  • Fabric
  • High contrast

Gantt Chart has some subcomponents, too. To apply a theme to a component, add the required theme files from the node-modules folder for all the subcomponents.

You can also load it from a single theme file for all the Syncfusion components you’re using. Here, we are going to reference a common theme file for all of them. In this sample, we have added the Material theme in the index.html file.

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

Initializing Gantt Chart

We have configured the packages and themes to render Gantt Chart in the application, and now we can initialize the component using the following code example in the App.js file.

import * as React from 'react';
import { GanttComponent, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
export default class App extends React.Component {
  constructor() {
    super(...arguments);
	}
  render() {
    return (
      <GanttComponent>
        <ColumnsDirective>
          <ColumnDirective></ColumnDirective>         
        </ColumnsDirective>
        <Inject services={[]} />
      </GanttComponent>
    );
  }
 };

Now, the Syncfusion React Gantt Chart component is ready to use.

Why Syncfusion Gantt Chart’s resource view for resource management?

Easy API structure

Easily enable required features for Gantt Chart by using API’s support and it is also possible to change API’s values by externally to make more interactive to the users. Resource view in Gantt Chart, we have introduced a new API to define the Gantt Chart view type, which can be used to easily switch between project view and resource view.

Refer to the following code example.

<GanttComponent dataSource={resourcesData} viewType='ResourceView'              
        resourceFields={this.resourceFields} taskFields={this.taskFields}      
        height='410px' resources={resourceCollection}>
        <ColumnsDirective>
          <ColumnDirective field='TaskID' visible={false}>
           </ColumnDirective>
          <ColumnDirective field='TaskName' headerText='Name'>
           </ColumnDirective>
        </ColumnsDirective>        
</GanttComponent>

Clear visual design

The work and resources can be grouped in a hierarchical visual design to track the work progress of each task. Also, Gantt Chart allows you to display the allocated tasks in a single row as the collapsed state in each resource by setting the enableMultiTaskbar property as true.

Refer to the following code example.

<GanttComponent  dataSource={resourcesData} viewType='ResourceView'               
        enableMultiTaskbar= {true} resourceFields={this.resourceFields} taskFields={this.taskFields}>  </GanttComponent>
Work and Resources Grouped in Hierarchical Visual Design in Gantt Chart Resource View
Work and Resources Grouped in Hierarchical Visual Design in Gantt Chart Resource View

User-friendly UI interaction

You can drag and drop the task row from one resource to another by easily modifying the scheduling value of each task. In that scenario:

  • Cell editing support is used to change the specific field value.
  • Dialog editing support is used to modify multiple field values at the single database request.

Refer to the following code example.

<GanttComponent viewType='ResourceView' editSettings={this.editSettings} allowRowDragAndDrop={true} 
 resourceFields={this.resourceFields} taskFields={this.taskFields} resources={resourceCollection}>       
    <Inject services={[Edit, RowDD]} />
</GanttComponent>
User-Friendly Interaction in Gantt Chart Resource View
User-Friendly Interaction in Gantt Chart Resource View

Over-allocation indicator

Resource view in the Gantt Chart highlights the range of days if a resource has been allocated too much work to complete within the resource’s available time. This way, project managers can easily monitor and split the over-allocated work with other resources, which helps them complete their goal at the right time.

Refer to the following code example.

<GanttComponent viewType='ResourceView' showOverAllocation={true}>       
</GanttComponent>
Over-Allocation Indicator in Resource View
Over-Allocation Indicator in Resource View

Customization

We have a lot of customization options like displaying the resource picture in the tooltip by using template support, displaying the Gantt Chart with custom color changes in the taskbar, and customizing.

Refer to the following code example.

import * as React from 'react';
import { GanttComponent} from '@syncfusion/ej2-react-gantt';
export default class App extends React.Component {
  constructor() {
    super(...arguments);
    
    this.templateTaskbar = this.taskbarTooltip;
    this.tooltipSettings = {
      showTooltip: true,
      taskbar: this.templateTaskbar.bind(this)
    };    
  taskbarTooltip(props) {
    var src = 'images/' + props.ganttProperties.taskName + '.png';
    return (    
    <table>
      {props.hasChildRecords && props.TaskName &&   
        <tr>
          <td rowSpan={3} style={{ padding: '3px' }}><img src={src} height='40px' /></td>
          <td style={{ padding: '3px' }}>Task done By:</td>
          <td style={{ padding: '3px' }}>{props.ganttProperties.taskName}</td>
        </tr>}        
      <tr>
        <td style={{ padding: '3px' }}>Starts On:</td>
        <td style={{ padding: '3px' }}>{this.ganttInstance.getFormatedDate(props.StartDate)}</td>
      </tr>
      <tr>
        <td style={{ padding: '3px' }}>Ends On:</td>
        <td style={{ padding: '3px' }}>{this.ganttInstance.getFormatedDate(props.EndDate)}</td>
      </tr>
    </table>);
  };

  render() {
    return (
      <GanttComponent  viewType='ResourceView' tooltipSettings={this.tooltipSettings}>    
      </GanttComponent>
    );
  }
};
Customized Resource View in Gantt Chart
Customized Resource View in Gantt Chart

GitHub sample

You can download the complete final sample application from this GitHub repository.

Conclusion

In this article, we have explained why you need a resource view in Gantt Chart for resource management with its benefits. We also provided the steps to getting started with it. To learn more about the resource view in Gantt Chart, refer to this sample browser and documentation. The Syncfusion Gantt Chart resource view is also available for the Blazor, ASP.NET (Core, MVC, Web Forms), UWP, JavaScript, Angular, and Vue platforms.

Resource management is a combination of art and science. So, let’s use Syncfusion Gantt Chart’s resource view to perfectly manage our resources!

If you have any questions, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top