Add Icon on Grouped Events

[Arturo Martinez]

I want to add different Icons on my grouped columns, but only on the Childs of each of the items, i dont want the icon to appear in hits clasification row, the icon is based on a string  property of each event on my Setup, how can i archive this?

[Vijay Ravi]

Hi Arturo,

Based on your requirement we prepare the angular sample with resourceHeaderTemplate to add the icon to the child resource as shown in the below shared code snippet. Refer the shared sample for your reference.

ResourceHeader UG: https://ej2.syncfusion.com/angular/documentation/schedule/resources#simple-resource-header-customization

[app.component.html]

<ejs-schedule #scheduleObj width='100%' resourceHeaderTemplate="resourceHeaderTemplate">

      <e-resources>

        <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource'

          [allowMultiple]='allowMultiple' name='Projects' textField='text' idField='id' colorField='color'>

        </e-resource>

        <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'

          name='Categories' textField='text' idField='id' groupIDField='groupId' colorField='color'>

        </e-resource>

      </e-resources>

    

      <ng-template #resourceHeaderTemplate let-data>

        <div>

          <i [ngClass]="getIconClass(data.resourceData.text)"></i>

          {{data.resourceData.text}}

        </div>

      </ng-template>

    </ejs-schedule>

[app.component.ts]

getIconClass(text: string): string {

    if (text === 'Nancy') {

      return 'e-icons e-people';

    } else if (text === 'Steven') {

      return 'e-icons e-emoji';

    }

    else if (text === 'Robert') {

      return 'e-icons e-people';

    }

    else if (text === 'Smith') {

      return 'e-icons e-emoji';

    }

    else if (text === 'Michael') {

      return 'e-icons e-people';

    }

    else if (text === 'Root') {

      return 'e-icons e-emoji';

    }

    return '';

  }

Sample link: https://stackblitz.com/edit/resource-header-customize-sxc3t3?file=src%2Fapp.component.html

Please get back with to us if you need any further assistance

Regards,

Vijay

[Arturo Martinez]

I have tested this answer and i need to use an asset 'img' instead of an set icon, but after Setting a img tag i dont know how to resize it acordly to the height of the column.

it gets bigger than it needs to

 

How can i reside it to be the same size of the column so it doesnt destroy the table.

Also the icon should only appear on the events columns an not on the groups column

[Vijay Ravi]

Hi Arturo,

To resolve this issue You can use Angular's ngIf directive to conditionally render the image and text based on whether the current node is a parent or a child. Here's how you can modify your template: as shown in the below shared code snippet .Refer the shared sample for your reference.

[app.component.html]

<ng-template #resourceHeaderTemplate let-data>

        <div style="height: 100%; display: flex; align-items: center; justify-content: start;">

            <img *ngIf="isChildNode(data)" src="https://ej2.syncfusion.com/angular/demos/assets/schedule/images/environment-day.svg" alt="{{data.resourceData.ImageName}}" style="height: 50%; width: 50%;" />

            {{data.resourceData.text}}

        </div>

    </ng-template>

[app.component.ts]

 

isChildNode(data: any): boolean {

    return data.resourceData.ClassName !== "e-parent-node";

}

 

Css styles
 

.e-schedule .e-timeline-view .e-resource-cells, .e-schedule .e-timeline-month-view .e-resource-cells {

      height: 94px;

    }

Sample link: https://stackblitz.com/edit/number-of-events-with-resources-w3dzmu?file=src%2Fapp.component.ts,src%2Fapp.component.html
 

Please let us know if you need any further assistance.

Regards,

Vijay

[Arturo Martinez]

worked as expected Thanks!

[Vijay Ravi]

Hi Arturo,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you

Regards,

Vijay