How to specify style in Kendo UI asp.net mvc grid editor

[Andrew]

I'm working through some Kendo UI tutorials and have a problem with the look of my text boxes on the grid. The demo I'm following is http://demos.kendoui.com/web/grid/editing-inline.html.

I've figured out how to format the date in the grid and use a datepicker for the date in the editor. To do this I've used an Editor template.

I've added an editor template for the name column just so I could apply a css class and it looks better but it doesn't function correctly. When the editor opens up the value in the text box is empty (see image). Surely there must be an easier way to apply a css class.

Do I have to create an editor template for all text boxes in the grid? If so, how can I have it bring the value when editing?

Here's the code for the grid:

@(Html.Kendo().Grid<Product>()    
.Name("Grid")    
.Columns(columns => {        
    columns.Bound(p => p.Name);
    columns.Bound(p => p.UnitPrice).Width(140);
    columns.Bound(p => p.Units).Width(140);
    columns.Bound(p => p.Discontinued).Width(100);
            columns.Bound(p => p.Date).Width(100).Format("{0:d/M/yyyy}");
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource        
    .Ajax()                 
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))
    .Create(update => update.Action("EditingInline_Create", "Home"))
    .Read(read => read.Action("EditingInline_Read", "Home"))
    .Update(update => update.Action("EditingInline_Update", "Grid"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)

Here's the code for the name editor template:

@using Kendo.Mvc.UI
@model KendoUiOne.Models.Product

@Html.TextBoxFor(x=>x.Name, new {@class = "k-input k-textbox"})

I also posted on stackoverflow.

http://stackoverflow.com/questions/15257247/how-to-specify-style-in-kendo-ui-asp-net-mvc-grid-editor

[Petur Subev]

Hi again Andrew,

The issue is that model passed to the editor template is not the Product but just the string. This means that the model of the editor template is string. And you should declare the TextBox helper to be for the model itself.

the Editor template should look like this

@model string @Html.TextBoxFor(x=>x, new {@class = "k-input k-textbox"})

To eliminate any further issues I created a sample project - check the Name column and its editor.

Kind Regards,
Petur Subev
the Telerik team