I need like Dropdownlist in Tagging system

[cipl 1177]

Hi team 

User want like jira label system for tagging system how to achieve this our dropdown list . am added reference video here its possible our drop down list can  you please help on that if value is not available need to add new label existing value choosen need to show that. i here attached refernce video

Attachment: Add_a_subheading_d0a08331.zip

[UdhayaKumar Duraisamy]

You can achieve your requirements by using the MultiSelect component with the mode set to 'Box'. This configuration allows the selected items to be displayed as chips within the component.

For your reference, please check the following online demo:

• MultiSelect Dropdown · Default Functionalities · Essential JS 2 · Syncfusion

[cipl 1177]

OK fine. if case  user typing some value that value not available in drop down but he want that news values as well how to achieve this scenario . example reference video am added Jira its showing add new label like how to achieve that case. its possible in angular can you pls one example for stackblitz

[UdhayaKumar Duraisamy]

To allow users to add new values to the MultiSelect component when they type a value not available in the dropdown, you can use the AllowCustomValue property. When this property is set to true, the MultiSelect component allows users to add a non-present option to the component value. Additionally, the CustomValueSpecifier event will be triggered when a new custom value is selected.

Here is an example of how you can implement this:

@page "/MultiSelect-Dropdown/Custom-Value"

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="GameFields" AllowCustomValue="true" Placeholder="Favorite Sports" DataSource="@Games">

    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>

</SfMultiSelect>

@code {

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" }

    };

}

This setup allows users to type in new values that are not part of the existing data source and add them to the MultiSelect component.

Documentation: Custom Value in Blazor MultiSelect Dropdown Component | Syncfusion

[cipl 1177]

Hey Hi  UdhayaKumar Duraisamy this is Blazor i Need Angular can you please provide stack blitz link for this better to show case our team 

Thanks 

[cipl 1177]

Hi team 

Any update on statckblitz example for refernce  in angular application 

[Priyanka Karthikeyan]

Hi cipl 1177,

 

You can easily add custom values in the Angular MultiSelect component by using the allowCustomValue property. Enabling this property will allow you to achieve your requirement. Below is the code snippet and sample for your reference:

 <ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields'></ejs-multiselect>

Sample: https://stackblitz.com/edit/angular-dwwxym4t-poc9xffj?file=src%2Fapp.component.html

Regards,

Priyanka K

[cipl 1177]

Thank you Priyanka. I tried to implement this code . am facing this issue what was the missing am getting calender icon what was the issue version 

    "@syncfusion/ej2-angular-inputs": "^20.1.47",

[cipl 1177]

 am added those css that time only am able to see close  icon i added statckblitz link here  am getting like this in close icons

[Priyanka Karthikeyan]

Hi cipl 1177,

 

Thank you for the update.

 

To resolve the style issue, please ensure that the following styles are included in your application:

 

​@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

Sample: https://stackblitz.com/edit/angular-dwwxym4t-lb8sahrh?file=src%2Fapp.component.css

 

Documentation Reference: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started#adding-css-reference

 

Additionally, please ensure that any custom styles you have applied are not overriding the default behavior. If you continue to face the issue, kindly share a reproducible sample for better clarity.

 

Thank you for your understanding and cooperation.

 

 

Regards,

Priyanka K

[cipl 1177]

Hi team ,

Client Requirement:

• When a tag is created, it should default to Public (eye icon 👁️).

• The user should be able to toggle between Public (eye) and Private (eye-slash 🚫) for each tag.

• UI looks like a chip/tag list with an icon + label + close button. how we can achive this

    <form [formGroup]="tagForm" class="filter-form-dialog">

        <div class="input-container dropdown">

            <div class="control-styles">

                <label *ngIf="showTagField">Tags</label>

                <br>

                <br>

                <ejs-multiselect #tag id='sample-list1' formControlName="tag" class="custom-multiselect"  *ngIf="showTagField"

                    (change)="onSelectionChange($event)" [dataSource]='tagList' [allowCustomValue]="isManageTag" [mode]='box'

                    [fields]='fields'  (open)="onOpen($event, mulObj, 'e-custom')"  (removing)="onRemoving($event)"

                    (customValueSelection)="onCustomValueSelection($event)"

                    ></ejs-multiselect>

            </div>

        </div>

    </form>

[Priyanka Karthikeyan]

Hi cipl 1177,

Thank you for the update.

You can add an icon to the MultiSelect chip using the ValueTemplate. For more details, please refer to the MultiSelect demos.

Demos:https://ej2.syncfusion.com/angular/demos/#/tailwind3/multi-select/template

We've prepared a simple sample to demonstrate how to include an icon:

 

​<ejs-multiselect id='multiselectelement' mode="Box" [dataSource]='data' [fields]='fields' [placeholder]='text'>
   <ng-template #valueTemplate let-data>
       <div>
           <i class="{{data.class}}"></i>
           <span class="nameTemp"> {{data.type}} </span>
       </div>
   </ng-template>
