Kendo UI – Number Control


Kendo UI – Number Control

 1.1     Introduction


The Kendo UI number input control provides an input for entering a number and also allows users to click up and down arrows to select a number.
The number input control is that it is a combination of text and range. A user can enter values directly just like they do in a textbox, but at the same time is restricted to enter only numerical values in a range, like a range control.

The min and max attributes, allow you to enter range of values. The step attribute sets the value increment and the value attribute lets you specify the default value of the control.

1.2     How to Create Number Control


Code :
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Kendo UI - Number Control </title>
    <script src="../js/jquery-1.8.2.js"></script>
    <link href="../Kui/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../Kui/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="../Kui/js/jquery.min.js"></script>   
    <script src="../Kui/js/kendo.web.min.js"></script>   
 </head>
<body>
    <form id="form1" runat="server">
    <div id="example" class="k-content">
            <input id="txtnumber" placeholder ="Enter Amount" />
            <script>
                $(document).ready(function () {
                    $("#txtnumber").kendoNumericTextBox();
                });
            </script>
        </div>
    </form>
</body>
</html>

The code explains how to create number input control in kendo UI.
We need to place a Input Control within the form tag and add this input ID (txtnumber) into kendo using KendoNumbericTextBox Script method.
Eg : $("#txtnumber").kendoNumericTextBox();

Before we use Kendo UI Number control we must include the JQuery Java script file and Kendo UI Reference files such as Kendo.web.min.js and add the Kendo UI Css for appearance.We add this code in ” $("#txtnumber").kendoNumericTextBox();” in document.ready section.


1.3     Properties


Kendo Number control has following properties:
1)    culture
a.     Specifies the Culture info used by the NumericTextBox Widget.
b.    Culture (string) default value is en-US
$("#txtnumber").kendoNumericTextBox({
    culture: "de-DE"
});
2)    decimals
a.     Specifies the number precision. If not set precision defined by current culture is used.
b.    Decimals (number) default value is null
$("#txtnumber").kendoNumericTextBox({
    min: 0,
    max: 1,
    step: 0.1,
    decimals: 1
});

3)    dropArrowText and upArrowText
a.     Specifies the text of the tooltip on the down arrow  and up arrow
b.    dropArrowText (string) default value is Decrease value
c.     upArrowText (String) default value is Increase Value
$("#txtnumber").kendoNumericTextBox({
    min: 0,
    max: 100,
    value: 50,
    upArrowText: "More",
    downArrowText: "Less"
});
4)    format
a.     Specifies the format of the number. Any valid number format is allowed.
b.    Format (String) default value is n
              format: "p0", // format as percentage with % sign

5)    min, max
a.     Max: Specifies the largest value the user can enter.
b.    Max (number) default value is null
c.     Min: Specifies the smallest value the user can enter.
d.    Min (number) default value is null
$("#txtnumber").kendoNumericTextBox({
    min: 0,
    max: 100,
    value: 50
});
 
6)    placeholder, spinners, step
a.     Placeholder: Specifies the text displayed when the input is empty.
b.    Placeholder (string) default value is empty string “”.
c.     spinners : Specifies whether the up/down spin buttons should be rendered
d.    spinners (Boolean) default value is true.
e.     Step: Specifies the increment/decrement step.
f.      Step (number) default value is 1.
      $("#txtnumber").kendoNumericTextBox({
                                     min: 0,
                                     max: 100,
                                     value: 50,
                                     placeholder: "Select A Value"
                                                             spinners: false
                                     step: 10
                 });
7)    Value
a.     Specifies the value of the NumericTextBox widget.
b.    Value (number) default value is null
$("#txtnumber").kendoNumericTextBox({
    min: 0,
    max: 100,
    value: 50
});

 1.4     Methods


Kendo Number control has following methods:
1)    Enable
a.     Enable/Disable the numerictextbox control.
// get a reference to the numeric textbox
var numerictextbox = $("#txtnumber")data("kendoNumericTextBox");
 
// disables the numerictextbox
numerictextbox.enable(false);
 
// enables the numerictextbox
numerictextbox.enable(true);
b.    Parameters
                                          i.    Enable – Boolean (The argument, which defines whether to enable/disable the numerictextbox)
2)    Focus
a.     Focuses the numerictextbox control.
// get a reference to the numeric textbox
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// focus the numerictextbox
numerictextbox.focus();

3)    Max,min,step,value
a.     Max - Gets/Sets the max value of the NumericTextBox.
// get a reference to the NumericTextBox widget
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// get the min value of the numerictextbox.
var min = numerictextbox.min();
// set the min value of the numerictextbox.
numerictextbox.min(-10);

b.    Min - Gets/Sets the min value of the NumericTextBox.
// get a reference to the NumericTextBox widget
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// get the min value of the numerictextbox.
var min = numerictextbox.min();
// set the min value of the numerictextbox.
numerictextbox.min(-10);

c.     Step - Gets/Sets the step value of the NumericTextBox.
// get a reference to the NumericTextBox widget
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");

// get the step value of the numerictextbox.
var step = numerictextbox.step();

// set the step value of the numerictextbox.
numerictextbox.step(0.1);

d.    Value - Gets/Sets the step value of the NumericTextBox.

// get a referene to the numeric textbox
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// get the value of the numerictextbox.
var value = numerictextbox.value();
// set the value of the numerictextbox.
numerictextbox.value("10.20");

 1.5  Events


Kendo Number control has following events:
1)    Change
a.     Fires when the value is changed
$("#txtnumber").kendoNumericTextBox({
    change: function(e) {
    }
});
b.       To set after initialization
// get a reference to the numeric textbox widget
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// bind to the change event
numerictextbox.bind("change", function(e) {
});
2)       Spin
a.        Fires when the value is changed from the spin buttons.
$("#txtnumber").kendoNumericTextBox({
    spin: function(e) {
    }
});
b.       To set after initialization
// get a reference to the numeric textbox widget
var numerictextbox = $("#txtnumber").data("kendoNumericTextBox");
// bind to the spin event
numerictextbox.bind("spin", function(e) {
});

Comments

Post a Comment

Popular posts from this blog

DACPAC Pros & Cons

The DACPAC (Data-tier Application Component Package) is a Microsoft SQL Server technology used for packaging and deploying SQL Server database schema and objects. It is specifically designed for SQL Server environments and is not applicable to other database platforms. Here's a list of its pros and cons:   Pros:     Version Control : Using GITHUB we can be able to control version management for database schema and objects, which helps in tracking changes over time and collaborating with team members effectively. Version control allows multiple team members to work on the same codebase simultaneously. Single source of truth: It ensures all the team members is working with the latest version of scripts and database objects. The version control enables developers to revert to a previous version if needed. The developers creating the same procedure for testing purposes in different names. While manually merging the procedure will affect the functionality which is already working
Read more

Understanding Asynchronous JavaScript

Image
Introduction One of the ideas in JavaScript that I think most beginners struggle with is asynchronous programming. I struggled to understand it as well. It took some time for me to finally grasp this notion, despite the fact that I saw a number of tutorials and read a lot about it. In order to make asynchronous JavaScript easy to comprehend for novices, I will do my best to describe it in this essay.   JavaScript is a single-threaded programming language which means only one thing can happen at a time. That is, the JavaScript engine can only process one statement at a time in a single thread. While the single-threaded languages simplify writing code because you don’t have to worry about the concurrency issues, this also means you can’t perform long operations such as network access without blocking the main thread. Imagine requesting some data from an API. Depending upon the situation the server might take some time to process the request while blocking the main thread maki
Read more