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.
Hi,
It is coming from https://bryntum.com/products/gantt/docs/api/Grid/widget/GridFieldFilterPickerGroup#config-grid
It's reading from the Gantt.
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.
Could you please upload a sample test case so we can check what's wrong?
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);
},
},
},
},
},Hi tasnim,
Any update on this one?
Hi,
This is working fine here
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?
Hi tasnim,
I took an example in gantt from bryntum and I edited the code there itself.
It still getting null there. Any extra changes need to be done. Please suggest.
Thanks,
Umesh,
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
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.