Inline edit of treeview having a dropdown in a column

[Arvind]

Hi,

I am using a treeview to load data and on edit of a row, i would want to display a dropwon to choose data, i tried below to get the dropdown, but this does not give me a dropdown, please advise if this is possible or how to achieve this.

columns.Add().Field(e => e.InActive).Editor("StatusType").Width(100) ;

below is a partial view i added under the EditorTemplate folder

@model CodedValues
@(Html.Kendo().DropDownListFor(m => m)
        .AutoBind(true)
        .DataTextField("DisplayText")
        .DataValueField("KeyText")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("GetTypes", "my"))
                    .ServerFiltering(true);
        })
)
@Html.ValidationMessageFor(m => m)

 

Thanks in advance.

[Eyup]

Hello Arvind,

Please expect a response in your ticket with ID: 1068317.

Regards,
Eyup
Telerik by Progress

[Kiran]

I am looking this option, can you share the sample code?

[Konstantin Dikov]

Hello Kiran,

You could use the "Editor" property of the TreeList column to specify a function that will initialize the editor:

@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Add().Field(e => e.FirstName).Title("First Name").Width(220).Editor("productNameEditor");
        columns.Add().Field(e => e.LastName).Title("Last Name").Width(100);
        columns.Add().Field(e => e.Position);
        columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
        columns.Add().Field(e => e.Phone);
        columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        columns.Add().Title("Edit").Width(250).Command(c =>
        {
            c.Edit();
            c.Destroy();
        })
        .HtmlAttributes(new {
            style = "text-align: center;"
        });
    })
    .Editable(e=>e.Mode("inline"))
    .DataSource(dataSource => dataSource
        .Create(create => create.Action("Create", "EmployeeDirectory"))
        .Read(read => read.Action("All", "EmployeeDirectory"))
        .Update(update => update.Action("Update", "EmployeeDirectory"))
        .Destroy(delete => delete.Action("Destroy", "EmployeeDirectory"))
        .Model(m => {
            m.Id(f => f.EmployeeId);
            m.ParentId(f => f.ReportsTo);
            m.Expanded(true);
            m.Field(f => f.FirstName);
            m.Field(f => f.LastName);
            m.Field(f => f.ReportsTo);
            m.Field(f => f.HireDate);
            m.Field(f => f.BirthDate);
            m.Field(f => f.Extension);
            m.Field(f => f.Position);
        })
    )
    .Height(540)
)

<script>
    function productNameEditor(container, options) {
        // create an input element
        var input = $("<input/>");
        // set its name to the field to which the column is bound ('ProductName' in this case)
        input.attr("name", options.field);
        // append it to the container
        input.appendTo(container);
        // initialize a Kendo UI AutoComplete
        input.kendoAutoComplete({
            dataTextField: "ProductName",
            dataSource: [
                { ProductName: "Jane Doe" },
                { ProductName: "Maria Anders" }
            ]
        });
    }
</script>

In the link below you can find additional information on this matter:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.editor

 
Regards,
Konstantin Dikov
Progress Telerik