4 Answers, 1 is accepted
Rank 1
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);
}
Rank 2
Rank 1
Iron
Iron
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