Kendo UI TreeList Popup Dropdownlist答案

【问题标题】：Kendo UI TreeList Popup DropdownlistKendo UI TreeList Popup Dropdownlist
【发布时间】：2015-06-02 01:43:09
【问题描述】：

我已经按照下面的方法实现了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 中，因为它是根据其父项自动排列的。

【问题讨论】：

标签： kendo-ui telerik kendo-asp.net-mvc treelist

【解决方案1】：

已解决：

变化：

.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>

【讨论】：