This is a migrated thread and some comments may be shown as answers.

Inline edit of treeview having a dropdown in a column

3 Answers 236 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Arvind
Top achievements
Rank 1
Arvind asked on 13 Oct 2016, 01:06 PM

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.

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 17 Oct 2016, 10:49 AM
Hello Arvind,

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

Regards,
Eyup
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kiran
Top achievements
Rank 1
Veteran
Iron
answered on 23 Jan 2018, 10:50 PM
I am looking this option, can you share the sample code?
0
Konstantin Dikov
Telerik team
answered on 25 Jan 2018, 03:52 PM
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:
 
Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeList
Asked by
Arvind
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Kiran
Top achievements
Rank 1
Veteran
Iron
Konstantin Dikov
Telerik team
Share this question
or