Treeview in left pane and detail in right pane

5 posts, 1 answers
  1. Shawn
    Shawn avatar
    55 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. Shawn
    Shawn avatar
    55 posts
    Member since:
    Jul 2011

    Posted 16 Aug 2012 Link to this post

    Thanks Kerry you're a *.
  4. Jay
    Jay avatar
    6 posts
    Member since:
    Feb 2019

    Posted 22 Feb Link to this post

    I have no clue what any of that is. Is there a working a sample I can download and run that I can dissect?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4937 posts

    Posted 26 Feb Link to this post

    Hello Jay,

    The snippet Kerry used created the AJAX request for the new HTML content with jQuery and uses the request callback to set the new content in the DOM. The splitter's ajaxRequest method (read more about it below) does the same thing, but also takes care of creating an iframe if that's needed.

    ---------

    I am posting here the sample I made for you in your support ticket on this (it is attached at the end of this post) and I am also pasting all the explanations from the support thread here for anyone else having a similar query. What I can advise is that you review the sample and our demos to see how the widgets work, so you can use the rich API they offer in order to connect the individual widgets into the desired application logic. I'd also suggest keeping this either in the ticket, or in your other thread on this, to ensure a single source of truth and cohesion.

    ---------

    The easiest way is to call the ajaxRequest method of the splitter with the desired arguments (perhaps the URL can be taken from the treeview data item): https://docs.telerik.com/kendo-ui/api/javascript/ui/splitter/methods/ajaxrequest. If you provide an URL with a protocol, it will be placed in an iframe: https://docs.telerik.com/kendo-ui/controls/layout/splitter/overview#load-content-with-ajax.

    The tricky part is actually getting the URL to the client. Setting the Url property of the treeview item will make a click on it navigate the current frame, so it does not suit your needs. Thus, perhaps the easiest option I can suggest is that you add that metadata to a property you wouldn't normally use, like the SpriteCssClass, and then obtain it from there with a DOM traversal. While a bit hackish, this is the shortest approach I can offer. Alternatively, you may be able to generate the URL based on the item text, this is up to the application logic. Otherwise, you'd need to set up your custom models, a remote data source and binding.

    I am attaching below a small example I made for you that shows one way to do this, and all you need is the URL you want to load, and the .ajaxRequest() method of the splitter. Since I am using the hack to put the metadata, my DOM traversal extracts the URL from there and the controller puts it there. In a general case, I'd recommend you consider a proper remote data binding to accommodate the custom data, though. There is a basic example of this as well, in a treeview below the splitter. It uses anonymous objects for brevity, in a real app you'd likely want to have a model for them.

    ---------

    The MVC helpers also create jQuery widgets and thus to create rich applications you'd have to know some JavaScript, I'm afraid. At the moment, that's the predominant language for writing web applications, or rather, their front-end. Blazor may change that drastically, and we're keeping an eye on it (we even have a preview with a couple of controls for it).

    The trickiest part is carrying the metadata - the plain local binding through setting inline items is not designed for this, which is why I created that hack for you. Using a remote data source is the way to do this, and I also added an example of this. Put shortly, remote binding makes an AJAX request each time a new node is expanded (that is, a node that has not been expanded before), and that request carries the ID of the node as an argument so the server can return its children, all their data fields (like text, and whether they have children) and any metadata. Then the developer can use that metadata in their client-side code. The URL to which the AJAX request is made is defined in the data source settings. I hope this helps you get started with this.

    On filtering a grid - that's a little different than loading arbitrary content in the splitter because the grid widget may need to stay initialized, depending on your preferences (it seems you prefer it to stay initialized and not dispose/reload). So, if you just need to filter, you can filter the grid's data source: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter. Code for that could be something like that:


    $("#theGridId").data("kendoGrid").dataSource.filter(
      { field: "url", operator: "startswith", value: theUrlFromTheTree }
    );

    which assumes a grid with id (Name) "theGridId" in the second splitter pane.

    While this may not be the first time someone needs to do this, the specific thing in this scenario is getting the desired metadata, everything else is readily exposed through widget API methods.



    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top