Telerik Forums
Kendo UI for jQuery Forum
1 answer
590 views

In Numeric Textbox when provide value more than 16 digits, Clicking outside the textbox, The number automatically gets incremented and decremented on different values

Another scenario when the provide value more than 20 digits, Clicking outside the textbox displays only one digit or different value

Do we have any solution/workaround to achieve this scenario?

Georgi Denchev
Telerik team
 answered on 16 Sep 2020
9 answers
1.5K+ views
Hi All,

How can I set focus to the kendo numerictextbox?

via $("#controlid").focus(), $("#controlid").select()  it doesn't work.
Anton Mironov
Telerik team
 answered on 16 Sep 2020
3 answers
266 views

The details here, do not seem to work for AngularJS implementation. Nothing happens, and none of my log messages are shown on click or focus.

http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/select-all-on-focus

My Html:

<input kendo-numeric-text-box
k-min="0"
k-ng-model="params.averagePrice.max"
style="width: 45%;"
k-format="'n1'"
k-step="0.1"
k-on-change="maxChange(params.averagePrice)"
k-on-spin="maxChange(params.averagePrice)"/>

 

Inside my Angularjs Controller:

$(document).ready(function () {
$("input[type=text]").bind("focus", function () {
$log.info("bind focus ");
var input = $(this);
clearTimeout(input.data("selectTimeId")); //stop started time out if any

var selectTimeId = setTimeout(function () {
input.select();
});

input.data("selectTimeId", selectTimeId);
}).blur(function (e) {
$log.info("bind blur");
clearTimeout($(this).data("selectTimeId")); //stop started timeout
})
});

Anton Mironov
Telerik team
 answered on 16 Sep 2020
5 answers
1.3K+ views

I am using KendoUI components to write a mobile friendly website. I've come across my first issue with the KendoUI controls. I have an Input DOM element as below:

<input type="number" id="myNumberInput" min="1" max="10" />

and the javascript behind this is as follows:

var inputDOM = $("#myNumberInput");
inputDOM.kendoNumericTextBox({format: "#"});

after the kendo control has been created, both the new input tag created by kendo and the old ones have both had their "type" properties set to "text" instead of "number". This has now completely removed the benefits on a phone where a context specific (i.e a number pad) is displayed when a "number" type input is selected.
Is there any way I can change the type property back to "number", or is there anything i'm missing?.
I can change the type of the original input object by just doing the below after the kendo control is made

inputDOM.prop("type", "number");

but this doesn't help the actual control now visible to the user. I've also tried the wrapper and element properties on the numericTextBox object as below

inputDOM.data("kendoNumericTextBox").element.prop("type", "number"); inputDOM.data("kendoNumericTextBox").wrapper.prop("type", "number");

but this did not seem to change the property of the visible control, the "element" only changed the value of the original now hidden Input element.
Any ideas where i've gone wrong, or how I can achieve this?

Tsvetomir
Telerik team
 answered on 26 Aug 2020
4 answers
182 views

Hi there,

I wanted to create my own custom widget binding for max configuration of numeric textbox.  With that, I found this article which describes on how to bind the max value of a Kendo UI numeric textbox widget.  The binding of the element that I want to achieve is like this 

<input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" /> 

 

However, when I implement the provided code on this article https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#custom-widget-binding-in-typescript - Custom Widget Binding I got an exception when applyBinding function is called in kendo.all.js.  Please see screen shot attached.

Below is my custom widget binding implementation:

 var dataStoreData = {

max_lines: 20
max_orders: 50000
max_orders_per_request: 500

}

kendo.data.binders.widget.max = kendo.data.Binder.extend({
                init: (widget, bindings, options) => {
                    // Call the base constructor
                    kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                },
                refresh: () => {
                    const that = this,
                    value = that.bindings["max"].get(); // Get the value from the View-Model

                    $(that.element).data("kendoNumericTextBox").max(value); // Update the widget
                }
            });

            maxResultSettingsViewModel = kendo.observable({
                data: dataStoreData,
                settings: dataStoreData,
                onDataValueChange: changeData => {
                    console.debug("onDataValueChange event is triggered.", changeData);
                },
                onClickEvent: clickData => {
                    console.debug("onClickEvent event is triggered.", clickData);
                }
            });

            // Bind the container element with the observable object
            kendo.bind($("#collapsible-content"), maxResultSettingsViewModel);

 

Did I implement the above code incorrectly? Or, do I need to upgrade to new version of Kendo UI library?. currently, I'm using version 2019.3.1023

 

Any help is greatly appreciated.

Cheers,

Junius

Junius
Top achievements
Rank 2
 answered on 26 Jul 2020
1 answer
147 views

The not in focus default for NumericTextBox always rounds to the nearest number defined by the format. 

For Example:

            $("#round_numeric").kendoNumericTextBox({
              format: "n0",
              value: 99.5,
              min: 0, max: 100,
            });

Displays 100.

I would like the not in focus format to round down (floor) so that the output is 99. 

Can this be achieved?

Thanks

Nikolay
Telerik team
 answered on 14 Jul 2020
1 answer
50 views
my Requirement is NumericText Box should allow numbers as follow:- 009876543221 and having spinners to increase and decrease numbers and should allow negative numbers in my textbox
Nikolay
Telerik team
 answered on 04 May 2020
5 answers
1.6K+ views

Hi there,

I'm struggling to make a kendo numeric textbox control make the user input as readonly but allow the user to use the spinner.  The readonly method makes the control not usable entirely.  I want only the user input box to be disabled, but the spinner should be working as is.

Is there any method or configuration that I can use? or does this feature is not supported on the current version?

 

 

Regards,

Junius

Nikolay
Telerik team
 answered on 21 Apr 2020
1 answer
101 views

I have an application that uses an input for the user to enter a number. When the input is changed another field is recalculated based on the value entered. Because the application is used in different cultures and because the telerik interferes on data binding (see https://www.telerik.com/forums/numeric-input-on-popup-edit-on-different-language) with the decimal separator I have to change the input to a telerik numerictextbox. However the input event does not exist on the numerictextbox.

I tried using numerictextbox_text.on('input keyup', calculate) but they do not work. How can I have the input event on the numerictextbox?

Tsvetomir
Telerik team
 answered on 03 Apr 2020
1 answer
94 views

Hello,

we have problem with NumericTextBox performance, we are trying to render 200 components (production report stuff).

Time which I get on Chrome 80 is ~2832ms, what interesting in FireFox 73 only 472ms, rendering 200 raw input (type=number) components is about 11ms.

How to optimize it, and why Chrome is 5x slower than FireFox in this case

 

https://dojo.telerik.com/iXUJaLAW/3

Tsvetomir
Telerik team
 answered on 17 Mar 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?