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

Question

我正在学习一些剑道 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

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

编辑器模板应如下所示：

@model string

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

Answer 2

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

例如

@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"/>