いくつかのKendoUIチュートリアルを実行していますが、グリッド上のテキストボックスの外観に問題があります。私がフォローしているデモはhttp://demos.kendoui.com /web/grid/editing-inline.htmlです。
グリッドで日付をフォーマットし、エディターで日付に日付ピッカーを使用する方法を理解しました。これを行うために、エディターテンプレートを使用しました。
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"})