Our state of the art Gantt chart


Post by umesh »

Hi there,

In the example https://bryntum.com/products/gantt/examples/fieldfilters/ , while filtering the records on name using the is one of operator, the selection box(the box with dropdown) came with the total names that are on the board. How that data came into that dropdown .Please see the attachment.
I want to achieve the same in my case. Please help..

Thanks,
Umesh.

Attachments
filter.PNG
filter.PNG (124.66 KiB) Viewed 397 times

Post by tasnim »


Post by umesh »

Hi tasnim,

How can I use that in my code. Actually I referred above docs and we need to declare gantt. Did, but it's not working in my case.


Post by tasnim »

Could you please upload a sample test case so we can check what's wrong?


Post by umesh »

Here is my code

  {
          type: 'button',
          ref: 'filterAllButton',
          gantt,
          icon: 'b-gantt-filter',
          tooltip: intl.formatMessage({ id: 'Filter' }),
          menu: {
            pickergroup: {
              grid: gantt,
              type: 'fieldfilterpickergroup',
              fields: fields,
              filters: [
                {
                  property: 'name',
                  operator: 'include',
                  value: '',
                },
              ],
              listeners: {
                change: (data: any) => {
                  const { filters } = data;
                  const nonEmptyFilters = filters.filter((filter: { property: any }) => filter.property);
                  gantt.current.instance.taskStore.filter(nonEmptyFilters);
                },
              },
            },
          },
        },

Post by umesh »

Hi tasnim,

Any update on this one?


Post by tasnim »

Hi,

This is working fine here

Screenshot 2023-05-24 132509.png
Screenshot 2023-05-24 132509.png (28.67 KiB) Viewed 357 times

This is the code I used to achieve this

{
          type: 'button',
          ref: 'filterAllButton',
          icon: 'b-gantt-filter',
          tooltip: 'Filter',
          menu: {
            pickergroup: {
              type: 'gridfieldfilterpickergroup',
              grid : gantt,
              fields: [
                { name: 'name', type: 'string', text: 'Name' },
                { name: 'status', type: 'string', text: 'Status' },
              ],
              filters: [
                {
                  property: 'name',
                  operator: 'notEmpty',
                  value: '',
                },
              ]
            },
          }
        }

If still not working for you, Would you please provide a runnable test case so we could run and reproduce and debug the issue?


Post by umesh »

Hi tasnim,

I took an example in gantt from bryntum and I edited the code there itself.

fl.PNG
fl.PNG (74.05 KiB) Viewed 346 times

It still getting null there. Any extra changes need to be done. Please suggest.

Thanks,
Umesh,


Post by tasnim »

Hi,

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

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

const gantt = new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',

project : {
    autoLoad  : true,
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
},

columns : [
    { type : 'name', width : 250 }
],
tbar : [],

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

gantt.tbar.add({
          type: 'button',
          ref: 'filterAllButton',
          icon: 'b-gantt-filter',
          tooltip: 'Filter',
          menu: {
            pickergroup: {
              type: 'gridfieldfilterpickergroup',
              grid : gantt,
              fields: [
                { name: 'name', type: 'string', text: 'Name' },
              ],
              filters: [
                {
                  property: 'name',
                  operator: 'notEmpty',
                  value: '',
                },
              ]
            },
          }
        }
)

And this is the output it shows

Screenshot 2023-05-24 174333.png
Screenshot 2023-05-24 174333.png (143.09 KiB) Viewed 342 times

Post by umesh »

Hi tasnim,

Please find my code below. I'm still unable to achieve the functionality.Is there anything wrong? We are not allowed to share the complete code, so I was uploading sample of it. But my entire code is in the same format. Please help with this.

ProjectGantt = () => {
    const intl = useIntl();
const ganttConfig: Partial<typeof GanttConfig> = {
      infiniteScroll: true,
      stateId: 'mainGantt',
      project: {
        taskModelClass: GanttCustomTasks,
        dependencyModelClass: DependencyModel,
        autoLoad: true,
        autoSync: true,
        transport: {
          load: {
           //,
            },
          },
          sync: {
            //
          },
        },
        validateResponse: false,
        
columns: [ { id: 'name', text: intl.formatMessage({ id: 'Name' }), type: 'name', // }, }, { id: 'function', text: intl.formatMessage({ id: 'Function' }), field: 'function', // }, { id: 'owner', text: intl.formatMessage({ id: 'Owner' }), field: 'owner', // }, }; (ganttConfig.tbar = [ { type: 'button', ref: 'filterAllButton', icon: 'b-gantt-filter', tooltip: intl.formatMessage({ id: 'Filter' }), menu: { pickergroup: { grid: ganttConfig, type: 'fieldfilterpickergroup', fields: [ { name: 'name', type: 'string', text: 'Name' }, { name: 'owner', type: 'string', text: 'Owner' }, { name: 'function', type: 'string', text: 'Function' }, ], filters: [ { property: 'name', operator: 'includes', value: '', }, ], }, }, }, }

Thanks,
Umesh.


Post Reply