Click here to Skip to main content
15,880,543 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
1.Manager to Employee Relation is working fine

Main issue is Level based like

I am using these files orgchart.js and orgchart.css file.

I want to level based chart.

first level-1 to Level-7 th level like

https://github.com/dabeng/OrgChart.js[^]

Above link only Manager to Employee Relation
and i want to Level based manager to employee and levels.

Please provide level based org chart asap.

What I have tried:

https://github.com/dabeng/OrgChart.js
============================================
JavaScript
function GetChildrens(data, name, level) {
            //debugger;
            var aaa = [];
            $.each(data, function (i, j) {

                //if (level == j['Level']) {
                if (name == j['ReportingManager']) {
                    var datascource = {
                        'name': j['Name'],
                        'ReportingManager': j['ReportingManager'],
                        'title': j['Designation'],
                        'fname': j['EmployeeId'],
                        'imgpath': j['IMGAEPATH'],
                        'Level': j['Level'],
                        'children': GetChildrens(data, j['EmployeeId']),
                    }
                    aaa.push(datascource);
                }

                //}

            });
            return aaa;
            //console.log(aaa);
        }

var _Org = [];
        $(document).ready(function () {
            //debugger;
            $.ajax({
                url: localStorage.API + "/api/Login/PostGetorgchart",
                method: 'POST',
                dataType: 'json',
                data: {
                    USER_ID: 0
                },
                success: function (Jdata) {
                    // debugger;
                    var obj = ''; _Org = []; _Org = Jdata[0];
                    $.each(Jdata[0], function (i, j) {
                        if (j['ReportingManager'] == '' || j['ReportingManager'] == '0') {
                            obj = j;
                        }
                    });
                    var datascource = {
                        'fname': obj['EmployeeId'],
                        'name': obj['Name'],
                        'title': obj['Designation'],
                        'imgpath': obj['IMGAEPATH'],
                        'Level': obj['Level'],
                        'ReportingManager': obj['ReportingManager'],
                        'children': GetChildrens(Jdata[0], obj['EmployeeId'], obj['Level']),

                    }


                    $(function () {
                        $('#chart-container').html('');
                        var oc = $('#chart-container').orgchart({
                            'data': datascource,
                            'depth': 2,
                            'nodeContent': 'title',
                            'exportButton': true,
                            'exportFilename': 'MyOrgChart',
                            //'direction': 'r2l',
                            //'direction': 'l2r',
                            //'direction': 'b2t',

                            //imgae

                            'nodeID': 'id',
                            'createNode': function ($node, data) {
                                var secondMenuIcon = $('<i style="display:none;">', { //<i>
                                    'class': 'fa fa-info-circle second-menu-icon',
                                    click: function () {
                                        $(this).siblings('.second-menu').toggle();
                                    }
                                });

                                //style="display: none;" fa fa-info-circle second-menu-icon
                                //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.fname + '.jpg"></div>';
                                //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';

                                var imgpath1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/" + data.imgpath + "";
                                var imgdefault1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/DEFAULT.jpg";
                                $.ajax({
                                    url: imgpath1,
                                    //type: "HEAD",
                                    crossDomain: true,

                                    success: function () {
                                        //debugger;
                                        //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';
                                        var secondMenu = '<div class="second-menu" style="background-image:url(' + imgpath1 + ')"></div>';
                                        $node.append(secondMenuIcon).append(secondMenu);
                                    },
                                    error: function () {
                                        //var secondMenu1 = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + "DEFAULT.jpg" + '"></div>';
                                        var secondMenu1 = '<div class="second-menu"style="background-image:url(' + imgdefault1 + ')"></div>'

                                        $node.append(secondMenuIcon).append(secondMenu1);
                                    },
                                });

                                //$node.append(secondMenuIcon).append(secondMenu);
                            }

                            // level based
                            //addChildren: function ($node, data) {
                            //    this.buildChildNode($node.closest('table'), data);
                            //    if (!$node.children('.bottomEdge').length) {
                            //        $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
                            //    }
                            //    if (!$node.find('.symbol').length) {
                            //        $node.children('.title').prepend('<i class="fa ' + this.options.parentNodeSymbol + ' symbol"></i>');
                            //    }
                            //    if (this.isInAction($node)) {
                            //        this.switchVerticalArrow($node.children('.bottomEdge'));
                            //    }
                            //},
                            //// build the parent node of specific node
                            //buildParentNode: function ($currentRoot, data) {
                            //    debugger;
                            //    data.relationship = data.relationship || '001';
                            //    var $table = $('<table>')
                            //        .append($('<tr>').append($('<td colspan="2">').append(this.createNode(data))))
                            //        .append('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>')
                            //        .append('<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>');
                            //    this.$chart.prepend($table)
                            //        .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
                            //        .children('tr:last').children().append(this.$chart.children('table').last());
                            //},
                            //level b

                        });

                        // Remove style start
                        // $("#chart-container").removeAttr("style")
                        $('#chart-container').css('overflow', 'auto!important');
                        $('.orgchart').css('overflow', 'auto!important');
                        
                        //$('.orgchart').css('display', 'block!important');



                    });


                }

            });

        });
Posted
Updated 30-Apr-18 21:00pm
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900