Questions on UI for ASP.NET Core Forum

1 answer

8 views

How to pass a custom class to a textbox label

I'm trying to apply a class to a textbox label like so:

<kendo-textbox name="customerNameTextbox" for="@Model.Name">
<textbox-label content="Name" class="required" />
</kendo-textbox>

However, I can see in the browser development console that the label component associated with the component only has the usual k- classes applied to it:

How can I make sure my class is applied to the label?

TextBox

answered on 29 Jun 2025

1 answer

78 views

Not able to see clear button in Aspnet core Textbox control

I am not able to see clear button aspnet core text box control. I have added clear-button="true" to textbox tag helper code and still not able to see the clear button when the data is entered in the text box.

TextBox

answered on 25 Dec 2024

0 answers

139 views

Html.Kendo().TextBoxFor inside a form renders textboxes with different heights.

Hi all,

Need some assistance with this one please - may be something simple but I've been battling to get this right all day.

I have following this article to build a step-wise wizard: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

Everything is working well and as expected however on my first tabstrip (content loaded from a partialview) I have several inputs for various fields.

Some fields display correctly and some is smaller in height. They are defined all the same in the source file (with the exception of the field name). Both the below samples point to string fields.

I don't have any css defined elsewhere, just bootstrap and fluent style in use.

Eg:

Form declaretion:

...

@using (Html.BeginForm("AddCRMClient", "CRM", FormMethod.Post, new { role = "form" }))

...

Displays correctly:

...

<div class="col-7">
@Html.LabelFor(m => m.CustomerName, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.CustomerName)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>

...

Height is smaller:

...

<div class="col-6">
@Html.LabelFor(m => m.VATNumber, new { @class = "form-label" })
@(Html.Kendo().TextBoxFor(m => m.VATNumber)
.HtmlAttributes(new { placeholder = "", type = "text", @class = "k-textbox" })
)
</div>

...

This is the result:

As you can see there are many controls that does not display correctly.

When I look at these via dev tools, I can see the controles that display correctly does have 2 spans which encapsulates the input, the ones that does not display correctly only has one span.

Eg:

vs.

Layout file to show referenced css, js files.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - VAPS Admin System</title>

<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
@*Core Content Start*@

<link rel="stylesheet" href="~/css/kendofonts.css" />

<script src="~/js/site.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link href="@Url.Content("~/lib/kendo-ui/styles/fluent-main.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/lib/jquery/jquery.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/jszip.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.all.min.js")"></script>
<script src="@Url.Content("~/lib/kendo-ui/js/kendo.aspnetmvc.min.js")"></script>

<link rel="stylesheet" href="~/css/site.css" />

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-ZA.min.js"></script>
@*Core Content End*@

.............

What would cause this, and how do I fix it?

Using Telerik.UI.for.AspNet.Core Version 2023.3.1114 with VS 2022.

Thanks in advance.

Form

TabStrip

TextBox

asked on 25 Jul 2024

1 answer

1.0K+ views

Show/Hide Password in TextBoxFor

I have a page with a handful of .TextBoxFor(m => m.PropertyX) and they work perfect when binding existing data to the property and thus the rendered Text Box. However, one of the text boxes should be hidden (like a password box) and then revealed on a click (again, like password box). All the examples have it as this:

