Case insensitive dropdown selection in a reactive form

[Sam Prager]

I have a dropdown in a reactive form. eg :

<form [formGroup]='formGroupName'>
<ejs-dropdownlist [datasource]="javascriptOptionsObject" [fields]="{ text: 'label', value: 'code' }" formControlName="someFieldId"> </ejs-dropdownlist>
</form>

with a code behind like...

this.formGroupName = this.formBuilder.group({ someFieldId: '' })
this.javascriptOptionsObject : OptionsDto[] = { new OptionsDto { text : 'TextValue', code:'CodeValue' } .... }

Except, all fields are loaded from a http service using http calls. Often the foreign fields have inconsistent cases, eg: if the an Id for a gender field might have a value of 'Male' or 'male' or 'MALE'.

Is it possible to make the dropdown select a value from the datasource that does not match in case. I am reading values from a database which has inconsistent casing on the ids stored in fields, but I would prefer not to coerce all values and all codes in to uppercase.

[Deepak Ramakrishnan]

Hi Sam, 

 

Greetings from Syncfusion support. 

 

We are currently working on your requirement with provided details  We will update the possibilities in two business days(7^th,October 2021) . 

 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Sam, 

 

Thanks for your patience. 

 

We have validated the requirement in our end with the provided details . We request you to share the usecase for the required scenario to proceed further in our end . As per our understanding you need to populate the datasource with case sensitive data from the server but unfortunately it get populates all the data in our end.  

 

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

 

 

If the above  doesnot meet your requirement kindly provide the following details to proceed further in our end. 

1.As mentioned , Share the elaborated usecase for the scenario 

2.If any simple sample demonstration or modify the sample as per you requirement if possible 

3.Sample data source which meets your requirement  

 

 

The above details will help us to analyse further and provide you the better solution. 

 

Thanks, 

Deepak R. 

 

 

[Sam Prager]

Hmm, in my use case,  the data for the data source and the data for the dropdown are coming form separate places. I've edited the stackblitz to better show my use case.

https://stackblitz.com/edit/angular-vnomal-bbbuev?file=app.component.ts

In the image above, ideally there would be a way to for the dropdown to select the gender for person 2, even though 'male' does not match 'Male'. 

[Deepak Ramakrishnan]

Hi Sam, 

 

Thanks for your update. 

 

We have created a sample as per your requirement , In that we have checked the value (Converted to lowercase) with each data  in the datasource and binded the respective value to the component using created event of the dropdownlist.Kindly refer the sample and code snippet for your reference. 

 

[app.component.ts] 

createdHandler(){ 

    this.checkforValue(this.person) 

    

  } 

 

  checkforValue(person){ 

    for(let data =0 ;data<this.dropdownOptions.length ;data++) 

    { 

     if(person.code.toString().toLowerCase() == this.dropdownOptions[data].code.toString().toLowerCase()) 

     { 

       this.person = this.dropdownOptions[data]; 

       break; 

     } 

    } 

  } 

 

 

[app.component.html] 

<ejs-dropdownlist id='games' #sample  

        [dataSource]='dropdownOptions'   

        [value]='person.code'  

        [fields]='fields'  

        [placeholder]='waterMark' 

            [popupHeight]='height' 

            (created)='createdHandler($event)' 

            > 

    </ejs-dropdownlist> 

 

 

 

API documentation : https://stackblitz.com/edit/angular-vnomal-clqktv?file=app.component.ts 

 

Thanks, 

Deepak R.