Conditional label

[Kayna Constantino]

I want to configure the label to show a property only if is not undefined (when is undefined, it is showing the text 'undefined'), but i can't figure out how to do it.

this code dosn't work. It gives the error "ERROR ReferenceError: taskData is not defined at GanttComponent.eval (eval at compile$1 (ej2-base.es2015.js:8583:1)"

If i put the condition outside the "${}" it just prints the question mark and the rest as if was a plain text

I have tried different ways to do this, but none worked.

Is it possible to configure a label with a condition ?

[Premkumar Sudalaimuthu]

Hi Kayna ,

Using ngtemplate, we can conditionally customise the label. We have shared a sample that includes the rightlabel on a conditional basis. In our example, the right label is only rendered for tasks that have resource names in the datasource. For your convenience, we have included code snippets and a sample. Please contact us if you require any additional assistance.

Code snippets:

App.component.html

 

ng-template #labelSettingsLeftLabel let-data>

      <span>{{ data.TaskName }} [ {{ data.Progress }}% ]</span>

    </ng-template>

 

    <ng-template #labelSettingsRightLabel let-data>

      <div

        style="display:inline-flex"

        innerHtml="{{ customFunction(data) }}"

      ></div>

    </ng-template>

//

App.component.ts

 

public customFunction(data: any): string {

      var container = document.createElement('div');

      if (data.ganttProperties.resourceNames) {

        var resources = data.resources.split(',');

        for (var i = 0; i < resources.length; i++) {

          var subContainer = document.createElement('div');

          var img = document.createElement('img');

          var span = document.createElement('span');

          debugger;

          span.className = 'labelClass';

          span.innerHTML = resources[i];

          img.src =

            'https://ej2.syncfusion.com/angular/demos/assets/gantt/images/' +

            resources[i] +

            '.png';

          img.height = 40;

          subContainer.append(img);

          subContainer.append(span);

          container.append(subContainer);

        }

      }

      return container.innerHTML;

    }

 

 

Sample:  https://stackblitz.com/edit/angular-cuwhd1?file=app.component.ts

Regards,

Premkumar S

[Sanford Russell]

From this point forward, we must consult the script and themes that were manually entered into the program. Therefore, to ensure that the component loads into your application appropriately, we advise you to consult the theme and script files located in the Pages/_Layout.cshtml file. Using the CssClass attribute, you may add the custom class name to the SfSpinner component. For your reference, kindly click the documentation link below.

https://blazor.syncfusion.com/docs/spinner/customization#customize-when-initializing-the-spinner-component geometry dash lite is the link to the documentation.

Kindly review the documentation page mentioned above and inform us of any problems you encountered.

[Robert Vandyke]

That error message suggests your taskData variable isn't accessible within the GanttComponent. It's like trying to play a game of Bad Parenting where you haven't properly set up the player characters. Ensure taskData is correctly defined and passed into the scope where you're using it. Debugging these issues can be tough, but persistence is key! Conditional labels are definitely achievable with the correct scope management.

[Jones Natalie]

Nice!  Debugging these issues can be tough, but persistence is key! Conditional labels are definitely achievable with the correct scope management.

[Sridharan Jayabalan]

Hi,

 

We have thoroughly reviewed your requirement and would like to suggest an alternative solution. In your shared code snippet, you are using taskData.propertyName, but when configuring labelSettings, you should directly use the property. For conditional checks, please refer to the example provided below.

 

Code-Snippet:   

ts:-

 

export class AppComponent {

  public labelSettings: object;

  public ngOnInit(): void {

    this.labelSettings = {

      taskLabel: "${TaskName ?? ''}",

    };

  }

}

 

Sample - 8fjftnwf (forked) - StackBlitz

 

However, the recommended approach is to use a label template. You can call a method from the label template, and within that method, conditionally return the desired label text.

For example, the following sample demonstrates a conditional left label. If TaskName is empty or undefined, it displays “Empty values”; otherwise, it shows the actual task name. 

Code-Snippet:   

html:-

  <ejs-gantt>

    <ng-template #labelSettingsLeftLabel let-data>

      <div style="display: inline-flex">

        {{ customFunction(data) }}

      </div>

    </ng-template>

  </ejs-gantt>

 

ts:-

 

export class AppComponent {

  public customFunction(data: any) {

// write desired condition here

    return data?.TaskName == undefined || data?.TaskName == ''

      ? 'Empty values' : data.TaskName;

  }

}

 

Sample - 8fjftnwf (forked) - StackBlitz

Demo - Gantt Chart · Task Label Template · Essential JS 2 for Angular · Syncfusion

 

 

Regards,

Sridharan

[Xavier Barker]

I tried Using CssClass property based on  https://stackblitz.com/edit/angular-cuwhd1?file=app.component.ts, it worked perfectly!

[Getsy Edwin]

Hi Xavier,

Glad that the issue has been resolved. Please get back to us if you need any other assistance.

Regards,

Getsy

[Bukari Manches]

I have stopped using the CssClass attribute, my machine configuration cannot be compatible as it may provide some other custom features.