New to Kendo UI for jQuery? Download free 30-day trial

Create Custom Number Editor by Using NumericTextBox


Product Progress® Telerik® UI Grid for jQuery


How can I create a Data Grid component with a custom number editor by using the Kendo UI for jQuery NumericTextBox?


To achieve the desired scenario, use the following suggested implementation:

  <div>I want to change 11.11% discount to 22.22% via editing. But 22.00% is thrown back at input of 0.2222</div>
  <div id="grid"/>
            field: "FirstName",
            title: "First Name"
            field: "LastName",
            title: "Last Name"
            field: "MyDiscount",
            title: "My Discount",
            format: "{0:p5}",
            editor: discountEditor,
        dataSource: {
          data: [
              FirstName: "Joe",
              LastName: "Smith",
              MyDiscount: 0.1111
              FirstName: "Jane",
              LastName: "Smith",
              MyDiscount: 0.1
        editable: true

      function discountEditor (container, options) {
          $('<input data-bind="value:' + options.field + '"/>')
                decimals: 7,
                format: "p5"

See Also

In this article