[REACT] Hide Events for Multi-Grouping: Scheduler Pro

[chawkins8584]

I have a project view for our scheduler that is utilizing multi-group. I currently have resources grouped by event move to locations. What I am looking to do is hide events which are not the same as the group header. I would like some guidance in how I can possibly get this done. I have a picture attached with the events I want to hide x'd out below

projectView.png (68.14 KiB) Viewed 1045 times

[alex.l]

Hi,

Please provide more context. What is multi-grouping you implemented? What does it mean "event is not same as the group header"?
Any chance to get a fragment of the code with the logic you implemented? As well as get "event is not same as the group header" in code. Is it about name or other attribute?

[chawkins8584]

Hi Alex,

Sorry for the confusion. I have an attribute job_move_to in my EventModel, this attribute is what I am using to compile a list of groups within a given time frame for my multi-grouping view. For instance, if I have two active events for my asset, lets call it truck 005, the job_move_to location is "20-001 job-1" for event 1 and job_move_to location is "General Shop" for event 2. I grab these locations and build a list call cur_evt_locs which would then be set at ["20-001 job-1", "General Shop"]. I use that list to create my group headers where truck 005 shows up under both. My issue is that the events are duplicated under both group headers. What I want to do is only show the events where the event job_move_to value matches the group header and hide the other active event(s) from view under said group, So under 20-001 only the active event where job_move_to is 20-001 shows.

The reasoning behind this is that we want users to see where their equipment is getting scheduled to by job location so they can actively manage their scheduled vs unscheduled assets.

Currently I have no code on trying to remove any of the events. I'm not really sure if these actions need to happen in the eventRenderer or somewhere else. I guess i'm just looking for some guidance.

If you need anymore info just let me know.

[alex.l]

Hi,

Thanks for the description. Its still hard to understand, it would be much better to have data structure, I am out of business logic so I can't take all together and get why event 1 and event 2 name is truck 005, and why did you built array that has both attributes, but you don't want an event passed that as valid. But main thing I can't get, why do you call it "multi-group" and not "group"?
I feel you just need group feature with custom group method that will pass your check for events. Group feature won't allow to see same event in a few lines, if it's not multi-assignment mode.

https://bryntum.com/products/schedulerpro/docs/api/Grid/feature/Group
https://bryntum.com/products/grid/examples/grouping/

Or maybe it's TreeGroup, if you need few levels
https://bryntum.com/products/schedulerpro/docs/api/Grid/feature/TreeGroup#config-levels
https://bryntum.com/products/grid/examples/tree-grouping/

[chawkins8584]

Hey Alex,

So I have been following the data structure used in the example
https://bryntum.com/products/schedulerpro/examples-scheduler/multi-groups/

The data would look something like this for resources. In my case instead of teams I am using cur_evt_locs but its the same idea.

"resources" : {
    "rows" : [
      {
        "id"         : "angelo",
        "name"       : "Angelo",
        "image"      : "angelo.jpg",
        "team"       : ["Development", "Sales"],
        "eventColor" : "pink"
      },
      {
        "id"         : "celia",
        "name"       : "Celia",
        "image"      : "celia.jpg",
        "team"       : ["Development", "Sales"],
        "eventColor" : "red"
      },
      {
        "id"         : "dave",
        "name"       : "Dave",
        "image"      : "dave.jpg",
        "team"       : ["Development"],
        "eventColor" : "orange"
      },
      {
        "id"         : "george",
        "name"       : "George",
        "image"      : "george.jpg",
        "team"       : ["Sales"],
        "eventColor" : "yellow"
      },
      {
        "id"         : "gloria",
        "name"       : "Gloria",
        "image"      : "gloria.jpg",
        "team"       : ["Sales"],
        "eventColor" : "green"
      },
      {
        "id"         : "kate",
        "name"       : "Kate",
        "image"      : "kate.jpg",
        "team"       : ["Accounts", "Consultants"],
        "eventColor" : "teal"
      },
      {
        "id"         : "lisa",
        "name"       : "Lisa",
        "image"      : "lisa.jpg",
        "team"       : ["Accounts", "Consultants"],
        "eventColor" : "indigo"
      },
      {
        "id"         : "mark",
        "name"       : "Mark",
        "image"      : "mark.jpg",
        "team"       : ["Sales"],
        "eventColor" : "magenta"
      },
      {
        "id"         : "maxim",
        "name"       : "Maxim",
        "image"      : "maxim.jpg",
        "team"       : ["Development"],
        "eventColor" : "purple"
      },
      {
        "id"         : "steve",
        "name"       : "Steve",
        "image"      : "steve.jpg",
        "team"       : ["Development", "Consultants"],
        "eventColor" : "violet"
      }
    ]
  },
  

[johan.isaksson]

Hi,

When grouping by an array field, it will create a kind of link to the original resource for the other instances of the same resource.

Eg. the first Steve in group Consultants will be the actual record. The second Steve in group Development will be a link to it.

The link does not hold any events on its own, it will just display all events from the actual resource. There is currently no way of changing this to only display some of the events for the link (or the original). But, probably you can work around it in an eventRenderer, by adding a CSS class to hide those you do not want shown.

Not an ideal solution, but please try and see if it gets you what you want. Hope that helps!

[johan.isaksson]

Something like this:

eventRenderer({ eventRecord, resourceRecord, renderData }) {
    if (resourceRecord.isLinked) {
        if (eventRecord.id % 2 === 0) {
            renderData.wrapperStyle = 'display:none;';
        }
    }

return eventRecord.name;
}

Wont be very nice if you have overlapping events that are hidden, but otherwise it might work well enough.

[chawkins8584]

Hi Johan,

Thank you for the info. One thing i have run into when trying to hide events by move to locations not matching the group value is that the groupParent._groupValue is always the last entry of the grouping array. I guess this is due to the linking?

[johan.isaksson]

Yes seems there is no API to easily get the groupParent from a "multi-grouping link" (groupParent is not public btw).
Not optimal, but perhaps you can walk up based on index until you encounter a record.isGroupHeader (that flag is public)?

[chawkins8584]

I ended up finding a solution that worked for me, i had to get the subgrid that held the event/row data and filtered out any records that didnt have events. Then I had to loop through each of the group values and then group children and if the resourceRecord was in the group and the eventRecord move to location didnt match the groupRowFor i changed the renderData.style to display none.

if( me.widgetMap.projectGroup.pressed ) {
                let len = resourceRecord.cur_evt_locs.length;
                let groups = me.getSubGrid('normal').store.groupRecords.values.filter( record => record.meta.groupRowFor !== "Not Scheduled");


            if( len > 1 ) {
                groups.forEach( group => {
                    if(group.groupChildren.includes(resourceRecord) && eventRecord.job_move_to !== group.meta.groupRowFor){
                        renderData.style = 'display : none';
                    } 
                });
            }
            
            
        }