Page 1 of 1

[REACT] Nested Events children not rendering

Posted: Thu Nov 03, 2022 1:01 am
by ewu

I am fetching nested events through a rtk query and loading the events into the store via project.loadInlineData. The parent tasks are being rendered correctly, but none of the child tasks are displayed (despite inspecting the events and seeing children being populated correctly on the parent events, and the parent events start & end date are correctly computed from their child tasks).

It looks like the else block in the eventRenderer is never hit.

I attached a test case:

bryntum-nested-events-test-case.zip
(50.44 KiB) Downloaded 33 times

Re: [REACT] Nested Events children not rendering

Posted: Thu Nov 03, 2022 3:37 pm
by alex.l

I've reviewed your app. Possibly the problem is that your children tasks doesn't have id and doesn't have assigned to resources.
You need to add assignments for nested events too, see JSON in https://bryntum.com/examples/scheduler-pro/nested-events/ demo


Re: [REACT] Nested Events children not rendering

Posted: Thu Nov 03, 2022 7:15 pm
by ewu

Thank you! That did the trick


Re: [REACT] Nested Events children not rendering

Posted: Thu Mar 30, 2023 12:19 pm
by elcr
ewu wrote: Thu Nov 03, 2022 7:15 pm

Thank you! That did the trick

Hi, can you share a working solution o this? I am trying to do the same thing. Thanks!


Re: [REACT] Nested Events children not rendering

Posted: Thu Mar 30, 2023 2:16 pm
by mats

@elcr Can you please share your code & data so we can have a look?


Re: [REACT] Nested Events children not rendering

Posted: Thu Mar 30, 2023 2:35 pm
by elcr
mats wrote: Thu Mar 30, 2023 2:16 pm

@elcr Can you please share your code & data so we can have a look?

I am lost with this. I am trying to turn one example into nested events. I tried a bunch this is what I have rn. The resources are showing, but not the events. I tried different ways to pass the data to the scheduler component but no luck.
I tried another example i found on the forum about this, using " new SchedulerWithSubtasks" (viewtopic.php?p=79426&hilit=nested+events+not+render#p79426) but the same results, events not showing.
It would be great if we had a demo for this


Re: [REACT] Nested Events children not rendering

Posted: Thu Mar 30, 2023 3:09 pm
by elcr
elcr wrote: Thu Mar 30, 2023 2:35 pm
mats wrote: Thu Mar 30, 2023 2:16 pm

@elcr Can you please share your code & data so we can have a look?

I am lost with this. I am trying to turn one example into nested events. I tried a bunch this is what I have rn. The resources are showing, but not the events. I tried different ways to pass the data to the scheduler component but no luck.
I tried another example i found on the forum about this, using " new SchedulerWithSubtasks" (viewtopic.php?p=79426&hilit=nested+events+not+render#p79426) but the same results, events not showing.
It would be great if we had a demo for this

LOL, it actually works like this, but I had the date wrong :p. Now the events show, but I have no styling, any quick guide on what i need to import for the styling so that I don't go looking for hours again?


Re: [REACT] Nested Events children not rendering

Posted: Thu Mar 30, 2023 3:59 pm
by mats

If you copied the JS from the demo, don't forget to also review the CSS, look at app.scss:

.b-sch-event {
    padding-inline-start : 0;
    background-image     : repeating-linear-gradient(135deg, #eee, #eee 3px, #fff 3px, #fff 6px);
    border-radius        : 5px;

&.b-sch-event-resizing,
&.b-sch-event-selected,
&:hover {
    // Needs !important to not have to have a very specific selector here, to keep demo css simple
    background-image : repeating-linear-gradient(135deg, #e8e8e8, #e8e8e8 3px, #fff 3px, #fff 6px) !important;
}
}

.b-theme-classic-dark {
    .b-sch-event {
        background-image : repeating-linear-gradient(135deg, #777, #777 3px, #444 3px, #444 6px);

    &.b-sch-event-resizing,
    &.b-sch-event-selected,
    &:hover {
        // Needs !important to not have to have a very specific selector here, to keep demo css simple
        background-image : repeating-linear-gradient(135deg, #888, #888 3px, #555 3px, #555 6px) !important;
    }
}
}

.eventWithAgenda .b-sch-event-content {
    background-color : inherit;

.nested {
    position         : absolute;
    background-color : inherit;
    font-size        : .9em;
    display          : flex;
    justify-content  : center;
    align-items      : center;
}
}

.b-sch-horizontal .nested {
    top                  : 0;
    bottom               : 0;
    padding-inline-start : .5em;
}


.b-sch-vertical .nested {
    left        : 0;
    right       : 0;
    padding-top : .5em;
}

.b-resize-handle {
    &:before,
    &:before {
        // to make resizable handles visible over nested elements
        z-index : 10;
    }
}