Grid inline editing textbox styles

[Richard]

Good afternoon,

I've noticed an inconsistency with the styles of textboxes when editing inline in a grid for textboxes and numeric textboxes.

In the demo they appear correctly, having had the surrounding span added, and have the theme's colouring and styling:

https://demos.telerik.com/aspnet-core/grid/editing-inline?autoRun=true&theme=classic-opal

However, if you edit in Telerik REPL (and the same happens for me in my dev environment) the numeric textboxes display differently, and don't pick up the theme's styling:

I've also notice that the EditorTemplates for Boolean, Date and DateTime are not working correctly as the closing bracket appears too early and renders the text:

HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})

I have fixed this by editing the templates.

Kind regards,

Richard

 

[Stoyan]

Hello Richard,

Based on the information you have shared I am left under the impression that you were able to resolve the issue that arises on your side.

If so, please consider sharing some additional information about the approach you've employed. I am interested how you solved the issue and it will be useful for the community at large as well.

Alternatively, if the issue persists could you please share some additional information about the configuration on your side to enable me to research further?

 

In regard to the REPL issue it arises because the REPL currently doesn't support weakly-typed data such as ViewData and ViewBag. 

Therefore the EditorTemplate isn't used in the REPL example, instead default inputs are present during the editing of the row.

We are currently in the process of exploring how to enable separate Controllers and Views in the REPL which will enable the use of the EditorTemplates as they are defined in the Grid Inline Editing Demo.

I hope the information above is insightful.

Regards,
Stoyan
Progress Telerik

[Richard]

Hi Stoyan,

With regards the EditorTemplates, I fixed Date from:

@(Html.Kendo().DatePickerFor(m => m)).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})

to:

@(Html.Kendo().DatePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

And the same for Boolean, DateTime and Time.  The bracket shown in red needed to be moved.

Kind regards,

Richard

 

 

[Richard]

Hi Stoyan,

With regards the inline editor style for numeric textboxes, can you think of a reason why these two fields (User Count and Retain For) aren't displaying similar to the description textbox? 

The numeric input renders like this:

<input class="text-box single-line k-valid" data-val="true" data-val-required="The UserCount field is required." id="UserCount" name="UserCount" type="number" value="" data-bind="value:UserCount">

The demo wraps the numeric textbox in a span, which isn't happening for me:

<span class="k-numerictextbox k-input k-input-solid k-input-md k-rounded-md" style="width: 100%;">

I am using version 2022.1.301.

Kind regards,

Richard

[Stoyan]

Hi Richard,

Thank you for sharing the solution you've employed for the EditorTemplates. I will use that as a reference to research whether the issue originates at the Visual Studio Extension examples and consequently edit them if my suspicion gets confirmed.

In regard to the editors of the UserCount and RetainFor columns of the Grid the applied editors depend on the types of the field. For example fields of type decimal do not get recognized as a Number field and the Number.cshtml EditorTemplate isn't used automatically.

With that said you can specify the EditorTemplate you'd like to use explicitly:

 columns.Bound(p => p.UserCount).EditorTemplateName("Number");
 columns.Bound(p => p.RetainFor).EditorTemplateName("Email");

I hope this suggestion is useful.

[Richard]

Hi Stoyan,

Following on from your suggestion, I have achieved what I wanted by creating a new EditorTemplate called RetentionDays based on the Number template:

@model int?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .Format("{0:n0}")
      .Min(1)
      .Max(365)
      .Step(1)
      .Decimals(0)
      .HtmlAttributes(new { style = "width:100%" })
      .HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})
)

Used as follows:

columns.Bound(r => r.RetentionDays).Title("Retain For (Days)").Width(150).EditorTemplateName("RetentionDays");

Many thanks for all of your help.

Kind regards,

Richard