</ejs-multiselect>`

You can customize the ValueTemplate further based on your specific requirements.

Sample:Kgekngjz (duplicated) - StackBlitz

If you need any further assistance, please let us know. we are happy to assist you further.

Regards,

Priyanka K

[cipl 1177]

• When a tag is created, it should default to Public (eye icon 👁️).

• The user should be able to toggle between Public (eye) and Private (eye-slash 🚫) for each tag.

[cipl 1177]

• When a tag is created, it should default to Public (eye icon 👁️).

• The user should be able to toggle between Public (eye) and Private (eye-slash 🚫) for each tag.

[Priyanka Karthikeyan]

Hi cipl 1177,

Thank you for the update.

Based on the information you provided, we've prepared a sample implementation that renders a button inside the valueTemplate of the MultiSelect component. This allows toggling the visibility of each item dynamically.

 

@Component({

  standalone: true,

  selector: 'app-root',

  imports: [FormsModule, MultiSelectModule],

  template: `

    <ejs-multiselect

      id="multiselectelement"

      mode="Box"

      [dataSource]="data"

      [fields]="fields"

      [placeholder]="text"

    >

      <ng-template #valueTemplate let-data>

        <div style="display: flex; align-items: center; gap: 8px;">

         

         

          <button

            (click)="toggleVisibility(data)"

            style="background: none; border: none; cursor: pointer;"

            title="{{ data.visible ? 'Public' : 'Private' }}"

          >

            {{ data.visible ? '👁️' : '🚫' }}

          </button>

          <span class="nameTemp">{{ data.type }}</span>

        </div>

      </ng-template>

    </ejs-multiselect>

  `

})

export class AppComponent {

  public data: { [key: string]: any }[] = [

    { class: 'asc-sort', type: 'Sort A to Z', id: '1', visible: true },

    { class: 'dsc-sort', type: 'Sort Z to A', id: '2', visible: true },

    { class: 'filter', type: 'Filter', id: '3', visible: true },

    { class: 'clear', type: 'Clear', id: '4', visible: true }

  ];

 

  public fields: Object = { text: 'type', iconCss: 'class', value: 'id' };

  public text: string = 'Select a format';

 

  toggleVisibility(tag: any): void {

    tag.visible = !tag.visible;

  }

}

 

Sample: https://stackblitz.com/edit/angular-rggibobo-aqkqfeg9?file=index.html,src%2Fapp.component.ts,src%2F…

 

Regards,

Priyanka K

[cipl 1177]

Hi team Mutiple Tag avaialble time am trying to add custom value tag am not able type the value very slowly typing. am getting this warning on console 

[Violation] 'load' handler took 205ms 

 (customValueSelection)="onCustomValueSelection($event)" i removed this its working fine but i need that function  custom value only allow 50 char so am using that

        <ejs-multiselect #tag #mulObj id="sample-list1" formControlName="tag" class="custom-multiselect"

          *ngIf="showTagField" [dataSource]="tagList" [allowCustomValue]="isManageTag" mode="Box" [fields]="fields"

          (select)="onSelectionChange($event)" (open)="onOpen($event, mulObj, 'e-custom')"

          (removing)="onRemoving($event)" (customValueSelection)="onCustomValueSelection($event)"

          (blur)="onTagBlur($event)" (tagging)="onTagging($event)" >

          <ng-template #valueTemplate let-data>

            <div

              style="display: flex; align-items: center; gap: 8px;">

              <ejs-tooltip

                [content]="data.isPublic ? 'External' : 'Internal'" [position]="'TopCenter'" [showTipPointer]="true">

              <button (click)="toggleVisibility(data)" style="background: none; border: none; cursor: pointer;"

                type="button"

               [disabled]="(!isManageTag && !isCanAttachTags) || (data.businessUnitType === (isAgency ? BusinessUnitType.Organization : BusinessUnitType.Agency))">

                <i-feather name="eye" class="icon tag-eye-icon" *ngIf="data.isPublic"

                  style="stroke: #7a7a7a;"></i-feather>

                <i-feather name="eye-off" class="icon tag-eye-icon" *ngIf="!data.isPublic"

                  style="stroke: #7a7a7a;"></i-feather>

              </button>

              </ejs-tooltip>

              <span class="nameTemp">{{ data.name }}</span>

            </div>

          </ng-template>

        </ejs-multiselect>

  onCustomValueSelection(event: any): void {

    const text = event.newData?.name?.trim();

    if (text && text.length > 50) {

      event.cancel = true;

      this.store.dispatch(new ShowToast(MessageTypes.Error, TAGS_LIMIT));

    }

  }

[Priyanka Karthikeyan]

Hi cipl 1177,

Thank you for reaching out to us.

We’ve created a sample based on the information you provided, and we did not encounter any performance issues when entering a custom value in the input field. Please find the sample and video illustration below for your reference:

🔗 Sample: https://stackblitz.com/edit/angular-rggibobo-ldhk66uj?file=index.html,src%2Fapp.component.ts,package.json

📹 Video: 

To assist you more effectively, we kindly request the following details:

• Modify the provided sample to reflect your specific scenario, or share a sample that reproduces the issue
• Detailed steps to replicate the issue
• A video illustration demonstrating the problem
• The version of the Syncfusion package you are using
• Confirmation on whether the issue occurs when the toast is shown inside the customValueSpecifier event

Providing these details will help us better understand the issue and offer a prompt and accurate resolution.

Thank you for your cooperation.

Regards,

Priyanka K