Possible to search in the resources tab of the edit dialog?
Hi Niels,
Greetings from Syncfusion.
To enable search functionality in the Resources tab of the edit dialog, you can utilize the editDialogFields property. Within this property, you can include a toolbar option inside additionalParams to enable a search bar. Additionally, by handling the grid's actionBegin event, you can capture the searched string and send it to the backend for further processing. Refer code snippet and sample for your reference.
Code-Snippet:
export class AppComponent { public ngOnInit(): void { (this.editDialogFields = [ { type: 'Resources', additionalParams: { toolbar: ['Search'], actionBegin(args) { if (args.requestType == 'searching') { console.log(args.searchString); // here you can send the value to back end } }, }, }, ]), } |
Sample - https://stackblitz.com/edit/angular-j6sbfqw3-yjoviayb?file=src%2Fapp.component.ts
Documentation - Managing tasks in Angular Gantt component | Syncfusion
Regards,
Sridharan
Niels,
Query 1 - there is no way to call a service that fetches the resources, because "this" does not refer to my component. When I use an arrow function, I cannot use "this.element" anymore, as it does not exist in my component.
We have updated the code to better suit the usage of arrow functions. You can use public variables to access the Gantt instance within the additionalParams section. By leveraging Angular's @ViewChild decorator, you can get the Gantt instance and use it in your arrow functions. Refer to the code snippet below for details:
Code-Snippet:
app.cpmponent.ts:- import { Component, OnInit, ViewChild } from '@angular/core'; import { GanttAllModule, GanttComponent } from '@syncfusion/ej2-angular-gantt'; export class AppComponent { @ViewChild('gantt') public gantt: GanttComponent; public ngOnInit(): void { (this.editDialogFields = [ { type: 'Resources', additionalParams: { toolbar: ['Search'], // Arrow function to call the handler actionBegin: (args: any) => this.onResourceSearch(args), }, }, ]), (this.resources = editingResources); } public onResourceSearch(args: any) { // Access Gantt instance using ViewChild var ganttInstance = this.gantt; if (ganttInstance && args.requestType === 'searching') { console.log(args.searchString); // Accessing the resource grid instance dynamically var resGridComponent = ( document.getElementById( ganttInstance.element.id + 'ResourcesTabContainer_gridcontrol' ) as any ).ej2_instances[0]; // Perform operations on the resource tab's grid resGridComponent.refresh(); } } } app.component.html:- <ejs-gantt #gantt > </ejs-gantt> |
Query 2 - is there an event when the search bar is cleared? So I can fetch the data without search string?
Yes, you can use the toolbarClick event inside the additionalParams for clear action. Refer to the screenshot below for details about the "args" available during the clearing action.
Code-Snippet:
app.cpmponent.ts:- export class AppComponent { public ngOnInit(): void { (this.editDialogFields = [ { type: 'Resources', additionalParams: { toolbar: ['Search'], toolbarClick: (args: any) => this.onToolbarClick(args), }, }, ]), (this.resources = editingResources); } public onToolbarClick(args: any) { //while clear icon is pressed, this event will hit } } |
Modified Sample - Nb8emknq (forked) - StackBlitz
Regards,
Sridharan
