Question

我已经实现了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中，因为它会根据其父项自动排列。

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

Kendo UI TreeList弹出下拉列表

1 个答案: