Display Organizational Chart details from database in Modal Popup on MouseHover in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Aug 20, 2020 02:32 AM
Forum: ASP.Net MVC
Answer: 1
Views: 3250
Sample Code: Download

Hi,

In real time i have may have lot of fields?

Ex:Id, Name, DateOfBirth, joinDate, Reportingmanger

My requirement is that when i mouse ever on particular employee need those employee details in modal popup GridView

[HttpPost]
public JsonResult getData(string name)
{
    int id = 1;
    List<ManagerHierarchy> list = new List<ManagerHierarchy>();
    list = entities.ManagerHierarchies.Where(x=>x.EmployeeID==id).ToList();
    return new JsonResult { Data = list, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

@{
    Layout = null;
}
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['orgchart'] });
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            data.addRows([
                [{ v: 'Robert', f: 'Robert<div style="color:red; font-style:italic">President</div>' }, '', 'President'],
                [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' }, 'Robert', 'Vice President'],
                ['Alice', 'Robert', ''],
                ['Bob', 'Jim', 'Bob Sponge'],
                ['Carol', 'Bob', '']
            ]);
            var options = { allowHtml: true };
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            google.visualization.events.addListener(chart, 'onmouseover', function (e) {
                var row = e.row;
                var dataTable = data;
                var employee = dataTable.getValue(row, 0);
                $.ajax({
                    type: "POST",
                    url:"/home/getData",
                    data: '{name:"' + employee + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#dialog").dialog({
                            autoOpen: false,
                            modal: true,
                            title: "View Details"
                        });
                        $('#dialog').html(response);
                        $('#dialog').dialog('open');
                    }
                });
            });
            chart.draw(data, options);
        }
        google.charts.setOnLoadCallback(drawChart);
    </script>
 
</head>
<body>   
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto">
    </div>
    <div id="dialog" style="display: none">
    </div>
</body>
</html>

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Aug 20, 2020 07:32 AM
Modified: on Aug 21, 2020 04:49 AM
Report

Hi mahesh213,

Using the below article i have created the example.

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult AjaxMethod()
    {
        SampleEntities entities = new SampleEntities();
        List<object> chartData = new List<object>();
        foreach (EmployeesHierarchy eh in entities.EmployeesHierarchies)
        {
            chartData.Add(new object[] {
                            eh.EmployeeId,
                            eh.Name,
                            eh.Designation ,
                            eh.ReportingManager
                        });
        }

        return Json(chartData);
    }

    public JsonResult GetDetails(int id)
    {
        SampleEntities entities = new SampleEntities();
        List<EmployeesHierarchy> list = entities.EmployeesHierarchies.Where(x => x.EmployeeId == id).ToList();
        return new JsonResult { Data = list, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['orgchart'] });
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ParentEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < r.length; i++) {
                        var employeeId = r[i][0].toString();
                        var employeeName = r[i][1];
                        var designation = r[i][2];
                        var reportingManager = r[i][3] != null ? r[i][3].toString() : '';
                        data.addRows([[{
                            v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "/Pictures/' + employeeId + '.jpg" />'
                        }, reportingManager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    google.visualization.events.addListener(chart, 'onmouseover', function (e) {
                        var row = e.row;
                        var dataTable = data;
                        var id = dataTable.getValue(row, 0);
                        $.ajax({
                            type: "POST",
                            url: "/Home/GetDetails",
                            data: '{id:' + id + ' }',
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                $("#dialog").dialog({
                                    autoOpen: false,
                                    modal: true,
                                    title: "View Details"
                                });

                                $('#dialog').find('#lblName').html(response[0].Name);
                                $('#dialog').find('#lblDesignation').html(response[0].Designation);
                                $('#dialog').dialog('open');
                            }
                        });
                    });
                    chart.draw(data, { allowHtml: true });
                }
            });
        }
        google.charts.setOnLoadCallback(drawChart);
    </script>
    <div id="chart">
    </div>
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <th>Name</th>
                <th>Designation</th>
            </tr>
            <tr>
                <td><span id="lblName"></span></td>
                <td><span id="lblDesignation"></span></td>
            </tr>
        </table>
    </div>
</body>
</html>

Screenshot

Display Organizational Chart details from database in Modal Popup on MouseHover in ASP.Net MVC

Create Organizational Chart in ASP.Net MVC using Google Organizational Chart API

Company

Explore

Follow us

Contact Us