Set the numerictextbox width in symbols

Question

We know that is possible to set the width of a input text as number of symbols via the size attribute.

1 <input type="text" size="1" value="123456789"><br/>
2 <input type="text" size="2" value="123456789"><br/>
3 <input type="text" size="3" value="123456789"><br/>
4 <input type="text" size="4" value="123456789"><br/>

Is that possible with the kendo's NumericTextbox (for angular)

Answer 1

I think you could override the size attribute by creating a new directive for the kendo-numerictextbox with a size input where the type is the enumerated kendo values or number. Then you would either set the NumericTextBoxComponent's size if it is one of t he enumerated kendo values -or- set the native element's size attribute if it is numeric.

Here is (untested) code to give you an idea:

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs/main';

@Directive({
    selector: '[kendo-numerictextbox]'
})
export class SizeOverrideDirective implements OnChanges {

    @Input() customSize: 'small' | 'medium' | 'large' | 'none' | number;

    constructor(private numericTextBox: NumericTextBoxComponent) { }
                
    ngOnChanges(changes: SimpleChanges): void {
      if (!changes.customSize) {
          return;
      }

      if (changes.customSize.currentValue) {
          if (['small', 'medium', 'large', 'none'].includes(changes.customSize.currentValue)) {
            this.numericTextBox.size = changes.customSize.currentValue;
          } else {
            this.numericTextBox.numericInput.nativeElement.setAttribute('size', changes.customSize.currentValue);
          }
      } else if (!changes.customSize.firstChange) {
        this.numericTextBox.size = null;
        this.numericTextBox.numericInput.nativeElement.removeAttribute('size');
      }
  }

}