Our state of the art Gantt chart


Post by rodel.ocfemia »

Hi,
Is there a way to customize the date icon to different color and add character? For the following sample, I need to change the date icon to color orange and add question mark (?) inside.

Capture.PNG
Capture.PNG (38.12 KiB) Viewed 616 times

Post by tasnim »

Hi,

You could use this CSS to achieve this style for milestones

.b-gantt-task.b-milestone .b-gantt-task-content {
    background: orange;
}


.b-gantt-task.b-milestone .b-gantt-task-content::after {
    content : '?';
    position : absolute;
    font-size : 15px;
    transform : translate(-1px, 0px)
}

This is how it looks like

Attachments
Screenshot 2023-03-27 152355.png
Screenshot 2023-03-27 152355.png (2.96 KiB) Viewed 611 times

Post by rodel.ocfemia »

Hi Tasnim,

How to make this conditional? I need to apply the css for a particular rows only.


Post by tasnim »

You could use https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-cls field to set CSS class to a particular field according to a condition

And style it with your custom CSS cls
You could add this logic inside of taskRenderer https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#config-taskRenderer

Hope this will help.


Post by rodel.ocfemia »

I tried the following, but the date icon was not changed.

taskRenderer({ taskRecord }: { taskRecord: any }) {
	if (taskRecord.name === 'Website Design') {
		taskRecord.cls = 'b-gantt-task.b-milestone'
	}
},
{
	"id": 1,
	"name": "Website Design",
	"percentDone": 50,
	"startDate": null,
	"manuallyScheduled": false,
	"rollup": true,
	"endDate": "2022-03-14",
	"duration": 0,
	"expanded": true,
	"leafIconCls": false
},

Post by tasnim »

Hi,

You need set a custom class like this

    taskRenderer({ taskRecord }) {
        if (taskRecord.name === 'Inform management about decision') {
            taskRecord.cls = 'myClass';
        }
    }

And then you need to style with that class

.myClass.b-gantt-task.b-milestone .b-gantt-task-content {
    background: orange;
}

.myClass.b-gantt-task.b-milestone .b-gantt-task-content::after {
    content : '?';
    position : absolute;
    font-size : 15px;
    transform : translate(-1px, 0px)
}

This will only add this style to that specific task which has myClass class


Post by rodel.ocfemia »

It has now the ? character, but the background is still blue.


Post by tasnim »

It is working fine here with the gantt basic demo

What are the steps you've done to implement it?
Could you upload a runnable test case?

Attachments
Screenshot 2023-03-27 165420.png
Screenshot 2023-03-27 165420.png (32.82 KiB) Viewed 595 times

Post by rodel.ocfemia »

Hi,
Please find below.

App.scss

@import '~@bryntum/gantt/gantt.stockholm.css';

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : Poppins, "Open Sans", Helvetica, Arial, sans-serif;
    font-size      : 14px;
}

#container {
    flex    : 1 1 100%;
    display : flex;
}

.myClass.b-gantt-task.b-milestone .b-gantt-task-content {
    background: orange;
}

.myClass.b-gantt-task.b-milestone .b-gantt-task-content::after {
    content : '?';
    position : absolute;
    font-size : 15px;
    transform : translate(-2px, 0px)
}

GanttConfig.ts

import { GanttConfig } from '@bryntum/gantt';

const ganttConfig: Partial<GanttConfig> = {
    columns    : [
        { 
            type : 'name', 
            field : 'name',
            width : 250,
        },
        {
            text: 'Start',
            type: 'startdate',
            width: 100,
        },
        {
            text: 'Finish',
            type: 'enddate',
            width: 100,
        },
        {
            text: 'Duration',
            type: 'duration',
            width: 100,
        },
    ],
    viewPreset : 'weekAndDayLetter',
    barMargin  : 10,
    project : {
        transport : {
            load : {
                url : 'data/gantt-data.json'
            },
            sync: {
                url: '/Layout/ProjectTimeView/UpdateGanttData',
                method: 'POST',
              },
        },
        autoLoad  : true,
        autoSync: true,
    },
    taskRenderer({ taskRecord }: { taskRecord: any }) {
        if (taskRecord.name === 'Website Design') {
            taskRecord.cls = 'myClass'
        }
    },
};

export { ganttConfig };

GanttApp.tsx

import React, { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './GanttConfig';
import './App.scss';

const GanttApp: FunctionComponent = () => {
  const gantt = useRef<BryntumGantt>(null);

  return <BryntumGantt ref={gantt} {...ganttConfig} />;
};

export default GanttApp

gantt-data.json

{
  "tasks": {
    "rows": [
      {
        "id": 1000,
        "name": "Launch SaaS Product",
        "percentDone": 50,
        "startDate": "2022-03-14",
        "manuallyScheduled": false,
        "expanded": true,
        "children": [
          {
            "id": 1,
            "name": "Website Design",
            "percentDone": 50,
            "startDate": null,
            "manuallyScheduled": false,
            "rollup": true,
            "endDate": "2022-03-14",
            "duration": 0,
            "expanded": true
          },
          {
            "id": 100,
            "name": "Setup web server",
            "percentDone": 50,
            "duration": null,
            "startDate": null,
            "manuallyScheduled": false,
            "rollup": true,
            "endDate": null,
            "expanded": true
          }
        ]
      }
    ]
  }
}

App.tsx

import React from "react";
import GanttApp from "./GanttApp";

function App() {
    return (
        <GanttApp />
    );
}

export default App;

Post by tasnim »

I've updated our gantt basic (react) demo

And it works fine. I've attached that updated demo here

Please check and compare it with you app

Attachments
basic.zip
(2.06 MiB) Downloaded 33 times

Post Reply