Can combobox input string be processed or masked?

[Ron]

We have a situation where our client will be both using the filtering feature of a combobox and adding/creating new values when the  input string does not match a data value. The caveat - these are strings of numeric value only. I'd like to do something to the following effect - process this string in Regex and reset the input value (scrubbing alpha and any other non-numeric values entered by the user),. The only trouble is neither the valueChange nor filterChange return a standard event object which would allow me to set it manually and the jQuery examples might be either dated or less compatible with the Angular components as I've tried a few things without success.

At this point filtering isn't an issue as I can at least post-process the string I receive from the filterChange event, I'd just like to know if it's possible to feed that same tailored string back or even mask the values on their way in.

Let me know if there is a way that this can be achieved.

[Slavena]

Hi Ron,

Thank you for the provided details.

However, I am not quite sure I understand the requirement. Could you please provide us with some additional information, e.g. in which event exactly would you like the described functionality to be applied. Also, could you iterate a bit more on what do you mean with 'mask the values'.

I am looking forward to your reply.

Regards,
Slavena
Progress Telerik

[Ron]

Slavena,

In fewer words then. Your combo boxes have a feature where filtering can be performed by keying in values. I would like to set this feature to only receive numeric values and not display non-numeric ones. Is there anything I can do at my end to make this happen?

[Slavena]

Hello Ron,

Thank you for the provided additional details.

There is no such built-in feature, however, as a workaround I would suggest listening for the keydown event on the input using Renderer2 and canceling its default action when the value is non-numeric:

const cbInput = document.querySelector('.k-input');
this.renderer.listen(cbInput, 'keydown', this.keydownHandler);

if (/\D/.test(e.key) && e.key !== "Backspace") {
    e.preventDefault();
}

This Stackblitz demo demonstrates the suggested approach.

I hope this helps. Let me know if there are any further questions.

Regards,
Slavena
Progress Telerik