Edit this page

Create Custom Number Editor Using NumericTextBox

The following example demonstrates how to create a Grid with a custom number editor by using the NumericTextBox.

  <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

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article