Questions on UI for ASP.NET Core Forum

2 answers

25 views

NumericTextBoxFor showing incorrect value when using culture pt-BR

Hi,

Looks like there is some kind of issue when trying to use the .NET Core wrapper for NumericTextBoxFor while using the culture pt-BR.

The values in the text field gets incorrect if the value has a decimal.

For example a double 1234.56 becomes 123,456.00 but the expected result is 1.234,56

This happens when the kendo.culture().numberFormat[","] is a "." (dot).

Here is an example of the error:
https://netcorerepl.telerik.com/weavadPV01xSQZX716

I can also reproduce the error with Kendo UI jQuery, If the html input tag has an intital value, then it becomes like the example above.
https://dojo.telerik.com/@douglas.nordfeldt@nefab.com/ejEhecIV/2
https://dojo.telerik.com/@douglas.nordfeldt@nefab.com/ogiVoMAZ/5

Managed in my examples to do a work around until this has been fixed.

NumericTextBox

answered on 10 Jan 2024

1 answer

62 views

How to use custom validity on Kendo controls?

Using custom validity as below...

@(Html.Kendo()
.TextBoxFor(m => m.Task)
.Value(null)
.HtmlAttributes(new
{
required = "required",
oninvalid = "this.setCustomValidity('Enter a task')",
oninput = "this.setCustomValidity('')"
})
)

I've tried to do the same for other controls (numeric textbox, datetime picker, autocomplete) but it doesn't work.

For example, when trying the same thing for numeric textbox, in console I get an error "An invalid form control with name='Advance' is not focusable.

@(Html.Kendo()
.NumericTextBoxFor(m => m.Advance)
.Min(0).Max(1000)
.HtmlAttributes(new
{
id = "advance",
required = "required",
oninvalid = "this.setCustomValidity('Enter a number')",
oninput = "this.setCustomValidity('')",
})
)

AutoComplete

Date/Time Pickers

NumericTextBox

answered on 09 Nov 2023

1 answer

630 views

How to set numeric text box max value based on template data item field

I am setting up a custom kendo window for a grid popup. On the window I have a form that will be posted via ajax. I am attempting to use a numeric text box in the template for the popup but I need to set the max value based on the data item that is using the popup. Is it possible to use a numeric text box in a kendo template and set the max value to a field in the data item for the template? Also, I can't seem to figure out how to set up validation for numeric text box either. How do I use a numeric text box that is not bound to the model but still validates the input?

This is the grid columns. The custom command opens my kendo window.

.Columns(columns =>
            {
                columns.Bound(m => m.Name).Groupable(false);
                columns.Bound(m => m.InventoryTypeName);
                columns.Bound(m => m.Description).Hidden().Groupable(false);
                columns.Bound(m => m.Active);
                columns.Bound(m => m.BulkItems).Hidden();
                columns.Bound(m => m.QuantityOnHand).Hidden();
                columns.Bound(m => m.QuantityAssigned).Hidden();
                columns.Bound(m => m.QuantityTotal).Hidden();
                columns.Bound(m => m.Brand).Title("Brand Required").Hidden();
                columns.Bound(m => m.SerialNumber).Title("S/N Required").Hidden();
                columns.Bound(m => m.ModelNumber).Title("Model# Required").Hidden();
                columns.Bound(m => m.Size).Title("Size Required").Hidden();
                columns.Bound(m => m.Color).Title("Color Required").Hidden();
                columns.Bound(m => m.CreatedBy).Title("Creator").Hidden();
                columns.Bound(m => m.CreatedDate).Title("Creation Date").Hidden();
                columns.Bound(m => m.UpdatedBy).Title("Last Editor").Hidden();
                columns.Bound(m => m.UpdatedDate).Title("Last Edit Date").Hidden();
                columns.Command(m => { m.Edit(); m.Custom("Assign").Click("AssignInventory"); });
            })

Here is the script for the custom command.

