Treeview in left pane and detail in right pane

3 posts, 1 answers
  1. Shawn
    Shawn avatar
    49 posts
    Member since:
    Jul 2011

    Posted 30 Jun 2012 Link to this post

    I'd like to use a splitter control that has two vertical panes.  In the left pane I'd like to have a treeview control.  When the user selects a node in the treeview, I'd like to populate the right-hand splitter pane with a partial view that displays more detail for the selected treeview node.  Please could you provide guidance as to how I can achieve this?
  2. Answer
    Kerry
    Kerry avatar
    4 posts
    Member since:
    Jun 2012

    Posted 16 Aug 2012 Link to this post

    I have actually done this.  Not sure if this will all be easy to understand but hopefully gets you going.

    From view:
    @(Html.Kendo().Splitter()
        .Name("top")
        .Orientation(SplitterOrientation.Horizontal)
        .Panes(panes =>
        {
            panes.Add()
                .HtmlAttributes(new { id = "left-pane" })
                .Scrollable(true)
                .Collapsible(true)
                .Content(@<div>
                    @(Html.Kendo().TreeView()
                                .Name("treeview")
                                .DragAndDrop(true)
                                .DataTextField("Name")
                                .Events(events => events
                                    .DragEnd("Change")
                                    .Select("Selected")
                                    )
                                .DataSource(dataSource => dataSource
                                    .Read(read => read.Action("TreeView_Read", "Platform")))
                            )
                </div>
                );
            panes.Add()
                .HtmlAttributes(new { id = "right-pane" })
                .Scrollable(true)
                .Collapsible(true)
                .Content(@<div id="detail-pane">Select a node to see detail</div>);
        })
        )
    <script>
        var treeview;

        function Change(e) {
            alert("Changed " + treeview.text(e.node));
        }
        function Selected(e) {   
            var value = $("#EventIdn").val();
            var treeItem = treeview.dataItem(e.node);

            $.post('@Url.Action("_Detail", "Platform")', {
                id: treeItem.id
            }, function (data) {
                $('#detail-pane').empty()
                $('#detail-pane').append(data)
            });
        }

        $(document).ready(function () {
            treeview = $("#treeview").data("kendoTreeView");
        });
    </script>


    From controller (adjusted to make shorter):
            public ActionResult _Detail(string id)
            {
                        PLM.Web.ViewModels.PlatformViewModel vm = new ViewModels.PlatformViewModel();
                        PLM.Domain.Platform platform = _itemService.GetPlatform(HttpContext.User, intEventIdn);
                        AutoMapper.Mapper.CreateMap<PLM.Domain.Platform, PLM.Web.ViewModels.PlatformViewModel>();
                        AutoMapper.Mapper.Map(platform, vm);
                        return PartialView("_PlatformDetail", vm);               
            }
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Shawn
    Shawn avatar
    49 posts
    Member since:
    Jul 2011

    Posted 16 Aug 2012 Link to this post

    Thanks Kerry you're a *.
Back to Top