This is a migrated thread and some comments may be shown as answers.

auto trim non-numeric pasted data

3 Answers 8 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Akhter
Top achievements
Rank 1
Akhter asked on 27 Jan 2021, 08:36 PM

How can I let users paste '   123456  ' into my numeric textbox and have it auto-strip the spaces? There are spaces in the beginning and in the end too. 

currently if there is any space at the beginning or at the end, it doesn't paste anything, show some sign of exclamation and value disappears.

 

<kendo-numerictextbox  k-format="'#'"  ng-model="searchParams.@Model.ParameterName">
        </kendo-numerictextbox>

I also tried this where I am making dynamically kendo control as shown below:

<input kendo-numeric-text-box k-format="'#'"  ng-model="searchParams.@Model.ParameterName" />

I have tried every possible solution, 

Can you please assist how can I achieve this in Angular JS ?

 

Thanks, 

Umair.

3 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 29 Jan 2021, 01:07 PM

Hi Akhter,

Thank you for the provided details.

In order to achieve the needed behavior in Angular.js, I would recommend using the autocorrect functionality of the Kendo UI NumericTextBox.
Here is an example:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <p>Enter value between -200000 and 200000.</p>
        <kendo-numerictextbox
            [autoCorrect]="autoCorrect"
            [min]="min"
            [max]="max"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

export class AppComponent {
    public autoCorrect = true;
    public min = -200000;
    public max = 200000;
    public value = 2;
}
The complete implementation and behavior could be found in the following stackblitz example:

Furthermore, the following forum thread answer is providing an approach to handling the "onPaste" event:

Give the approaches above a try and let me know if they achieved the required behavior or further assistance is needed.


Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Akhter
Top achievements
Rank 1
answered on 29 Jan 2021, 01:26 PM

Hi Anton, 

I am working on AngularJS while you have provided solution for Angular (latest version). I know in Angular with min,max  we can find it there. but with AngularJS I could not generate this behavior. 

Please suggest as the other links are 3 years old, I guess, there must be some solution.

0
Anton Mironov
Telerik team
answered on 02 Feb 2021, 11:53 AM

Hello Akhter,

Thank you for your patience. 

In this case, I would recommend handling the "onPaste" event of the numeric input. In the event handler, prevent the default behavior, replace the unneeded data, and set the parsed result as a value for the Kendo UI NumericTextBox.

I created a sample for the approach above. It is in JavaScript. Hope it will help:

Give a try to the implementation above and let me know if this is the expected behavior, or further assistance is needed.

Greetings,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
NumericTextBox
Asked by
Akhter
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Akhter
Top achievements
Rank 1
Share this question
or