Premium support for our pure JavaScript UI components


Post by swathi »

1)

Image

I want the task to be divided like above screenshot. I used the following code and got the below task in bryntum:

eventRenderer = ({ eventRecord }: { eventRecord: any }): string => {
        return `
            <div style="width: 30px; background-color: blue;"></div>
            <div class="info" style="width: 100%">
                <i class="fa-duotone fa-gear"></i>
                <span>21525209</span>
            </div>
            <div class="info" style="width: 100%">
                <i class="fas fa-check"></i>
                <span>Description</span>
            </div>
            <div>01/12/2024 04:00PM</div>
         `;
        };
    }

2)

Image

Also I have used rowHeight: 80, to get the height of the above task.

Can I vary the height of the task dynamically based on the content. Because we will have more data to be shown within task?

3) Can I show the data based on *ngIf conditions? I tried with it but didn’t work for me.

I made the below CSS changes to stack the items in task.

::ng-deep .b-gridbase.b-outer {
    height: calc(100vh - 45px);
}

::ng-deep .b-sch-event:not(.b-milestone) .b-sch-event-content {
    margin: 0px;
    display: block;
}

::ng-deep .b-sch-event-wrap.b-sch-style-plain.b-sch-color-green .b-sch-event.b-sch-event-resizable-true {
    background-color: red;
    border-radius: 5px;
}

Post by marcio »

Hey swathi,

Thanks for reaching out and welcome to our forums. :)

So, we need more context regarding your questions.

  • Is that only a background? Or is that some special rule regarding the size of the brown and red areas? If it is only regarding style, you can try using a CSS gradient background.

  • Is there any condition that you cannot use on eventRenderer? You should be able to add a node that contains an *ngIf attached to render conditionally, as we're able to render Angular components inside an event, if you could provide a sample test case for us to analyze, it would be easier for us to assist you on this. Please take a look at our guidelines for more info https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by kronaemmanuel »

Hi swathi,

  1. Please check your CSS, from what I can see, you're pretty close, just needs some padding, etc.
  2. Yes, it's possible to use variable row height. Please check this example: https://bryntum.com/products/schedulerpro/examples-scheduler/rowheight/ and also this feature where you can customize row height: https://bryntum.com/products/scheduler/docs/#Scheduler/feature/RowResize.
  3. I assume you mean use ngIf within event renderer? Yes, it's possible. You'll need to create a web component out of your custom element. Then you can pass it to the event-renderer like any normal html tag. Here's an example:
    import { CommonModule } from '@angular/common';
    import { Component, Input } from '@angular/core';
    
    @Component({
        standalone : true,
        selector   : 'app-my-event',
        imports    : [CommonModule],
        template   : `
        <div *ngIf="name" class="my-event">
          {{ name }}
        </div>
        <div *ngIf="!name" class="my-event">
          No name available.
        </div>
      `,
        styles : [`
        .my-event {
          font-family: Arial, sans-serif;
          color: #333;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      `]
    })
    export class MyEventComponent {
        @Input() name: string = '';
    }
    
    Then after you've declared it in your App module, you can use it anywhere you want like:
    <bryntum-scheduler
        #scheduler
        ...
        [eventRenderer] = "schedulerConfig.eventRenderer"
    </bryntum-scheduler>
    
    <bryntum-scheduler
        #scheduler
        ...
        [eventRenderer] = "schedulerConfig.eventRenderer"
    </bryntum-scheduler>
    
    export const schedulerConfig : Partial<SchedulerConfig> = {
        ...
        eventRenderer : function({ eventRecord, resourceRecord, renderData }) {
            return `<my-event-element name="${eventRecord.name}"></my-event-element>`;
        }
    };
    

Post by swathi »

Hi Marico,

Image

It is not just background, it has functionality.

From the above image, assume brown color is 10mins duration, and if I hover on it, it has a different tooltip and red color portion is 1 hour and has different tooltip.

