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

Question

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"})

editor open

score 2 · Accepted Answer · answered Mar 08 '13 at 15:04

2

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"})

answered Mar 08 '13 at 15:04

Petur Subev

19,983
3
52
68

Yep, that was it! Thanks! I've modified it a bit to have the model be an object so I can use it for numbers as well. Thanks again. – Andrew Boes Mar 08 '13 at 19:13
Any chance you could look at this question? http://stackoverflow.com/questions/15318992/how-do-i-refresh-a-kendo-ui-combo-box – Andrew Boes Mar 10 '13 at 04:45

score 0 · Answer 2 · answered Mar 06 '13 at 21:14

0

Interesting, try to set the name of the widget to be "Name" instead of using the TextBoxFor helper.

e.g.

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

answered Mar 06 '13 at 21:14

Petur Subev

19,983
3
52
68

Igorrious · Answer 3 · 2013-03-07T18:56:15.730

0

Try:

@Html.TextBox("Name", Model.Name, new {@class = "k-input k-textbox"})

Or try with HTML first, to debug the issue then revert back to Html.TextBox helper:

<input type="text" id="Name" value="@Model.Name" class="k-input k-textbox"/>

edited Mar 07 '13 at 18:56

answered Mar 07 '13 at 18:44

Igorrious

1,608
16
15

Nope, didn't work. I got the same result. What do you mean by "Or try with HTML first..."? – Andrew Boes Mar 07 '13 at 21:17
Since the Helper outputs html markup based on the parameters, I was just trying to eliminate it first and write the HTML by hand. This way you can see where the issue is. So the next thing you can try is to debug the the template, place a break point in the code and see what the model contains. Maybe it's null. – Igorrious Mar 07 '13 at 21:26

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

3 Answers3