Unplanned
Last Updated: 14 Jun 2022 05:08 by Lauren

Bug report

The TextBox TagHelper does not render the maxlength and placeholder attributes when set via data annotations.

Reproduction of the problem

For a model property defined the following way

[Display(Name = "Example", Prompt = "Example Prompt")]
[StringLength(maximumLength : 5, MinimumLength = 1, ErrorMessage = "Must be between 1 and 5")]
public string Example { get ; set ; }

the TextBox TagHelper generetes

<input
  class="form-control k-input-inner"
  data-val="true"
  data-val-length="Must be between 1 and 5"
  data-val-length-max="5"
  data-val-length-min="1"
  id="Example"
  name="Example"
  value=""
  data-role="textbox"
  style="width: 100%;"
  aria-disabled="false"
  autocomplete="off"
  aria-invalid="true"
  aria-describedby="Example_validationMessage">

when the default ASP.NET Core TagHelper generates markup containing the maxlength and placeholder attributes:

<input
  class="form-control k-invalid"
  type="text"
  data-val="true"
  data-val-length="Must be between 1 and 5"
  data-val-length-max="5"
  data-val-length-min="1"
  id="Example"
  maxlength="5"
  name="Example"
  placeholder="Example Prompt"
  value=""
  aria-invalid="true"
  aria-describedby="Example_validationMessage">

Expected/desired behavior

The maxlength and placeholder attributes are set to the generated input element.

Environment

  • Kendo UI version: 2022.2.510
  • Browser: [all]
Completed
Last Updated: 08 Jun 2022 08:11 by ADMIN
Release 2022.R2.SP.next

Bug report

When using the TaxtBoxFor HTML helper and the MaxLength is set via DataAnnotation the maxlength attribute is not rendered.

Reproduction of the problem

Model:

public class MyModel
{
    [MaxLength(5)]
    public string Text { get; set; }
}

View:

@Html.Kendo().TextBoxFor(m => m.Text)

Current behavior

The Telerik UI for ASP.NET Core HTML Helper renders the following markup, without the maxlength attribute:

<span class="k-widget k-textbox" style="">
    <input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" name="Text" value="" data-role="textbox" aria-disabled="false" class="k-input" autocomplete="off" style="width: 100%;">
</span>

The default Html.TextBoxFor helper renders the following markup, containing the maxlength attribute:

<input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" maxlength="5" name="Text" type="text" value="">

Expected/desired behavior

The Telerik UI for ASP.NET Core HTML Helper should render the maxlength attribute.

Environment

  • Kendo UI version: 2021.3.914
  • Browser: [all]
Unplanned
Last Updated: 14 Jun 2021 14:38 by ADMIN
Created by: Murat
Comments: 2
Category: TextBox
Type: Feature Request
2

Feature Request

Create TexBox label from ViewModel Data Annotation

Currently, this is possible using the default @Html.Label, and @Html.Textbox

-Model:

     [DisplayName("First Name :")]

public string FirstName { get; set; }

-View

        <tr>
         <td>
                @ Html.LabelFor(m=>m.FirstName)
            </td>
            <td>
                @Html.TextBoxFor(m=>m.FirstName)                
            </td>
        </tr>

Unplanned
Last Updated: 11 Jun 2021 05:56 by ADMIN
Created by: Eyup
Comments: 0
Category: TextBox
Type: Feature Request
2

Data Model

[Required]
[StringLength(128)]
[DisplayName("Password")]
[DataType(DataType.Password)]
public string UserPassword { get; set; }
Razor HTML
<div class="form-group">
  <kendo-textbox name="UserPassword" type="password"> <!-HOW to use DataType Annotation here? -- >
      <textbox-label content="@Html.DisplayNameFor(m=>m.UserPassword)" floating="true" />
   </kendo-textbox>
</div>
This scenario is working for a regular <input asp-for="FieldName"/> so it also should work for Telerik TextBox widget as well.

 

The solution below can be used as a workaround for the time being:

@{ Dictionary<string, string> fieldTypes = new Dictionary<string, string>();
    var properties = typeof(TestModel).GetProperties();
    foreach (var property in properties)
    {
        var dataTypeAttributes = property.GetCustomAttributes(
            typeof(System.ComponentModel.DataAnnotations.DataTypeAttribute), false);
        if (dataTypeAttributes.Length > 0)
        {
            var attribute = dataTypeAttributes[0] as
        System.ComponentModel.DataAnnotations.DataTypeAttribute;
            var dataType = (System.ComponentModel.DataAnnotations.DataType)attribute.DataType;
            fieldTypes[property.Name] = dataType.ToString().ToLowerInvariant();
        }
        else
        {
            fieldTypes[property.Name] = null;
        }
    } }
<form id="mainForm" kendo-validator="true">
    <kendo-textbox for="UserPassword" type="@fieldTypes["UserPassword"]">
        <textbox-label content="@Html.DisplayNameFor(m=>m.UserPassword)" floating="true" />
    </kendo-textbox>
</form>
<script>
    $(document).ready(function () {
        var validator = $("#mainForm").data("kendoValidator");
    });
</script