Skip to content

Latest commit

 

History

History
67 lines (50 loc) · 2.81 KB

index.md

File metadata and controls

67 lines (50 loc) · 2.81 KB
title page_title description slug canonicalLink position
Overview
NumericTextBox Overview - Components - Kendo UI for Vue
Get an overview of the features the Kendo UI NumericTextBox wrapper for Vue delivers and use the component in Vue projects.
overview_numerictextbox_wrapper
1

NumericTextBox Overview

The NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons.

It converts an <input> element into a numeric, percentage, or currency textbox. The conversion data type depends on the specific format. The component renders spin buttons which increase or decrease its value with a predefined step. The NumericTextBox accepts only numeric entries and uses the kendo.culture.current culture to determine the number precision and other culture-specific properties. When the NumericTextBox initializes, it wraps the <input> element with a <span></span> tag and renders Spin buttons.

The NumericTextBox wrapper for Vue is a client-side wrapper for Kendo UI NumericTextBox widget.

Basic Usage

The following example demonstrates the NumericTextBox in action.

{% meta height:100 %} {% embed_file numerictextbox/basic/main.vue preview %} {% embed_file numerictextbox/basic/main.js %} {% endmeta %}

Functionality and Features

  • [Setting the value]({% slug values_numerictextbox_wrapper %})
  • [Precision of numbers]({% slug precision_of_numbers_numerictextbox_wrapper %})
  • [Rounding of numbers]({% slug rounding_of_numbers_numerictextbox_wrapper %})
  • [Range validation]({% slug range_validation_numerictextbox_wrapper %})
  • [Focusing]({% slug focusing_numerictextbox_wrapper %})
  • [Keyboard navigation]({% slug keyboard_navigation_numerictextbox_wrapper %})
  • [RTL support]({% slug right_to_left_support_numerictextbox_wrapper %})

Events

The following example demonstrates basic NumericTextBox events. You can subscribe to all NumericTextBox events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-numerictextbox v-on:change="onChange"></kendo-numerictextbox>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
	methods: {
		onChange (e) {
			var value = e.sender.value();
			console.log(value);
		}
	}
})

Suggested Links