EditorFor Template Not working

[Laura]

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!

[Stefan]

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

[Dan]

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? 

[Stefan]

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

[Dan]

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

[Stefan]

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