Kendo UI TreeList Popup Dropdownlist

Question

I have implemented a TreeList as per bellow.

 @(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)
)

When I add new items, I get a nice popup box. However in that popup box I need to enter the Id of the parent item. I can not find any way to make that Textbox a DropdownList.

Can anyone help with this? Obviously I don't want those items to appear in the TreeList as it is automatically arranged based on its parent.

Answer 1

Solved:

Change:

.Editable(e => e.Mode("popup"))

To:

.Editable(e => e.Mode("popup").TemplateName("TreeListPopupEdit"))

Then create an 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>