Inline editing not styling/templating fields

[Ryan]

In my grid, when I click an inline edit it is showing the default browser edit inputs instead of styling it per kendo UI. I've attached a screenshot showing this issue. I'm expecting the first two fields to be text inputs which take the full width and the third input to be a date/time picker (its underlying data type is a Nullable<DateTime>). Validation appears to work properly despite this.

The code to generate the grid is as follows:

@(Html.Kendo().Grid<UserModel>()
        .Name("UserList")
        .HtmlAttributes(new { style = "height: 550px" })
        .DataSource(o => o.Ajax()
            .Model(m => m.Id<string>(u => u.Id))
            .Read(r => r.Action("_UserList_Read", "Admin"))
            .Update(u => u.Action("_UserList_Update", "Admin"))
            .Destroy(d => d.Action("_UserList_Delete", "Admin"))
            )
        .Columns(c =>
        {
            c.Bound(o => o.DisplayName);
            c.Bound(o => o.Email);
            c.Bound(o => o.LockoutEndDateUtc);
            c.Command(o => { o.Edit(); o.Destroy(); }).Width(230);
        })
        .Pageable(p => p.PageSizes(new int[] { 10, 20, 50, 100 }))
        .Sortable()
        .Filterable()
        .Scrollable()
        .Editable(o => o.Mode(GridEditMode.InLine))
)

 

Using latest version of Kendo UI (2018.2.620 with bootstrap 4 theme). jQuery 3.3.1 and bootstrap 4.1.3.

Any advice on how to get these to apply styles (and the correct editors)?

[Georgi]

Hello Ryan,

If no editor views are added to ~/Shared/EditorTemplates the grid uses the default editors provided by the MVC framework.

For your convenience I am attaching a small sample which demonstrates how to add Kendo editor templates for strings and dates.


Regards,
Georgi
Progress Telerik