I have created the following chart using google organisation chart but I have some problems. When I open the page or when I refresh the page it shows up the full chart like in picture below. But I want only the items that are in red square to be shown how can I do this.
I do not want to get a few items from the list but when I open the page it shows the whole chart with its all list item and instead when it opens I want to display only 5 items and let user to expand others do you understand me?
This is the picture of chart how it looks like and how I want it to be!
And here is my full c# code:
namespace OrganizationChartUsingGoogleAPI.OrganizationChart
{
public static class ConvertTo
{
/// <summary>
/// Convert the object type in the given type and handle the DBNULL.
/// </summary>
/// <typeparam name="T">Type to convert</typeparam>
/// <param name="value">value</param>
/// <returns>converted value and if DBNULL then return the type's default value i.e. string = string.Empty, Int16=0 </returns>
public static T CastIn<T>(this object value) where T : IConvertible
{
if (value == DBNull.Value)
if (typeof(T) == typeof(string))
{
return (T)Convert.ChangeType(string.Empty, typeof(T));
}
else
{
return default(T);
}
if (typeof(T) == typeof(bool))
return (T)Convert.ChangeType(Convert.ToInt32(value), typeof(T));
return (T)Convert.ChangeType(value, typeof(T));
}
}
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
GetNode(string.Empty);
//Generate the Client Script and Register
GenerateClientScript(sAllNewRows);
}
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("google.setOnLoadCallback(drawChart);");
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(sAllNewRows);
cstext.Append("data.addRows(rowArr);");
cstext.Append("var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));");
cstext.Append("chart.draw(data, { allowHtml: true, allowCollapse: true });");
cstext.Append("}");
cstext.Append("</script>");
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);
//Recursion
GetNode(item["Name"].ToString());
}
}
private string createNewRow(SPListItem listItem)
{
//Converting list items to strings.
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"]);
//Checking if image field ref is empty or null (if it does't provide any img source link!)
ImageFieldValue pageImage = listItem["Pageimage"] as ImageFieldValue;
string sPicture = string.IsNullOrEmpty(pageImage.ImageUrl) ? "#" : pageImage.ImageUrl;
StringBuilder sText = new StringBuilder();
sText.Append("var NewRow = new Array();");
//this row shows the image and everything else what chart needs
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));
sText.Append(String.Format("NewRow.push('{0}');", sReportsTo));
sText.Append(String.Format("NewRow.push('{0}');", sMoreInfo));
//sText.Append(String.Format("NewRow.push('{0}');", sPicture));
sText.Append(String.Format("rowArr[{0}] = NewRow;", iRowCounter));
//Pageimage
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;
string selected = DropDownList2.SelectedValue;
// Label1.Text = selected;
//Check if the item already exist.
StringBuilder sCAMLQuery = new StringBuilder(string.Empty);
sCAMLQuery.Append("<Where>");
sCAMLQuery.Append("<And>");
if (reportsTo != string.Empty)
{
sCAMLQuery.Append("<Eq>");
sCAMLQuery.Append("<FieldRef Name='ReportsTo' />");
//sCAMLQuery.Append("<Value Type='Lookup'>" + reportsTo + "</Value>");
sCAMLQuery.Append("<Value Type='Text'>" + reportsTo + "</Value>");
sCAMLQuery.Append("</Eq>");
}
else
{
sCAMLQuery.Append("<IsNull>");
sCAMLQuery.Append("<FieldRef Name='ReportsTo' />");
sCAMLQuery.Append("</IsNull>");
}
sCAMLQuery.Append("<Eq>");
sCAMLQuery.Append("<FieldRef Name='Kompania' />");
//sCAMLQuery.Append("<Value Type='Lookup'>" + reportsTo + "</Value>");
sCAMLQuery.Append("<Value Type='Text'>" + selected + "</Value>");
sCAMLQuery.Append("</Eq>");
sCAMLQuery.Append("</And>");
sCAMLQuery.Append("</Where>");
SPQuery QueryResult = new SPQuery();
QueryResult.Query = sCAMLQuery.ToString();
ResultListItems = list.GetItems(QueryResult);
}
}
return ResultListItems;
}
}
}