Our state of the art Gantt chart


Post by kinshuks »

Hi Team,

We are Currently in the feasibility phase of our project and are testing the bryntum gantt to see if it has the features we are looking for, we have been able to find almost all of what we need but we havent found any mention of there being a support for indeterminate state for checkbox that we get in selection mode config. Moreover if this feature is not available, is there a way to achieve the same with minimal customizations ?


Post by marcio »

Hey kinshuks,

Thanks for the message, we're glad that you're testing our suite and hope that you decide to use it in your project. Unfortunately, currently, we don't have support for indeterminate state for checkbox, but I create a feature request ticket to add it to our roadmap
https://github.com/bryntum/support/issues/5712

You can try to set it up directly in your checkbox column in a renderer function https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer
with something like this

{
            type  : 'check',
            field : 'field',
            // In the column renderer, we get access to the record and CheckBox widget
            renderer({ record, widgets }) {
                const checkboxElement = widgets[0].element.getElementsByTagName('input')[0];
                checkboxElement.indeterminate = true;
            }
        }

But as we attach the data layer with the UI/rendering layer, is not guaranteed to work, so you'll probably have to wait for the implementation (if you want to speed up that development, you can get in touch with our services [at] bryntum.com and paid for it)

Best regards,
Márcio


Post by kinshuks »

Hi,
I tried using the solution you suggested but the checkbox doesnt work, here is the config that we are using

/**
 * Application configuration
 */
import { GanttConfig } from '@bryntum/gantt';


const ganttConfig: Partial<GanttConfig> = {
    columns : [
        {
            type  : 'check',
            field : 'done',
            text : 'CheckColumn', 
            flex : 1, 
            align : 'center',
            // In the column renderer, we get access to the record and CheckBox widget
            //@ts-ignore
            renderer({ widgets }) {
                const checkboxElement = widgets[0].element.getElementsByTagName('input')[0];
                checkboxElement.indeterminate = true;
            }
        },
        { type : 'name', field : 'name', width: 350, editor : false, 
            //@ts-ignore 
            renderer({ cellElement, record, row }) {
                // Add/remove classNames on the row
                row.assignCls({
                    private    : record.access === 'private',
                    deprecated : record.deprecated
                });
                cellElement.style.backgroundColor = '#b2ffe9';
                cellElement.style.color = '#000';
                return `${record.wbsCode} - ${record.name}`;
            }
        },
        { type : 'date', field : 'startDate', text : 'start date', editor : false,
            //@ts-ignore 
            renderer({ cellElement, record, row, value }) {
                // Add/remove classNames on the row
                row.assignCls({
                    private    : record.access === 'private',
                    deprecated : record.deprecated
                });
                cellElement.style.backgroundColor = '#b2ffe9';
                cellElement.style.color = '#000';
                return record.startDate?.toLocaleDateString();
            }
        },
        { type : 'date', field : 'endDate',text : 'end date', editor : false,
            //@ts-ignore 
            renderer({ cellElement, record, row, value }) {
                // Add/remove classNames on the row
                row.assignCls({
                    private    : record.access === 'private',
                    deprecated : record.deprecated
                });
                cellElement.style.backgroundColor = '#b2ffe9';
                cellElement.style.color = '#000';
                return record.endDate?.toLocaleDateString();
            }
        },
        { type : 'duration', field : 'duration', editor : false },
        { type : 'percentdone', text : 'Progress' },
        {
            text    : 'Widget',
            width   : 150,
            type    : 'widget',
            cellCls : 'age',
            widgets : [{
                type     : 'button',
                text     : 'Add age',
                flex     : 1,
                icon     : 'b-fa b-fa-plus',
                cls      : 'b-blue b-raised',
                onAction : () => {
                    alert("Hi")
                }
            }],
            //@ts-ignore 
            renderer({ cellElement, record, row, value }) {
                // Add/remove classNames on the row
                row.assignCls({
                    private    : record.access === 'private',
                    deprecated : record.deprecated
                });
                cellElement.style.backgroundColor = '#b2ffe9';
                cellElement.style.color = '#000';
                return ;
            }
        },
    ],
    // taskRenderer: ({ taskRecord, renderData }) => {
    //     return [
    //         {
    //             html  : taskRecord.name,
    //             style : 'padding-top : 0.5em, padding-bottom: 0.5em, margin-bottom: 1em'
    //         },
    //     ];
    // },
    viewPreset : 'weekAndDayLetter',
    barMargin  : 10,
    // selectionMode: {
    //     row: false,
    //     cell: false,
    //     multiSelect: true,
    //     rowCheckboxSelection: true,
    //     checkbox: true,
    //     showCheckAll: true,
    //     includeChildren : true,
    //     deselectFilteredOutRecords : true,
    // }
};

export { ganttConfig };

This exported config is used in the BryntumGantt react component which comes as part of the library, and we added a feild called 'done' to our data as per the documentation. But when we click on the checkbox nothing happens changing the value of done field from false to true does render the checkbox in the checked state but we still cant toggle it.


Post by alex.l »

Yes, I checked that and suggested solution doesn't work. Actually it's not supported, we need to wait for the ticket, unfortunately.

All the best,
Alex


Post by ogardnerffdc »

Plus 1 for this feature!


Post by mats »

Thanks for your feedback!


Post Reply