Page 1 of 2

[REACT] Group is not working

Posted: Tue Sep 20, 2022 10:05 pm
by gorakh.nath

Hi team,
I was trying to use the groupFeature but it is not working.
the config that I added in schedulerPro is:-

  groupFeature={{
            field: 'taskType'

      }}

The column of the resources is defined as:-

"columns": [
          {
            "filterable": true,
            "field": "name",
            "text": "Technician"
          },
          {
            "field": "taskType",
            "text": "Task Type"
          },
          {
            "filterable": true,
            "field": "id",
            "text": "Unique ID",
            "sortable": false
          },
          {
            "filterable": true,
            "field": "team",
            "text": "Team",
            "sortable": true
          },
          {
            "filterable": true,
            "field": "name",
            "text": "Technician1"
          },
          {
            "filterable": true,
            "field": "id",
            "text": "Unique ID1",
            "sortable": false
          },
          {
            "filterable": true,
            "field": "team",
            "text": "Team1",
            "sortable": true
          },
          {
            "filterable": true,
            "field": "role",
            "text": "Role",
            "sortable": true
          },
          {
            "filterable": true,
            "field": "joining",
            "options": {
              "type": "time"
            },
            "text": "joining Date",
            "sortable": true
          },
          {
            "field": "zValue",
            "options": {
              "zTimer": true
            },
            "text": "SLA Timer"
          },
          {
            "filterable": true,
            "field": "workingTime",
            "options": {
              "dateRangeType": "dateTime",
              "type": "dateRange"
            },
            "text": "Working Time",
            "sortable": true
          },
          {
            "filterable": true,
            "field": "places",
            "options": {
              "groupString": true
            },
            "text": "Places"
          }
        ]

The values for my resources are like:-

 "resources": [
        {
           "taskType": "Build",
          "calendar": "day",
          "image": "https://www.bryntum.com/examples/examples-scheduler/_shared/images/users/arcady.jpg",
          "joining": "2021-01-01 12:00",
          "role": "Core developer",
          "statusColor": "blue",
          "allowTechnicianOverlap": true,
          "workingTime": [
            {
              "start": "2021-11-11 12:00",
              "end": "2021-11-11 14:00"
            },
            {
              "start": "2021-11-11 12:00",
              "end": "2021-11-11 14:00"
            }
          ],
          "placesCalendar": [
            "test1",
            "test2"
          ],
          "team": "platform",
          "icons": [
            "@iconlib.WifiOff",
            "@iconlib.MenuSchedulingDispatchSolidGrey"
          ],
          "zValue": {
            "isSlaPauseDisplayed": "true",
            "slaTextColor": "#FFFFFF",
            "slaColor": "#ff5f49",
            "iconUrl": "https://www.bryntum.com/examples/examples-scheduler/_shared/images/users/arcady.jpg",
            "slaValue": "1d 19h 48m"
          },
          "important": true,
          "name": "Arcady",
          "id": "a"
        },
        {
          "taskType": "Build",
          "important": true,
          "image": "https://www.bryntum.com/examples/examples-scheduler/_shared/images/users/arcady.jpg",
          "joining": "2021-11-02",
          "places": [
            "test1",
            "test2"
          ],
          "role": "Devops",
          "name": "Arun",
          "id": "a1",
          "team": "platform",
          "icons": [
            "@iconlib.WifiOff",
            "@iconlib.MenuSchedulingDispatchSolidGrey"
          ]
        }]

I am attaching the screenshot:
The version I am using is:-

    "@bryntum/schedulerpro": "5.0.0",
    "@bryntum/schedulerpro-react": "5.0.0",

Please suggest , what can be the reason.


Re: [REACT] Group is not working

Posted: Tue Sep 20, 2022 10:24 pm
by marcio

Hello gorakh.nath,

Could you please try to update to the latest version?? I tested using 5.1.3 and on both ways to set up the group feature it worked just fine. Used in our inline data react demo.

groupFeature={{field: 'taskType'}}

and

features: {
	group: {
		field: 'taskType'
	}
},

Re: [REACT] Group is not working

Posted: Wed Sep 21, 2022 1:45 pm
by gorakh.nath

Hi marcio,
In first page load I can see the grouping but after some second grouping is disappearing and showing the same column as I shared in above screenshot.


Re: [REACT] Group is not working

Posted: Wed Sep 21, 2022 2:28 pm
by marcio

Hey gorakh.nath,

Are you able to set up a sample project with your configuration and some sample data, you can get one of our demos, and add your code with the described bug? That way will be a lot easier for us to debug and assist you to identify what's causing that behavior.


Re: [REACT] Group is not working

Posted: Sun Sep 25, 2022 9:03 am
by gorakh.nath

Hi @marcio,
I am able to reproduce the issue, I am attaching the sample app.
Whenever we are loading the values from server and not on the first load, the grouping is going away.
for example in the sample application that I have attached if we load data like:-
Working code:-

 project={{
                        eventsData: data.events.rows,
                        resourcesData: data.resources.rows
                    }}

Not working code:- resources setting after page renders

 project={{
                        eventsData: data.events.rows,
                        resourcesData: resources
                    }}

On more this you can check if columns passing like then it is working fine:

columns={data.columnHelper}

but once we load column also after page render then events will not show in the UI.
Please try to assign column, resources and events in two different use case:-

  1. Passing these data on page load
  2. Pass these data after page load

Re: [REACT] Group is not working

Posted: Mon Sep 26, 2022 5:13 pm
by gorakh.nath

Hi Team,
Any update on the above issue?


Re: [REACT] Group is not working

Posted: Mon Sep 26, 2022 7:52 pm
by marcio

Hello gorakh.nath,

I have some notes for the project that you shared

  • Update 4.2.1 to 5.1.3 (latest version)

  • Remove '@bryntum/schedulerpro/schedulerpro.umd' imports to ‘@bryntum/schedulerpro/‘

With that, you'll be able to load columns and data with React state variables

 const [columns, setColumn] = useState([]);
    const [resources, setResources] = useState([]);
    const [events, setEvents]= useState([]);

useEffect(()=>{
    setInterval(()=>{
        console.log('render');
        setColumn(data.columnHelper);
        setResources(data.resources.rows);
        setEvents(data.events.rows);
    }, 1000);

},[])
   
   ...
   
columns={columns} project={{ autoLoad: true, events, resources }}

Besides that, the non-grouping part it's a bug, I wrote a ticket for it https://github.com/bryntum/support/issues/5323


Re: [REACT] Group is not working

Posted: Mon Sep 26, 2022 8:23 pm
by gorakh.nath

Hi team,
This will be critical issue for us because we have to deliver the product, Please provide some workaround to resolve this issue. We need grouping of resources in one of our project.


Re: [REACT] Group is not working

Posted: Tue Sep 27, 2022 2:02 pm
by marcio

Hello gorakh.nath,

First, you need to update to the latest version and check if that works correctly (as we don't provide support for back versions). If you want to prioritize that bug fix, you can use our services by emailing sales@bryntum.com.

We'll be waiting for the update project :)


Re: [REACT] Group is not working

Posted: Tue Sep 27, 2022 3:19 pm
by gorakh.nath
 "@bryntum/schedulerpro": "5.1.3",
  "@bryntum/schedulerpro-react": "5.1.3",

After updating the version same issue is coming.Adding sample app for reference.