我在我的视图中包含了TreeList-Component,如下所示:
@(Html.Kendo().TreeList<TaxonomyTreeNodeViewModel>()
.Name("treelist")
.Toolbar(
toolbar =>
{
/*toolbar init*/
}
)
.Columns(columns =>
{
columns.Add().Field(e => e.GermanTranslation);
columns.Add().Field(e => e.Sequence);
columns.Add().Command(c =>
{
if (!Model.IsPublished)
c.Edit();
if (!Model.IsPublished)
c.Destroy();
if (!Model.IsPublished)
c.CreateChild();
});
})
.Editable(editable => editable.Move(true))
.Reorderable(true)
.Filterable()
.Sortable()
.Editable()
.DataSource(dataSource => dataSource
.Read(read => read.Action("All", "DashboardTaxonomy"))
.Update(update => update.Action("Update", "DashboardTaxonomy"))
.Create(create => create.Action("Create", "DashboardTaxonomy"))
.Destroy(destroy => destroy.Action("Destroy", "DashboardTaxonomy"))
.ServerOperation(false)
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Field(f => f.EnglishTranslation);
m.Field(f => f.Sequence);
})
)
.Events(
events =>
{
events.DataBound("TaxonomyTreeWidget.dataBound");
}
)
)
}
我的模特:
public class TaxonomyTreeNodeViewModel
{
public string Id { get; set; }
public string ParentId { get; set; }
[Display(Name = "Reihenfolge")]
public int Sequence { get; set; }
[Display(Name = "Deutsche Bezeichnung")]
public string GermanTranslation { get; set; }
[Display(Name = "Englische Bezeichnung")]
public string EnglishTranslation { get; set; }
[Display(Name = "Versionsnummer")]
public int Version { get; set; }
[Display(Name = "Veröffentlicht")]
public bool Published { get; set; }
/*[...]*/
}
TreeList渲染预期结果。当我点击编辑按钮时,我可以编辑并保存数据行。
但是当我取消编辑确认对话框时出现(测试:&#34;你确定要删除这条记录吗?&#34;)和带有data-command =&#34; cancelit&#34的按钮;从DOM中删除,并出现data-command =&#34; destroy&#34; -Button。
请帮忙,
谢谢!
答案 0 :(得分:0)
我通过一个小小的解决方案解决了这个问题。以下TypeScript会覆盖kendoTreelist
的取消方法:
$(() => {
$('body').on('click', '#treelist', () => {
$('#treelist').data('kendoTreeList').bind('cancel', e => {
e.preventDefault();
$('#treelist').data('kendoTreeList').dataSource.read();
});
});
});
因此,如果用户触发取消按钮,则将树状图设置为初始状态。