0

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 and i need image to be with 100x60px

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Text;
using Microsoft.SharePoint;
using System.Collections.Generic;
using Microsoft.SharePoint.Publishing.Fields;

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', 'Picture');");
        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)
{
    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"]);

    //ImageFieldValue pageImage = listItem["Pageimage"] as ImageFieldValue;
    //string sPicture = string.IsNullOrEmpty(pageImage.ImageUrl) ? "#" : pageImage.ImageUrl;

   // 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({{ v: '{0}', '<img src='{1}'/>', f: '{2}<div style=\"color:red; font-style:italic\">{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("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;

            //Check if the item already exist.
            StringBuilder sCAMLQuery = new StringBuilder(string.Empty);
            sCAMLQuery.Append("<Where>");
            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("</Where>");

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

    return ResultListItems;
  }
 }
}
  • Do you want to upload the picture in SharePoint list? Or do you want to get the Picture from SharePoint list in below given code? as both are missing. – Hardik Jun 20 '16 at 13:27
  • Kindly check this for your reference...aspsnippets.com/Articles/… – Hardik Jun 20 '16 at 13:36
  • @Hardik I have the photo in list but for some reason it is not displayed in above picture. I have i ton my list all I want is to display it to the chart – Nderon Hyseni Jun 20 '16 at 13:40
2

Change your CreateNewRow function with below code.

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', 'Picture');");
            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)
    {
        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"]);


        ImageFieldValue pageImage = listItem["Publishing Image"] as ImageFieldValue;
        string sPicture = string.IsNullOrEmpty(pageImage.ImageUrl) ? "#" : pageImage.ImageUrl;

       // 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: '<img src = "{1}" />{2}<div style=\"color:red; font-style:italic\">{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("rowArr[{0}] = NewRow;", iRowCounter));

        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);
                sCAMLQuery.Append("<Where>");
                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("</Where>");

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

        return ResultListItems;
    }
}

I have added sPicture in the function to get the Picture URL from SharePoint list item's "Publishing Image" column & show that in NewRow data using below line.

sText.Append(String.Format("NewRow.push({{ v: '><img src = "{0}" />', f: '{1}<div style=\"color:red; font-style:italic\">{2}</div>' }});", sPicture, sName, sTitle));

Please try above code & let me know as I haven't created same functionality on my-end but just changed the above code from taking the reference from below link.

Create Organizational Chart from Database using Google Organizational Chart in ASP.Net

  • I think this is the correct you wanted to write sText.Append(String.Format("NewRow.push({{ v: '<img src = '{0}' />', f: '{1}<div style=\"color:red; font-style:italic\">{2}</div>' }});", sPicture, sName, sTitle)); am I right – Nderon Hyseni Jun 20 '16 at 14:19
  • yes as this will show you an image above the name in chart – Hardik Jun 20 '16 at 14:20
  • I am getting a System.NullReferenceException – Nderon Hyseni Jun 20 '16 at 14:20
  • Have you added these two lines in your code?....** ImageFieldValue pageImage = listItem["Publishing Image"] as ImageFieldValue; string sPicture = string.IsNullOrEmpty(pageImage.ImageUrl) ? "#" : pageImage.ImageUrl; ** – Hardik Jun 20 '16 at 14:22
  • yes I have added them – Nderon Hyseni Jun 20 '16 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.