Limiting Character Input in the DropDownList Filter
Environment
| Product | Progress® Kendo UI® DropDownList for Angular |
Description
I want to limit the user to a maximum length in the filter input area of the DropDownList. Is it possible to restrict the character count to not exceed a certain limit?
This KB article also answers the following questions:
- How can I set a character limit for the filter input in the DropDownList?
- Is it possible to restrict input length in the DropDownList component?
- How do I implement a maxlength restriction on the filter input of a DropDownList?
Solution
To restrict the maximum number of characters that can be entered in the filter input of the DropDownList, you need to manually access the input field of the filter when the popup opens. This can be achieved by attaching an event listener to the opened event of the DropDownList and then setting the maxlength attribute on the filter input element.
Below is a code snippet demonstrating how to limit the filter input to a maximum of 4 characters in the DropDownList:
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-dropdownlist
[data]="[]"
[filterable]="true"
(opened)="handleOpened()"
>
</kendo-dropdownlist>
`,
})
export class AppComponent {
constructor(private el: ElementRef, private renderer: Renderer2) {}
public handleOpened(): void {
const searchInput = this.el.nativeElement.querySelector(
'.k-dropdownlist-popup .k-searchbox .k-input-inner'
);
if (searchInput) {
const existingMaxLength = searchInput.getAttribute('maxlength');
if (!existingMaxLength) {
this.renderer.setAttribute(searchInput, 'maxlength', '4');
}
}
}
}In the provided code, the handleOpened method finds the filter element and sets its maxlength attribute to the desired value. This ensures that users cannot input more characters than the specified limit in the filter area of the DropDownList.
A similar approach can be applied to the other DropDowns components, such as the DropDownTree.