it showing "undefined" in tree view using ASP.NET MVC with javascript

Question

While fetching data from the oracle database it showing "undefined" in Tree View structure using ASP.NET MVC and Gijgo tree view JQuery plug-in, The Tree View control can display a hierarchical (or nested, or recursive) collection of data in a tree of expandable nodes.. How to solve this?.Please, anyone helps me.

I am trying this link

https://www.codeproject.com/Articles/1185174/How-to-create-Dynamic-draggable-and-droppable-Tree

@section Scripts {
    @Scripts.Render("~/bundles/Scripts/jqueryval") <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="@Url.Content("~/Scripts/conditional-validation.js")" type="text/javascript"></script>
    <script src="~/Scripts/Gijgo/gijgo.js"></script>
    <link href="http://code.gijgo.com/1.3.0/css/gijgo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //'Hierarchy/GetHierarchy'
        $(document).ready(function () {
            var Usertree = "";
            var tree = "";
            $.ajax({
                type: 'get',
                dataType: 'json',
                cache: false,
                url: '/Hierarchy/GetHierarchy',
                success: function (records, textStatus, jqXHR) {
                    tree = $('#tree').tree({
                        primaryKey: 'Id',
                        dataSource: records,
                        dragAndDrop: true,
                        checkboxes: true,
                        iconsLibrary: 'glyphicons',
                        //uiLibrary: 'bootstrap'
                    });
                    Usertree = $('#Usertree').tree({
                        primaryKey: 'ID',
                        dataSource: records,
                        dragAndDrop: false,
                        checkboxes: true,
                        iconsLibrary: 'glyphicons',
                        //uiLibrary: 'bootstrap'
                    });

                    tree.on('nodeDrop', function (e, ID, PID) {
                        currentNode = ID ? tree.getDataById(Id) : {};
                        console.log("current Node = " + currentNode);
                        parentNode = PID ? tree.getDataById(PID) : {};
                        console.log("parent Node = " + parentNode);

                        if (currentNode.PID === null && parentNode.PID === null) {
                            alert("Parent node is not droppable..!!");
                            return false;
                        }
                        // console.log(parent.HierarchyLevel);
                        var params = { id: ID, parentId: PID };
                        $.ajax({
                            type: "POST",
                            url: "/Hierarchy/ChangeNodePosition",
                            data: params,
                            dataType: "json",
                            success: function (data) {
                                $.ajax({
                                    type: "Get",
                                    url: "/Hierarchy/GetHierarchy",
                                    dataType: "json",
                                    success: function (records) {
                                        Usertree.destroy();
                                        Usertree = $('#Usertree').tree({
                                            primaryKey: 'ID',
                                            dataSource: records,
                                            dragAndDrop: false,
                                            checkboxes: true,
                                            iconsLibrary: 'glyphicons',
                                            //uiLibrary: 'bootstrap'
                                        });
                                    }
                                });

                            }
                        });

                    });

                    $('#btnGetValue').click(function (e) {
                        var result = Usertree.getCheckedNodes();
                        if (result == "") { alert("Please Select Node..!!") }
                        else {
                            alert("Selected Node id is= " + result.join());
                        }
                    });
                       //delete node
                    $('#btnDeleteNode').click(function (e) {
                        e.preventDefault();
                        var result = tree.getCheckedNodes();
                        if (result != "") {
                            $.ajax({
                                type: "POST",
                                url: "/Hierarchy/DeleteNode",
                                data: { values: result.toString() },
                                dataType: "json",
                                success: function (data) {
                                    alert("Deleted successfully ");
                                    window.location.reload();
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert('Error - ' + errorThrown);
                                },
                            });
                        }
                        else {
                            alert("Please select Node to delete..!!");
                        }


                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error - ' + errorThrown);
                }
            });

            // show model popup to add new node in Tree
            $('#btnpopoverAddNode').click(function (e) {
                e.preventDefault();
                $("#modalAddNode").modal("show");
            });

            //Save data from PopUp
            $(document).on("click", "#savenode", function (event) {
                event.preventDefault();
                $.validator.unobtrusive.parse($('#formaddNode'));
                $('#formaddNode').validate();
                if ($('#formaddNode').valid()) {
                    var formdata = $('#formaddNode').serialize();
                    // alert(formdata);
                    $.ajax({
                        type: "POST",
                        url: "/Hierarchy/AddNewNode",
                        dataType: "json",
                        data: formdata,
                        success: function (response) {
                            // $("#modalAddNode").modal("hide");
                            window.location.reload();
                        },
                        error: function (response) {
                            alert('Exception found');
                            //  $("#modalAddNode").modal("hide");
                            window.location.reload();
                        },
                        complete: function () {
                            //  $('.ajax-loader').css("visibility", "hidden");
                        }
                    });
                }

            });

            //Close PopUp
            $(document).on("click", "#closePopup", function (e) {
                e.preventDefault();
                $("#modalAddNode").modal("hide");
            });

            $('.rbtnnodetype').click(function (e) {
                if ($(this).val() == "Pn") {
                    $('.petenddiv').attr("class", "petenddiv hidden");

                    $("#ParentName").val("");
                }
                else {
                    $('.petenddiv').attr("class", "petenddiv");
                }
            });

        });

    </script>

}

Answer 1

Just make sure you name the property “text”, including lowercases, as the library binds this field to the label. Not having a property with this name renders it undefined.