Kendo DropDownTreeView inside GridView column is not working

[rasika]

We are using dropdown inside a kendo grid. Inside the
dropdown we need to display a tree view. When user clicks dropdown, tree view should
be displayed. We have only two levels in the tree view. On selecting any item
or sub item from the treeview, text of the item should be shown as dropdown text and tree view
should get close. Inside a tree view we need page down/up.

If we put dropdown in the separate partial view outside the grid, then it is working.
But if we try to use dropdown inside the grid using editor template then tree view
is not working.

Following is the code snippet:

Index.cshtml
@(Html.Kendo().Grid<SampleModel>()
.Name("grdOutput").Scrollable(s => s.Height("auto"))
    .EnableCustomBinding(false)
    .Columns(columns =>
    {
        columns.Bound(o => o.Id).Title("Id");
        columns.Bound(s => s.Order).EditorTemplateName("_DropDownEditor").ClientTemplate("#=Order#").Title("Order");
        columns.Command(command => { command.Destroy(); }).Width("80px");
    })
     .ToolBar(toolbar => toolbar.Create())
     .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pageable => pageable
                                .Refresh(true)
                                    .PageSizes(new[] { 10, 15, 20 }))
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
                    .Model(model =>
                    {
                        model.Id(p => p.Id);
                        model.Field(p => p.Order).DefaultValue(
                           ViewData["defaultOrder"] as string);
                    })
                            .Read(read => read.Action("OutputRead", "Home"))
    )
        .Events(e =>
                {
                })
)

_DropDownEditor.cshtml

@using Kendo.Mvc.UI
@model string
@(Html.Kendo().DropDownList()
      .Name("Order")
          .BindTo(new[] {
                          new {
                              Text = "",
                              Value = ""
                          }})
      .DataTextField("Text")
      .DataValueField("Value")
      .Template(Html.Partial("EditorTemplates/_TreeViewEditor").ToHtmlString())
      .Events(e =>{ e.Open("OnOpen"); })
      )

TreeViewEditor.cshtml
<ul id="treeview">
    <li data-expanded="true">
        Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li data-expanded="true">
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li data-expanded="true">
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li data-expanded="true">
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li data-expanded="true">
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li data-expanded="true">
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

Common.js
function OnOpen(e) {
    setDropdownTreeView();
}
function setDropdownTreeView() {
    var treeview = $("#treeview").kendoTreeView({
        select: function (e) {
            // When a node is selected, display the text for the node in the dropdown and hide the treeview.
            $treeviewRootElem.slideToggle('fast', function () {
                $treeviewRootElem.removeClass("k-custom-visible");
            });
        }
    }).data("kendoTreeView");
    var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

    $(document).click(function (e) {
        // Ignore clicks on the treetriew.
        if ($(e.target).closest("div.k-treeview").length == 0) {
            // If visible, then close the treeview.
            if ($treeviewRootElem.hasClass("k-custom-visible")) {
                $treeviewRootElem.slideToggle('fast', function () {
                    $treeviewRootElem.removeClass("k-custom-visible");
                });
            }
        }
    });
}

SampleModel.cs
    public class SampleModel
    {
        public int Id { get; set; }
        public string Order { get; set; }

        public SampleModel()
        {

        }
        public SampleModel(int id,string o)
        {
            Id = id;
            Order = o;
        }
    }
}

[Vladimir Iliev]

Hello Rasika,

Please note that using the TreeView widget inside the DropDownList widget is not supported out of the box and the developer is entirely responsible for implementing and supporting such solutions. Currently I could only suggest to check the following custom widget in Kendo UI Labs:

• Kendo UI Labs: DropDownTreeView widget

Also I would suggest to vote for this feature at Kendo UI UserVoice as most voted ideas are included in next Kendo UI releases.

Regards,
Vladimir Iliev
Telerik