如何在Kendo UI asp.net mvc网格编辑器中指定样式

Question

我正在处理一些Kendo UI教程，并且网格上的文本框外观有问题。我正在关注的演示是http://demos.kendoui.com/web/grid/editing-inline.html。

我已经想出如何格式化网格中的日期，并在编辑器中使用日期选择器作为日期。为此，我使用了编辑器模板。

我已经为name列添加了一个编辑器模板，所以我可以应用一个css类，它看起来更好，但它无法正常运行。当编辑器打开时，文本框中的值为空（参见图像）。当然必须有一种更简单的方法来应用css类。

我是否必须为网格中的所有文本框创建编辑器模板？如果是这样，我怎样才能在编辑时带来价值？

这是网格的代码：

@(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"))
)

）

以下是名称编辑器模板的代码：

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

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

Answer 1

问题是传递给编辑器模板的模型不是Product而只是字符串。这意味着编辑器模板的模型是字符串。 并且您应该将TextBox助手声明为模型本身。

编辑器模板应如下所示：

@model string

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

Answer 2

有趣的是，尝试将窗口小部件的名称设置为“名称”，而不是使用TextBoxFor帮助程序。

e.g。

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

Answer 3

尝试：

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

首先尝试使用HTML，调试问题然后恢复为Html.TextBox助手：

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