We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

C# MVC EJ2 Treeview, Clientside event for beforeExpand?

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');
                }

            });

        }

    }


2 Replies

PA Patrick January 31, 2020 02:35 PM UTC

So i managed to get it working, but it is a bit 'hacky', surely there has to be a better way to get this done?

@(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) {

        if (args.event !== null) {

            var target = args.node;
            var parentId = args.nodeData.id;

            // prevent the reloading of child nodes if child nodes already exist
            if ($(target).find(' > ul li').length === 0) {
                $.ajax({
                    url: '/Home/GetChildNodeData?parentId=' + parentId,
                    type: 'POST',
                    datatype: 'json',
                    success: function (child) {
                        treeviewObj = document.getElementById("tree").ej2_instances[0];
                        treeviewObj.addNodes(child, target);
                    }

                });
            };
        }
    }



SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 3, 2020 12:49 PM UTC

Hi Patrick, 
 
Thanks for contacting Syncfusion support. 
 
In EJ2 TreeView control, we have provided loadOnDemand property. It loads first level nodes initially, and when parent node is expanded, it loads the child nodes based on the ParentID/Child member.  By default, the load on demand (Lazy load) is set to true. By disabling this property, all the tree nodes will be rendered on the initial loading. 
 
Refer the below sample, in this sample child nodes was not rendered on DOM until parent node expands. 
 
 
Please let us know if you need any assistance. 
Regards, 
Shameer Ali Baig S. 


Loader.
Live Chat Icon For mobile
Up arrow icon