我正在试用Kendo编辑器。 我的目标是能够在编辑器中编辑网格行单元格的内容,一旦完成,就可以使用编辑器更新单元格的内容。到目前为止没有成功。 我对这些东西不太满意。我是一个后端人,但是得到了这个任务。 任何想法??
这是我的网格
@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(product => product.Naam).Width(100);
columns.Bound(product => product.Waarde).Width(100);
columns.Bound(product => product.Opmerking).Width(250);
columns.Template(@<text></text>).ClientTemplate("<a class=\"delete iconBtn\" onclick=\"onClickDeleteResourceItem(#: ID #, '#: Naam #')\"></a>").Title("").Width(50);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.Navigatable()
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(product => product.ID);
model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
})
.Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
.Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }))
.Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
.Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
)
)
这是我的编辑
@(
Html.Kendo().Editor()
.Name("kEditor")
.Events(events => events
.Change("change")
)
.Tools(tools => tools
.SubScript()
.SuperScript()
)
.HtmlAttributes(new {style="width:740px;height:240px"})
)
@Html.WebCore().Popup.Remove("confirmResourceItemPopup", "Verwijderen resource item", "")
这是我的剧本
@section Scripts
{
@Scripts.Render(Links.Bundles.Scripts.BeheerTeksten.Teksten)
<script type="text/javascript">
function change(e) {
var editor = $("#kEditor").data("kendoEditor")
var entityGrid = $("#Grid").data("kendoGrid");
entityGrid.dataItem(entityGrid.select()) = editor.value();
}
$('#Grid').click(function () {
var entityGrid = $("#Grid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
var editor = $("#kEditor").data("kendoEditor")
editor.value(selectedItem);
});
</script>
}