Getting Started

5 Jun 20183 minutes to read

Using the following steps, you can create a TypeScript PercentageTextbox component.

Creating an PercentageTextbox in TypeScript

You can create a TypeScript application with the help of the given TypeScript Getting Started Documentation.

Within an index.html file and add the scripts references in the order mentioned in the following code example.

<!DOCTYPE html>
<html>
<head>
<title>TypeScript Application</title>
<link href="http://cdn.syncfusion.com/**24.2.3**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://cdn.syncfusion.com/**24.2.3**/js/web/ej.web.all.min.js" type="text/javascript"></script>

</head>
<body>
<!--Add Textbox sample  here-->
</body>
</html>

The PercentageTextbox can be created from a input element with the HTML id attribute and pre-defined options set to it.

HTML

<input id="percent" type="text" />
<script src="app.js"></script>

Create app.ts file and use the below content

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module EditorComponent {
      var per = new ej.PercentageTextbox($("#percent"), {
            value: 60,
            name: "percent",
            width: "100%"
        });
}

Now build your application, so that the app.ts file will compiled and automatically generated the app.js file which is added to your project (User have nothing to do with this file). Now, whatever code changes that you make in app.ts file will be reflected in app.js file by compiling build the application.

Execution of above code will render the following output.

set min and max values

To set the maximum/ending value of the Textbox, you can use the maxValue property. Data type of this property is “number”.

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module EditorComponent {
var per = new ej.PercentageTextbox($("#percent"), {
    value: 60,
    maxValue: 1000,
    name: "percent",
    width: "100%"
});
}

To set the minimum/starting value of the Textbox, you can use the minValue property. Data type of this property is “number”.

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module SliderComponent {
$(function () {
var per = new ej.PercentageTextbox($("#percent"), {
    value: 60,
    minValue: 10,
    maxValue: 1000,
    name: "percent",
    width: "100%"
});
});
}