Nderon Hyseni Nderon Hyseni - 1 year ago 100
C# Question

How to display a photo to Organization Chart? SharePoint 2013

I have a list like following: enter image description here

and I have an organization chart based on this list:enter image description here

I need above the name to be displayed an Image from

Publishing Image
and it is also
Publishing Image
column type how can I display It.

Here is my code: I am using google charts with C# and i need image to be with 100x60px

public partial class OrganizationChartUserControl : UserControl
//Get the List name to fetch the data from
string listName = "OrgChart_Demo";
int iRowCounter = 0;
string sAllNewRows = string.Empty;

protected void Page_Load(object sender, EventArgs e)
//Fetch the data (recursively) from the list

//Generate the Client Script and Register

private void GenerateClientScript(string sAllNewRows)
string csName1 = "OrgChartScript";
Type csType = this.GetType();

ClientScriptManager cs = Page.ClientScript;

// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(csType, csName1))
StringBuilder cstext = new StringBuilder();
cstext.Append("<script type='text/javascript' src='https://www.google.com/jsapi'></script>");
cstext.Append("<script type='text/javascript'>");
cstext.Append("google.load('visualization', '1', { packages: ['orgchart'] });");

cstext.Append("function drawChart() {");
cstext.Append("var data = new google.visualization.DataTable();");

cstext.Append("data.addColumn('string', 'Name');");
cstext.Append("data.addColumn('string', 'Manager');");
cstext.Append("data.addColumn('string', 'ToolTip');");
cstext.Append("var rowArr = new Array();");



cstext.Append("var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));");
cstext.Append("chart.draw(data, { allowHtml: true, allowCollapse: true });");
cs.RegisterClientScriptBlock(csType, csName1, cstext.ToString(), false);



private void GetNode(string reportsTo)
SPListItemCollection itemCol = GetListItems(listName, reportsTo);

foreach (SPListItem item in itemCol)
//create a new row
sAllNewRows += createNewRow(item);



private string createNewRow(SPListItem listItem)
string sName = ConvertTo.CastIn<string>(listItem["Name"]);
string sTitle = ConvertTo.CastIn<string>(listItem["Title"]);
string sMoreInfo = ConvertTo.CastIn<string>(listItem["MoreInfo"]);
string sReportsTo = ConvertTo.CastIn<string>(listItem["ReportsTo"]);

// string sReportsTo = new SPFieldLookupValue(ConvertTo.CastIn<string>(listItem["ReportsTo"])).LookupValue;

StringBuilder sText = new StringBuilder();
sText.Append("var NewRow = new Array();");
sText.Append(String.Format("NewRow.push({{ v: '{0}', f: '{1}<div style=\"color:red; font-style:italic\">{2}</div>' }});", sName, sName, sTitle));
sText.Append(String.Format("NewRow.push('{0}');", sReportsTo));
sText.Append(String.Format("NewRow.push('{0}');", sMoreInfo));
sText.Append(String.Format("rowArr[{0}] = NewRow;", iRowCounter));

return sText.ToString();

private SPListItemCollection GetListItems(string destList, string reportsTo)
SPListItemCollection ResultListItems = null;

using (SPSite oSite = new SPSite(SPContext.Current.Web.Url))
using (SPWeb oWeb = oSite.OpenWeb())
SPList list = oWeb.Lists.TryGetList(destList);
if (null == list)
return ResultListItems;

//Check if the item already exist.
StringBuilder sCAMLQuery = new StringBuilder(string.Empty);
if (reportsTo != string.Empty)
sCAMLQuery.Append("<FieldRef Name='ReportsTo' />");
// sCAMLQuery.Append("<Value Type='Lookup'>" + reportsTo + "</Value>");
sCAMLQuery.Append("<Value Type='Text'>" + reportsTo + "</Value>");

sCAMLQuery.Append("<FieldRef Name='ReportsTo' />");

SPQuery QueryResult = new SPQuery();
QueryResult.Query = sCAMLQuery.ToString();
ResultListItems = list.GetItems(QueryResult);

return ResultListItems;

Please help me.
Thank you!

Answer Source

I solved the problem, it isn't important anymore but for those who will have this problem in the future. The only line that should be changed is this:

sText.Append(String.Format("NewRow.push({{ v: '{0}', f: '<img src =\"{1}\" style=\"width:57px; height:57px; float:left;\" />{2}<div style=\"color:white; font-style:Arial\">{3}</div>' }});", sName, sPicture, sName, sTitle));

Thanks goes to @hardik who solved my problem!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download