Complete sample of treeview in left pane and detail in right pane

2 posts, 0 answers
  1. Jay
    Jay avatar
    6 posts
    Member since:
    Feb 2019

    Posted 22 Feb Link to this post

    Does anybody know where a complete working MVC sample exists that demonstrates a treeview in one pane and detail in another pane when a tree node is clicked on?

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4939 posts

    Posted 26 Feb Link to this post

    Hello Jay,

    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.

    ---------

    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