@*Assign inventory script for command button*@
    <script type="text/javascript">
        function AssignInventory(e) {
            e.preventDefault();

            var assignTemplate = kendo.template($("#AssignInventoryTemplate").html());
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#AssignInventoryWindow").data("kendoWindow");

            wnd.content(assignTemplate(dataItem));
            wnd.center().open();
        }

        function AssignmentTypeData() {
            var inventoryTypeId = $("#InventoryTypeId").val();

            return { inventoryTypeId: inventoryTypeId };
        }

        function FilterAssignees(e) {
            return {
                assignmentTypeId: $("#AssignmentType").val()
            }
        }
    </script>

This is my template script for the window.

<script type="text/x-kendo-template" id="AssignInventoryTemplate">
    <form id="AssignInventoryForm" class="k-edit-form-container" action="/Inventory/AssignInventory" method="post" kendo-validator="true">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />

        <div class="k-edit-label">
            <label>Assignment Type</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("AssignmentType")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignment Type")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                    });
                })
                .ToClientTemplate()
            )
        </div>

        <div class="k-edit-label">
            <label>Assign To</label>
        </div>
        <div class="k-edit-field">
            @(Html.Kendo().DropDownList()
                .Name("Assignee")
                .DataTextField("Name")
                .DataValueField("Id")
                .OptionLabel("Select Assignee")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAssignees", "Inventory").Data("FilterAssignees");
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AssignmentType")
                .ToClientTemplate()
            )
        </div>

        # if(data.BulkItems) { #
            <div class="k-edit-label">
                <label>Quantity To Assign</label>
            </div>
            <div class="k-edit-field">
                @*<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                    <input id="QuantityToAssign" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAssign" value="1" required="required">
                </span>
                <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAssign" id="QuantityToAssign_validationMessage" data-valmsg-for="QuantityToAssign">
                    <span class="k-tooltip-icon k-icon k-i-warning"></span>
                    <span class="k-tooltip-content">The QuantityToAssign field is required.</span>
                    <span class="k-callout k-callout-n"></span>
                </div>*@
                @(Html.Kendo().NumericTextBox()
                    .Name("QuantityToAssign")
                    .Value(1)
                    .Min(1)
                    .Max(@<text>#:QuantityOnHand#</text>)
                    .ToClientTemplate()
                )
                <span class="k-invalid-msg" data-for="QuantityToAssign"></span>
            </div>
        #}#
    </form>

</script>

In the template I can set up a numeric input but I'd like to use the Kendo numeric text box if possible. Either way, I need to validate that the numeric input is within the min/max range but can't seem to get it to validate.

NumericTextBox

answered on 03 Jan 2023

1 answer

811 views

Upgrade to Nuget package Telerik.UI.for.AspNet.Core 2022.2.510 and now getting error "Could not load file or assembly 'Microsoft.DotNet.InternalAbstractions"

After updating a working .NET 5 project to .NET 6 and upgrading Nuget package Telerik.UI.for.AspNet.Core from 2021.2.511 to 2022.2.510, I am now receiving an error using IntegerTextBoxFor on an object property model. The error is

FileNotFoundException: Could not load file or assembly 'Microsoft.DotNet.InternalAbstractions, Version=1.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The system cannot find the file specified.

Below are screen shots of:

The exception
The Nuget packages 1.) From the .NET 5 working solution and 2.) from the .NET 6 solution that crashes.
The line of code that causes the exception. Note that if I bind to a simple property instead of a complex object property, the error does not happen.

Nuget Package Telerik.UI.for.AspNet.Core

The Nuget package on the left is referencing version 2021.2.511. As you can see, that version includes a reference to the file that is causing the error, which is Microsoft.DotNet.InternalAbstractions. The package on the right is referencing the latest version 2022.2.510 and that package does not include the file that is causing the error.

@(Html.Kendo().IntegerTextBoxFor(x => x.Product.Odometer)
    .Min(0)
    .Culture(Localizer.CultureCode)
 )

If this file is still a dependency of that particular Telerik package, why is it missing? And please advise on how to fix this.

Thank You,
dbeard

NumericTextBox

answered on 20 May 2022

1 answer

48 views

NumericTextBox<decimal>() and ms sql server 2008

