Kendo UI ASP.NET MVC TreeList InCell NumericTextBox Editor

1 Answer 33 Views
Top achievements
Rank 1
Chris asked on 19 Dec 2021, 02:40 AM

The default NumericTextBox widget that is being generated when InCell editing a decimal field in a TreeList widget is constrained to 2 decimal precision. I want to achieve 3 decimal place precision.  I have set the format as "{0:n3}" to force the value to be displayed as 3 decimal places, but the NumericTextBox editor is rounding to 2 decimal places.  I want to override this but have not been successful.  Is there a way to specify the default editor for a TreeList field?  For the Grid widget, we can use the DefaultEditorTemplate but no such property seems to exist for TreeList fields.  It would be great if I could simply use the editor templates found in ~/Views/Shared/EditorTemplates, but this does not appear to be the case as changes to these default editor template files is not reflected for the InCell editor.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 22 Dec 2021, 06:53 PM

Hi Chris,


Thank you for writing to us.

What about Inline editing? Can you try that the Inline editing mode and let me know about the result? 

I want to list the 4 available options to achieve this requirement:

1. Built-in EditorTemplate as you mentioned.

2. Custom EditorTemplate using UIHint in the Model definition, e.g.:

        public CategoryViewModel Category
3. Using the Editor property + javascript solution:

4. Using the .Events(e=>e.Edit("...")) handler of the treelist to access the generated numerictextbox and then call its setOptions() method to set the new numeric format:

You can freely use any of these solutions to achieve this requirement.

Let me know your opinion and preference.


Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Top achievements
Rank 1
commented on 26 Dec 2021, 09:43 PM

Hi Eyup, thank you for responding. 

I have already tried using the "examples" that you cite.  I have to say that those examples need to be refreshed with more meaningful details rather than simply writing to the console.  In fact, all kendo ui examples that simply write a text string to the console are doing a disservice to your users.

I am using In Cell editing as requested by the client.  InLine is not an option here as we are using an on demand popup (modal) form to do the bulk of the heavy editing.  The InCell is used exclusively for a single numeric field.

1. Default Editor does not work.  I have edited the Number.cshtml file in the /Views/Shared/EditorTemplates folder and it does not get used.  Here is the Number.cshtml file which has been updated from the default because I need decimals to be formatted as N3 and have 20 decimal place precision since the corresponding SQL column is decimal(30,20).

@model double?
@(Html.Kendo().NumericTextBoxFor(m => m)
    .HtmlAttributes(new { style = "width:100%;" })

2. The Custom Editor template using UHint is not an option in my use case.  Instead of using a ViewModel for the data model object, the data is bound to a data model class that is dynamically generated using a T4 template for which any edits are overwritten the next time the T4 templates are transformed.

3. I was not able to get the Editor properties to work with InCell editing.  It just displayed the name of the javascript function in the input.  I am guessing this only works for InLine editing, which again is not an option for this use case.

4. I did get the TreeList OnEdit event handler to set the NumericTextBox options as required (see below code snippet) such that the format is N3 and the value is not rounded.   However, if I click in the cell to edit it, the numeric text box editor reverts to the default with value rounded to 2 decimal places.

const numericTextBox = e.container.find("[data-role=numerictextbox]").data("kendoNumericTextBox");
if (numericTextBox !== null && numericTextBox !== undefined) {
	numValue = numericTextBox.value();
	numericTextBox.setOptions({ value: numValue, format: "n3", decimals: 20, restrictDecimals: true, round: false, step: 1});

Telerik team
commented on 29 Dec 2021, 09:22 AM


Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question