@(Html.Kendo().TextBox()
    .Name("PropertyX")
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

This does work, however the existing data is not bound to the text box (because the text box is not bound to the property). When I do this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

it does not work - the show/hide is not rendered.

I've even tried this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .Value(Model.PropertyX)
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

The show/hide icon ONLY shows up if there is no data in the text box (newly entered form and I'm typing in for the first time). If I'm editing a form and data already exists, the icon DOES NOT show up.

Is there a way to have the icon show up all the time regardless if I'm entering new data or editing existing data?

TextBox

answered on 27 Feb 2024

1 answer

388 views

How to show password text as '*' in grid?

How to show password text as '*' in grid Client Detail Templates and Editor Templates.

Grid

TextBox

answered on 10 Jul 2023

1 answer

165 views

How to Validate UserName Not Already Used in PopUpEditor Using AJAX

(Edited- pivoted back to using [Remote] validation, but need to figure out how to keep popup in place after ModelState validation failure if user clicks submit)

Hi all,

I am working on a PopUp Editor for a Grid widget that displays user account information. The PopUp Editor is a custom template, and has Telerik TextBox widgets for the user account's data, including UserName. We want to validate the UserName by making a clientside call to the server to see if the UserName is already in use.

I am using [Remote] validation in our view model that makes a call from the clientside to a method in our controller that checks if the UserName is already in use. As has been the case with other people, this call is made even if a user clicks through the UserName Textbox and doesn't change the value for UserName, but our use case is such that I can work around this issue.

The problem is that if a user changes the username to an existing username, the Remote validation fires, but does not prevent the user from clicking Update on the PopUp- the user can click Update. On the server side, the Update will fail due to ModelState.IsValid = false, and a failure message is returned, but the user is not notified of the failure- the PopUp just fades out. If the user clicks "Edit" again, the username has the updated value in the PopUp, even though the update failed.

I was expecting that if the user clicks Submit, then the failure message that's returned would be displayed, and the PopUp would not fade out. I suspect it may have to do with using an custom Editor Template, but I'm hoping somebody can point out whatever it is I might be missing.

I used the following as guides:

Has anybody been successful in using a custom template for PopUpEditor on a Grid, with a [Remote] validation, with the returned ModelState errors preventing the PopUpEditor from disappearing, instead displaying the returned error(s)?

Thanks in advance!

Taylor

Grid

TextBox

answered on 03 Apr 2023

1 answer

579 views

Kendo Validator Not Blocking Form Submission

Hi,

I have a Kendo Validator with some custom rules, including hitting an API to prevent name duplication.

            rules: {
                noDups: function (input: any) {
                    if (input[0].id == "Name") {

                        let url = $("#duplicate-link").data("url") + "?name=" + input.val();

                        $.get(url, function (response) {
                            return !response;
                        });
                    }

                    return true;
                },

Basically, if the name comes back as "already found" from the API, return false.

I have logged the output and the response is returning false when the name matches.

However, when validating the form, only the required validator is firing. I don't see the false return value affecting the validator's red box and validation message, and the form still submits.

        $("#submit").on("click", function () {
            let validator = $("#form1").data("kendoValidator");

            if (validator.validate()) {
                console.log('validated');
            }
        });

                @(Html.Kendo().TextBoxFor(m => m.Name).HtmlAttributes(new { @class = "form-control", placeholder = "Application Name", required = true, data_noDups_msg = "This field is required" }))

Any thoughts? Thanks!

TextBox

answered on 27 Feb 2023

1 answer

144 views

Setting styles from datasource

Hello,

I'm evaluating Telerik as a possible reporting solution. I'm totally new to Telerik and I currently use SQL Server SSRS for all reporting. There are some things that SSRS does easily but I don't see a parallel in Telerik, at least not yet.

Example: I have data that I retrieve from an SQL Server DB based on the client which contains style information for my reports. I can retrieve a path for the client's logo, their preferred color patterns for headers, footers, table styles, backgrounds, fonts, font styles (bold, italic, etc.) and then in SSRS I can define these settings as expressions taken from the datasource. Each client can have their own specific formatting so I want the report to be standardized in form but customized to the client with styles.

As a simple example, suppose I retrieve data that tell me the client wants Arial size 14 font for the title with gray background and Blue font color. These are stored as separate values that I retrieve from a stored procedure and the datasource is bound to the report. I created a mock report with the title, subtitle and rundate textboxes placed where they should be in the header section.

How can I assign the font styles and coloring to the text boxes?

Styling

TextBox

answered on 03 Jan 2023

1 answer

245 views

How to make grid edit functionality working with tab click

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

answered on 22 Dec 2022

1 answer

462 views

using hiddenfor and textboxfor for the same field is not supported anymore

I have an application where in the past I used HiddenFor and TextBoxFor for the same field where the TextBoxFor was disabled.

@Html.HiddenFor(m => m.String)
@Html.Kendo().TextBoxFor(m => m.String).HtmlAttribute(new { @class = "k-state-disabled", disabled = "disabled" })

We are currently trying to upgrade our telerik to the latest version and found this issue.

What is the recommended way of fixing this.

The reason we need this is because the field is on a form and sometimes its disabled and the value needs to be submitted.

TextBox

answered on 28 Sep 2022