This is a migrated thread and some comments may be shown as answers.

EditorFor Template Not working

5 Answers 1692 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Laura
Top achievements
Rank 1
Laura asked on 18 Jan 2018, 08:07 PM

I have a decimal field DocNum and a nullable integer field RelatedDocNum

I've created an EditorFor template called Decimal.cshtml:

@model decimal?
@(Html.Kendo().NumericTextBoxFor(m => m).HtmlAttributes(new { @class = "form-control" }).Decimals(2))

 

and an EditorFor template called Integer.cshtml:

@model int?
 
@(Html.Kendo().IntegerTextBoxFor(m => m).HtmlAttributes(new { @class = "form-control" }).Min(int.MinValue).Max(int.MaxValue))

 

When I use it in my view, like this: 

@Html.EditorFor(m => m.DocNum)

and

@Html.EditorFor(m => m.RelatedDocNum)

 

DocNum renders correctly, but RelatedDocNum does not.  The class form-control does not get applied to RelatedDocNum.  See screenshot.

I do not have any Kendo or jQuery errors on the page.  The page source looks like this:

<div class="col-md-4">
<label class="control-label" for="DocNum">Document Number</label>
<input class="form-control" data-val="true" data-val-number="The field Document Number must be a number." data-val-required="The Document Number field is required." id="DocNum" name="DocNum" type="text" value="5227.00" />
<script>
kendo.syncReady(function(){jQuery("#DocNum").kendoNumericTextBox({"decimals":2});});
</script>
<span class="field-validation-valid text-danger" data-valmsg-for="DocNum" data-valmsg-replace="true"></span>
</div>
<div class="col-md-4">
<label class="control-label" for="RelatedDocNum">Related Document Number</label>
<input class="text-box single-line" data-val="true" data-val-number="The field Related Document Number must be a number." id="RelatedDocNum" name="RelatedDocNum" type="number" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="RelatedDocNum" data-valmsg-replace="true"></span>
</div>

What am I missing?

TIA!

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Jan 2018, 07:57 AM
Hello, Logan,

The described result is expected because the first editor is rendering a NumericTextBox and the second one is rendering a standard IntegetBox. This can also be observed in the rendered scripts as the DocNum is creating a NumericTextBox widget:

kendo.syncReady(function(){jQuery("#DocNum").kendoNumericTextBox({"decimals":2});});

And the element rendered for the RelatedDocNum is a standard input:

<input class="text-box single-line" data-val="true" data-val-number="The field Related Document Number must be a number." id="RelatedDocNum" name="RelatedDocNum" type="number" value="" />

I can suggest using NumericTectBox for both of them and setting the decimals to 0 for the integer input.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 13 Apr 2018, 02:17 PM

Hi Stefan,

I have the same problem and I am confused. Where should we use NumericTextBox for both of them?

In the Telerik Asp.NET Core you are provided also an Integer.cshtml as an example for editor template. How can I make this to be used? 

0
Stefan
Telerik team
answered on 17 Apr 2018, 06:06 AM
Hello, Dan,

Both of them was said as in the original question ас there were two numeric inputs and they both should use Kendo UI NumericTextBox.

Please advise if this is again in a standard for or inside an editable Grid?

I will be expecting more details on the current issue and I will gladly assist.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 17 Apr 2018, 06:49 AM

Hi Stefan,

No, the orginal question is with "and a nullable integer field RelatedDocNum". My field though is just integer. And I don't want to use the template in a grid, just like the original question I am using the Html helper method EditorFor.

Anyway I manage to make it work by naming the template editor Int32, however I still don't get what is the template Integer.cshtml for since the Int32.cshtml works

0
Stefan
Telerik team
answered on 18 Apr 2018, 06:51 AM
Hello, Dan,

I'm glad that the desired result is achieved.

The main reason is that the "Integer.cshtml" template is producing different DOM result, and it is rendered at a different time which is preventing adding additional classes. This is why we suggested using NumericTextBox for both and setting the decimals to 0 to simulate integer values.

Using "Int32.cshtml" is also a valid approach in this scenario. Thank you for sharing it with us and the community.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
NumericTextBox
Asked by
Laura
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or