Hi,
I have recently started using SyncFusion controls in my C# MVC application.
I have a treeview which i need to lazyload, the examples that syncfusion provide for 'lazyloading' are not true lazyloads, and honestly i dont even know why that option is even there.
So by default i only have my parentNodes loaded, and what i need is when any node is clicked on i need a client event that first checks if any child nodes exist in the expanding node, if no child nodes exist then a ajax call is made to a controller to fetch all children of the clicked node.
I see that in the EJ1 package there is an option for .ClientEvents(a=>a.beforeExpand()) where you can make an your ajax call, but what is the equivalent when using the EJ2 version?
what is the benefit of using the EJ2 package over the EJ1 package?, EJ1 seems to be more feature rich...
this is what i currently have.
public ActionResult Treeview()
{
var sites = site.GetSites();
ViewBag.dataSource = sites;
return View();
}
[HttpPost]
public JsonResult GetChildNodeData(Nullable parentId)
{
if (parentId != null)
{
var sites = site.GetSites(parentId);
return Json(sites, JsonRequestBehavior.AllowGet);
}
else
{
var sites = site.GetSites();
return Json(sites, JsonRequestBehavior.AllowGet);
}
}
@(Html.EJS().TreeView("tree")
.ShowCheckBox(true)
.NodeExpanding("onBeforeExpand")
.AllowDragAndDrop(true)
.Fields(field =>
field.Id("Id")
.ParentID("ParentId")
.Selected("Selected")
.Expanded("Expanded")
.Text("Name")
.HasChildren("HasChild")
.DataSource(ViewBag.dataSource)).Render())
function onBeforeExpand(args) {
var currentTarget = args.node;
var parentId = args.nodeData.id;
//Child elements will be fetched only if the parent has the "e-icon e-plus" class
if ($(currentTarget).find(' > ul li').length == 0) {
$.ajax({
url: '/Home/GetChildNodeData?parentId=' + parentId,
type: 'POST',
datatype: 'json',
success: function(child) {
//Object for TreeView is created
//var treeviewObj = $("#tree").data("ejTreeView");
var treeviewObj = $("#tree");
treeviewObj.addNode(child, currentTarget);
currentTarget.find('.e-load').removeClass('e-load');
}
});
}
}