2) Within the eventRenderer, added the if condition. I want to show multiple rows within the same task based on the multiple conditions. Added just one ngIf in the below code

eventRenderer = ({ eventRecord }: { eventRecord: any }): string => {
        return `
            <div style="width: 30px; background-color: blue;" *ngIf='true'></div>
            <div class="info" style="width: 100%">
                <i class="fa-duotone fa-gear"></i>
                <span>21525209</span>
            </div>
         `;
        };
    }
    

Post by marcio »

Hey swathi,

That looks like something that you can achieve inside eventRenderer, like a main div with two inner divs (the brown one and the red one) and the icons could be positioned using CSS. You can add a custom listener to show the custom tooltip using https://bryntum.com/products/grid/docs/api/Core/helper/EventHelper#function-addListener-static and use a similar approach as it's suggested here for showing a tooltip https://bryntum.com/products/grid/docs/api/Core/widget/Tooltip#showing-async-content

EventHelper.addListener(scheduler.element, 'div', (e) => {
    console.log(e);
}, {
    delegate : '.brown-section' //here you need to put the class for the brown div
});

Best regards,
Márcio


Post by swathi »

Hi Marico,

Not just the color of the task I want to change, rather the duration of the brown potion, and duration of red portion I will have to show as division.


Post by swathi »

Also, can't we use *ngIf directly within eventRenderer ?

Because I will have to show different icons based on multiple constraints. Example code given below:


eventRenderer = ({ eventRecord }: { eventRecord: any }): string => {
        return `
      
<ng-container *ngIf="eventRecord.type===1"> <span class="gannt-icon-wrapper" *ngIf="eventRecord.isPinned || eventRecord.isSoftPinned"> <span class="fas fa-thumbtack" [style.color]="eventRecord.isPinned?'green':eventRecord.isSoftPinned ? 'blue':''"></span> </span> </ng-container> <ng-container *ngIf="eventRecord.type===7"> <i class="fal fa-object-group white-text"></i> </ng-container> <ng-container *ngIf="eventRecord.notesExists "> <span class="dot dot-notes-icon"></span> </ng-container> <ng-container *ngIf="eventRecord.isSplit"> <span class="fal fa-cut" [style.color]="eventRecord.resourceStatus?'green':'black'"></span> </ng-container> <ng-container *ngIf="eventRecord.hasResources && eventRecord.status !== 3 && eventRecord.status !== 2"> <span class="gannt-icon-wrapper"> <span class="far fa-user-cog" [style.color]="eventRecord.resourceStatus?'green':'red'"></span> </span> </ng-container>

Post by marcio »

Hey swathi,

To get a better context, what are you aiming to achieve with those brown and red areas? Do they mean something like the percentage of what's done on the event?

And regarding ng-container, yes, as long as it's an Angular component, you should be good to use it.

Best regards,
Márcio


Post by swathi »

Hi Marico,

It's basically division of duration within the task.
If you observe my previous example with screenshot, its explained.

Assume brown color is 10mins duration, and if I hover on it, it has a different tooltip and red color portion is 1 hour and has different tooltip.

And I am using angular component only, but still, I don't that ng-container is working. I can see all the icons irrespective of the conditions I have used in the above example.


Post by marcio »

Hey,

Got it, I tried a possible approach regarding the tooltip here

new Tooltip({
    forSelector : '.b-task-percent-bar',
    getHtml     : ({ source : tip }) => `<div> test</div>`,
hoverDelay: 50,
hideDelay: 50
});
new Tooltip({
    forSelector : '.b-task-percent-bar-outer',
    getHtml     : ({ source : tip }) => `<div> test b-task-percent-bar-outer
</div>`,
hoverDelay: 50,
hideDelay: 50
});

But it is not perfect because one of them is being triggered twice, I'm still investigating, but it's an initial scratch.

Regarding the ngIf, looks like a bug, I created a ticket to fix that https://github.com/bryntum/support/issues/9221

Best regards,
Márcio


Post Reply