Inline edit of treeview having a dropdown in a column

4 posts, 0 answers
  1. Arvind
    Arvind avatar
    7 posts
    Member since:
    Aug 2016

    Posted 13 Oct 2016 Link to this post


    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)
            .DataSource(dataSource =>
                dataSource.Read(read => read.Action("GetTypes", "my"))
    @Html.ValidationMessageFor(m => m)


    Thanks in advance.

  2. Eyup
    Eyup avatar
    3841 posts

    Posted 17 Oct 2016 Link to this post

    Hello Arvind,

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

    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
  3. Kiran
    Kiran avatar
    21 posts
    Member since:
    Jul 2014

    Posted 23 Jan 2018 in reply to Eyup Link to this post

    I am looking this option, can you share the sample code?
  4. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 25 Jan 2018 Link to this post

    Hello Kiran,

    You could use the "Editor" property of the TreeList column to specify a function that will initialize the editor:
        .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 =>
            .HtmlAttributes(new {
                style = "text-align: center;"
        .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.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);
        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
            // initialize a Kendo UI AutoComplete
                dataTextField: "ProductName",
                dataSource: [
                    { ProductName: "Jane Doe" },
                    { ProductName: "Maria Anders" }

    In the link below you can find additional information on this matter:
    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.
Back to Top