Kendo DropDownTreeView inside GridView column is not working

2 posts, 0 answers
  1. rasika
    rasika avatar
    1 posts
    Member since:
    Dec 2014

    Posted 13 Apr 2015 Link to this post

    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;
            }
        }
    }

     

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 15 Apr 2015 Link to this post

    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:

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top