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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

C# MVC EJ2 Treeview, Clientside event for beforeExpand?

Thread ID:

Created:

Updated:

Platform:

Replies:

151126 Jan 31,2020 12:29 PM UTC Feb 3,2020 12:52 PM UTC ASP.NET MVC - EJ 2 2
loading
Tags: Treeview
Patrick
Asked On January 31, 2020 12:31 PM UTC

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

            });

        }

    }


Patrick
Replied On 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);
                    }

                });
            };
        }
    }


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon