Showing posts with label OrgChart Javascript. Show all posts
Showing posts with label OrgChart Javascript. Show all posts

Tuesday, March 18, 2014

MVC Demo - Building Your Org Chart Automatically from an Excel File




GetOrgChart can automatically build your organization chart from a list of employees. 

Here are the 4 steps for importing Excel data into GetOrgchart:

2. Build an Excel file




3. Create Action method that will read the excel file

GetOrgChartReadFromExcelController.cs
        
public JsonResult Read()
{
    //Use OleDb to read the excel
    string path = Server.MapPath(@"~/App_Data/People.xlsx");            
    string connString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + path + ";Extended Properties='Excel 8.0;HDR=Yes;'";
    DataTable dt = new DataTable();
    OleDbConnection conn = new OleDbConnection(connString);
    OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT * FROM [People$]", conn);
    adapter.Fill(dt);

    //The following code will convert a data table to JSON format. 
    List> rows = new List>();
    Dictionary row = null;
    foreach (DataRow dr in dt.Rows)
    {
         row = new Dictionary();
         foreach (DataColumn col in dt.Columns)
         {
              row.Add(col.ColumnName.Trim(), dr[col]);
         }
         rows.Add(row);
    }
    return Json(rows, JsonRequestBehavior.AllowGet);
}


4. Bind the GetOrgChart to the action above

Index.cshtml
 

var readUrl = "@Url.Action("Read")";

$.getJSON(readUrl, function (people) {
    $('#people').getOrgChart({
        theme: "helen",
        color: "green",
        primaryColumns: ["Name", "Title"],
        imageColumn: "Image",
        linkType: "M",
        editable: false,
        dataSource: people
    });
});
Here is the result:



Please let me know if you have any questions