Kendo UI TreeList 弹出式下拉列表
Kendo UI TreeList Popup Dropdownlist
我已经按照下面的方法实施了 TreeList
。
@(Html.Kendo().TreeList<Example.UI.ViewModel.Item>()
.Name("ExampleItems")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
columns.Add().Field(p => p.Name);
columns.Add().Field(p => p.Label);
columns.Add().Field(p => p.Type);
columns.Add().Field(p => p.InputType);
columns.Add().Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(e => e.Mode("popup"))
.DataSource(dataSource => dataSource
.Create(create => create.Action("Create", "Test"))
.Read(read => read.Action("Read", "Test"))
.Update(update => update.Action("Update", "Test"))
.Destroy(delete => delete.Action("Destroy", "Test"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.Parent.Id);
m.Expanded(true);
m.Field(f => f.Name);
m.Field(f => f.Label);
m.Field(f => f.Type);
m.Field(f => f.InputType);
})
)
.Height(540)
)
当我添加新项目时,我会得到一个漂亮的弹出框。但是,在该弹出框中,我需要输入父项的 Id
。我找不到任何方法使 Textbox
变成 DropdownList
.
有人可以帮忙吗?显然我不希望这些项目出现在 TreeList
中,因为它是根据其父级自动排列的。
已解决:
变化:
.Editable(e => e.Mode("popup"))
收件人:
.Editable(e => e.Mode("popup").TemplateName("TreeListPopupEdit"))
然后创建一个EditorTemplate
@model Example.UI.ViewModel.Item
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Label)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Label)
@Html.ValidationMessageFor(model => model.Label)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Type)
@Html.ValidationMessageFor(model => model.Type)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.InputType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InputType)
@Html.ValidationMessageFor(model => model.InputType)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ParentId)
</div>
<div class="editor-field">
@(Html.Kendo().DropDownListFor(model => model.ParentId)
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("Select (Optional)")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetParents", "Test"))
)
)
@Html.ValidationMessageFor(model => model.ParentId)
</div>
我已经按照下面的方法实施了 TreeList
。
@(Html.Kendo().TreeList<Example.UI.ViewModel.Item>()
.Name("ExampleItems")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
columns.Add().Field(p => p.Name);
columns.Add().Field(p => p.Label);
columns.Add().Field(p => p.Type);
columns.Add().Field(p => p.InputType);
columns.Add().Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(e => e.Mode("popup"))
.DataSource(dataSource => dataSource
.Create(create => create.Action("Create", "Test"))
.Read(read => read.Action("Read", "Test"))
.Update(update => update.Action("Update", "Test"))
.Destroy(delete => delete.Action("Destroy", "Test"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.Parent.Id);
m.Expanded(true);
m.Field(f => f.Name);
m.Field(f => f.Label);
m.Field(f => f.Type);
m.Field(f => f.InputType);
})
)
.Height(540)
)
当我添加新项目时,我会得到一个漂亮的弹出框。但是,在该弹出框中,我需要输入父项的 Id
。我找不到任何方法使 Textbox
变成 DropdownList
.
有人可以帮忙吗?显然我不希望这些项目出现在 TreeList
中,因为它是根据其父级自动排列的。
已解决:
变化:
.Editable(e => e.Mode("popup"))
收件人:
.Editable(e => e.Mode("popup").TemplateName("TreeListPopupEdit"))
然后创建一个EditorTemplate
@model Example.UI.ViewModel.Item
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Label)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Label)
@Html.ValidationMessageFor(model => model.Label)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Type)
@Html.ValidationMessageFor(model => model.Type)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.InputType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InputType)
@Html.ValidationMessageFor(model => model.InputType)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ParentId)
</div>
<div class="editor-field">
@(Html.Kendo().DropDownListFor(model => model.ParentId)
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel("Select (Optional)")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetParents", "Test"))
)
)
@Html.ValidationMessageFor(model => model.ParentId)
</div>