<div class="form-group">
                        <label asp-for="Summ">Стоимость от</label>
                        @(Html.Kendo().NumericTextBox<decimal>()
                            .Name("Summ")
                            .Min(0)
                            .Value(Model.Summ)
                            .HtmlAttributes(new { style = "width: 100%" })
                        )
                    </div>

public class ServiceViewModel
    {
        ......
        public decimal Summ { set; get; }.....
    }

var supportedCultures = new[] { new CultureInfo("ru-RU") };

            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture("ru-RU"),
                SupportedCultures = supportedCultures,
                SupportedUICultures = supportedCultures
            });

<script src="~/lib/kendo/js/cultures/kendo.culture.ru-RU.min.js"></script>

the database contains a value, but does not display it correctly.And also, when saving the form, it does not take a value in the model, therefore, in the controller, the value is 0.How to fix it all?

NumericTextBox

answered on 16 Feb 2022

1 answer

206 views

How to show a unit (e.g. EUR) while editing in a NumericTextBox (ASP.NET Core)

Hi,

is there a way to show the unit during editing in the NumericTextBox.

Right now the behavior is like this:

Editing: 123,55 (without EUR)--> After losing the focus it's formating the value to 123,55 EUR

The desired behavior would be that the EUR would be showing up already in the editing mode.

Editing 125,55 EUR

Regards
Martin

NumericTextBox

answered on 16 Dec 2021

1 answer

73 views

How to remove the auto formating on numericTextBox (Asp.net core) ?

How to display the real value without formating.

Default formating is N2 :

Value : 10.567

Display: 10.56 or 10.57 with round

Change formating to N8 :

Value : 10.5678

Display: 10.56780000

I would like to display 10.567 or 10.5678 without 0, as in edition.

Thx.

NumericTextBox

answered on 26 Nov 2021

1 answer

948 views

Keep leading zeros with numeric textbox

                    <label for="poNumTextbox" style="color:white; line-height:3.2; padding-right:5px; padding-top:5px">PO#</label>
                    <div class="k-textbox" style="width:120px">
                        @(Html.Kendo().NumericTextBox<int>()
                            .Name("poNumTextbox")
                            .Format("#")
                            .Decimals(0)
                            .RestrictDecimals(true)
                            .Placeholder("PO #")
                        .HtmlAttributes(new { style = "font-size:inherit; width: 100%" })
                        .Spinners(false)
                        )
                    </div>

I am trying to figure out how to keep leading zeros. Numbers can be something like "00045678" with max 8 chars. However when you click out of the textbox, it is converted to "45678" I'm using numeric textbox to prevent entry of non-numeric characters. Also no decimals or special characters - numbers only.

Thank you.

edit: nevermind, found that MaskedTextbox gives me what I need without having to misuse NumericTextbox

NumericTextBox

answered on 23 Nov 2021

1 answer

256 views

Group field validation

I have a group of fields on a form. It is OK if they are all empty, but if one in the group has data, they all must have data. There are other fields with other validation rules that are not part of the group.

The fields are a combination of TimePicker, NumericTextBox, TextBox, MaskedTextBox, ComboBox and RadioButton. The fields always appear in a group so they aren't spread out all over the form.

The values need to be checked before the form is saved.

What's the best way of checking for all fields null or not null and if they are not all null or all not null then display a message. Ideally it would be nice to display which fields are missing.

I'm using the MVVM pattern

TIA

answered on 12 Oct 2021

1 answer

48 views

Using form-control-sm with numeric text box

I am trying to style a numeric text box with bootstrap 4's form-control-sm. This is the code:

@(Html.Kendo().NumericTextBox<decimal>()
.Name("FundedAmount")
.Format("c")
.Min(0)
.HtmlAttributes(new { style = "width: 100%", @class = "form-control form-control-sm"})
)

When I've used this control without the '-sm' it works fine even if I leave off the 'form-control' class. When I add the classes as shown above what I get is in the attached image. Looks like one of the inputs is correctly sized and the other isn't. Also the font size is the regular size rather than the .875em that the '-sm' gives. I found some random things online but haven't had any luck getting it to format correctly.

Any ideas how to style this to match the regular bootstrap 4 'form-control-sm' sizing ?

NumericTextBox