Premium support for our pure JavaScript UI components


Post by jit@flowit.dk »

Hi,

We would like to assign fixed widths to all our columns except the name column, which is to consume remaining available space - much like what can be achieved using an HTML table: https://jsfiddle.net/u0onL5j8/1/

How do we achieve the desired behaviour ?

Best regards
Jimmy Thomsen


Post by tasnim »

Hi,

You can achieve it very easily with this https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-flex config of column

Set flex to 1 in the name column and rest of other columns set their widths. And as you're in gantt you'd also need to adjust the locked grid width (columns grid)

Try replacing the code of this demo https://bryntum.com/products/gantt/examples/basic/ with the below code

import { Gantt, StringHelper } from '../../build/gantt.module.js?477293';
import shared from '../_shared/shared.module.js?477293';

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },

columns : [
    { type : 'wbs', width : 50 },
    { type : 'name', flex : 1 },
    { type : 'startdate', width : 100 },
    { type : 'enddate', width : 100 }
],

subGridConfigs : {
    locked : { width : 800 }
},

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-subGridConfigs
And you'll get this result

msedge_hVSQnFunli.png
msedge_hVSQnFunli.png (149.68 KiB) Viewed 69 times

Hope it helps.

Best regards,
Tasnim


Post by jit@flowit.dk »

Very nice - thanks @tasnim :-)

Best regards
Jimmy Thomsen


Post Reply