Need case-insensitive option for pre-selected value for drop down

[Steven]

interface Item {
  text: string,
  value: string
}

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        Selected Value: {{selectedValue}}
    </div>
    <kendo-dropdownlist
        [data]="listItems"
        textField="text"
        valueField="value"
        [valuePrimitive]="true"
        [(ngModel)]="selectedValue"
    >
    </kendo-dropdownlist>
  `
})
class AppComponent {
    public listItems: Array<Item> = [
        { text: 'Small', value: 's' },
        { text: 'Medium', value: 'm' },
        { text: 'Large', value: 'l' }
    ];

    public selectedValue: number = 'S';
}

 

Since this is an uppercase "S" the selected value does not pre-select.

 

Filtering works - case insensitive?

 

There must be some way of making this be case-insensitive without manipulating the data? The data comes from a backend db that is case-insensitive (MySql).

 

 

[Martin]

Hi Steven,

In general, this behavior is intended from our side. Currently, such an option is available only when filtering functionality is used. Then in the filtering options, the case sensitiveness can be disabled:

https://stackblitz.com/edit/angular-65uep3?file=app/app.component.ts

A possible workaround is to use toLowerCase() method on the client-side to modify the initial value passed to the DropDownList:

https://stackblitz.com/edit/angular-65uep3-qydhhk?file=app/app.component.ts

Let me know if I can assist any further.

Regards,
Martin
Progress Telerik

[Steven]

Neither suggestion is not helpful because I asked "without manipulating the data" and I already know filter works case-insensitive?

 

In my real world,, the drop down list contains mixed case data from the backend database server and manipulating the data is not an option because the users demand it,, so your drop down fails when the the selected value is not found.

 

Seems like a major omission in dropdown functionality?

 

 

[T. Tsonev]

Hello Steven,

The filtering operation is different in the sense that it may match multiple elements which makes it safe to disable case sensitivity.

For the selected value, the DropDownList must match at most a single value. With case sensitivity turned off this is no longer guaranteed. It may very well result in the wrong item being selected, if it differs only in case.

A database has the luxury of safeguarding against such invalid states. On the client side, this would either result in incorrect behavior or run-time errors that break the entire application. Neither outcome is desirable.

To address your concerns, Martin's suggestion does not imply that the selected value or the data must be changed. Mapping to and from lowercase can be handled in the component. This requires the use of object binding as we need to bind to the actual item instance. See the updated demo.

Best Regards,
T. Tsonev
Progress Telerik

[mohammad]

The whole thing seems a serious shortcoming to me. I have a table where data is upper case e.g. there's a value 'Full'. And the datasource for the dropdown has a list all uppercase i.e. 'FULL' . And this is failing to match. Even calling IgnoreCase(true) doesn't do anything.

[Martin]

Hi Mohammad,

Indeed the current discussion is about filtering data in the DropDownList itself:

https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/dropdownlist/filtering/

Typing FULL successfully filters the data:

https://stackblitz.com/edit/angular-nxcahz

When the DropDownList is used as a custom filter component in Grid, then the developer should be responsible for tackling the selected value and Grid records in order to match. However, this is a matter of another discussion. In case further assistance is needed. please open a new support thread. Thank you.

 

[Steven]

This is close but you can see it still fail by selecting Medium and then Small,,, and you will see that the original data is manipulated into a lowercase "s"

 

I was looking for an option to ignore case,, but since there is none,, this looks like the best answer.. Thanks