DropDownList - cannot select null

[Peter Linecker]

Hello Syncfusion,

I am using the DropDownList and when I want to select a value that is null it won't be displayed.

First I was trying to solve the problem that I have set the value to "null" and before the submit to the api I detected if the value was "null" and set it to null but I think there is a much easier way to solve the problem.

Can you please tell me how to set the value to null without it disappearing?

Kind Regar

[Sureshkumar P]

Hi Peter, 

 

We have validated the reported issue. While assigning the empty string to the component’s value property then, it will be considered as value, and it added to the li element. Due to this, new empty row gets created on make the input element value as “”. So, we suggest you maintain the assigning the null value instead of “” to resolve the reported issue.  

Find the code example: 

 public onSelect(args: any): void { 

    setTimeout(() => { 

      this.listObj.value = null; 

    }); 

  } 

 

 

Find the sample here: https://stackblitz.com/edit/angular-4cq6sv-fp17vf?file=app.component.ts  

 

Regards, 

Sureshkumar P 

[Peter Linecker]

Hi Syncfusion Team,

I think you have misunderstood my problem. 

I got this object: 

  public selectTimeSettingPeriodDay: Object[] = [

    { value: null, text: 'General' },

    { value: 1, text: 'Monday' },

    { value: 2, text: 'Tuesday' },

    { value: 3, text: 'Wednesday' },

    { value: 4, text: 'Thursday' },

    { value: 5, text: 'Friday' },

    { value: 6, text: 'Saturday' },

    { value: 7, text: 'Sunday' },

  ];

And everytime i select 'General' the value is beeing removed but I don't want to change the value from null to "null" or 0 because I need it for my API request.

Is there a way that I can make it display even though the value beeing null?

Regards, Peter.

[Sureshkumar P]

Hi Peter, 

 

In our component we have clear the input value when set the null value to the component. Which is the reason the text value reset after choosing the null value list element.  So, we suggest you achieve your requirement by set the text value manually when choose the null element value as like below code. 

[component.html] 

<ejs-dropdownlist id="games" #sample [dataSource]="sportsData" (select)="onSelect($event)" [value]="value" 

  [fields]="fields" [placeholder]="waterMark" [popupHeight]="height"></ejs-dropdownlist> 

 

[component.ts] 

 

public sportsData: Object[] = [ 

     { Id: null, Game: 'General' }, 

     { Id: 'Game1', Game: 'American Football' }, 

     { Id: 'Game2', Game: 'Badminton' }, 

     { Id: 'Game3', Game: 'Basketball' }, 

     { Id: 'Game4', Game: 'Cricket' }, 

     { Id: 'Game5', Game: 'Football' }, 

     { Id: 'Game6', Game: 'Golf' }, 

     { Id: 'Game7', Game: 'Hockey' }, 

     { Id: 'Game8', Game: 'Rugby' }, 

     { Id: 'Game9', Game: 'Snooker' }, 

     { Id: 'Game10', Game: 'Tennis' }, 

   ]; 

   // maps the appropriate column to fields property 

   public fields: Object = { text: 'Game', value: 'Id' }; 

   // set the height of the popup element 

   public height: string = '220px'; 

   // set the placeholder to DropDownList input element 

   public waterMark: string = 'Select a game'; 

   // set the value to select an item based on mapped value at initial rendering 

   public value: string; 

   public onSelect(args: any): void { 

     setTimeout(() => { 

       if (this.listObj.value == null) { 

         this.listObj.inputElement.value = 'General'; 

       } 

     }); 

   } 

 

 

Find the modified sample here: https://stackblitz.com/edit/angular-4cq6sv-ovy3qz?file=app.component.ts  

 

Regards, 

Sureshkumar P 

[Kamil Dusak]

Hi SyncFusion Team

Thanks for answer. It is working when you want to select item with null id. But it is not working when you load form. Then drop down stays empty. I debug it lightly. Your function is called and it is working, label has change. But immediately after this function call is value erased again. I tried to call your function after view init, but it doesn't help.

What can I do? How can I show item with null right after page load?

BR

Camel

[Priyanka Karthikeyan]

Hi Kamil Dusak,

 

Thank you for your patience. To resolve the issue inside the form, please set the value for the dropdown list when a null field value is selected, as shown below. Please find the sample attached for your reference.

 

 <ejs-dropdownlist #sample id="dropdown" formControlName="skillname" name="skillname"                                 [dataSource]='sportsData' [fields]='fields' [placeholder]='autoreactiveplaceholder' (select)="onSelect($event)" (blur)="onBlur($event)" floatLabelType='Auto' >

</ejs-dropdownlist>

 public onSelect(args: any): void {

        if (args.itemData == null) {

            setTimeout(() => {

                const dropdownInput = document.getElementById("dropdown")?.getElementsByTagName("input")[0];

                if (dropdownInput) {

                    dropdownInput.value = "General";

                }

                (this.skillForm.get('skillname') as any).value = "General"

               this.skillForm.get('skillname').updateValueAndValidity(); // Ensure validation is triggered

            }, 0);

        }

    }

 

Sample: https://stackblitz.com/edit/angular-nsn1m4-4wnug1?file=src%2Fapp.component.ts,src%2Fapp.component.html

 

Regards,

Priyanka K