Custom HTML as editor in grid

1 Answer 224 Views
Grid
Mirza
Top achievements
Rank 1
Iron
Mirza asked on 27 Jul 2021, 01:17 AM | edited on 27 Jul 2021, 01:22 AM

I am trying to modify an existing grid control and replace the editor for one of the columns with custom HTML. Currently, the column displays time and we use a combobox as the editor. To make this somewhat usable, we populate the combobox with times in 15-minute increments rather than 1-minute. I want to replace the combobox with a time-picker but unfortunately we are tied to an old version of the Telerik library that doesn't support the modern component type. Instead, I would like to use the HTML5 picker. How do I accomplish that using the editor template property?

Btw, I am very much a novice with regards to this UI framework so my question might have been answered in the documentation somewhere but I haven't been able to find it so my apologies if that's the case.

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 29 Jul 2021, 04:03 PM

Hello Mirza,

You can use an Html5 time picker (<input type="time" >) as an editor for a Grid column, however, the field the column is bound to must be of type string. This is because the standard Html time input works with string values, e.g., "12:33".

So the column would look like this:

columns.Bound(p => p.ShipTime).EditorTemplateName("HtmlTimeEditor");

And the custom HtmlTimeEditor.cshtml editor in Views/Shared/EditorTemplates:

@model string

<input type="time" data-bind="value: ShipName">

With regard to 15 minute increments, as far as I know the Html5 time input does not have such functionality available.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Mirza
Top achievements
Rank 1
Iron
Answers by
Ivan Danchev
Telerik team
Share this question
or