CellContentTemplate.png
In this example setup the following in SharePoint

List Name: Customers
Internal Field Names: Title, FullName, JobTitle

List Name: Customer Phones
Internal Field Names: Title, PhoneType, Customer (Lookup to Customers list)

List Name: Customer Addresses
Internal Field Names: Title, town, PostCode, Address1, Customer (Lookup to Customers list)

Upload soby_spservice.js into the following location in SharePoint /Style%20Library/Assets/Scripts/

Create a page and add content editor webpart

Then You will need to include the following code into the content editor webpart
<div id='soby_CustomerDiv'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" src="/Style%20Library/Assets/Scripts/soby.spservice.js"></script>
<script language="javascript" src="/Style%20Library/Assets/Scripts/soby.ui.components.js"></script>
<script language="javascript">
var dataSourceBuilder = new soby_CamlBuilder("Customers", "", 5, "https://soby.sharepoint.com");
dataSourceBuilder.Filters = new CamlFilters(false);
dataSourceBuilder.AddViewField("ID", "ID", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Title", "Title", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Fullx0020Name", "FullName", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Jobx0020Title", "JobTitle", CamlFieldTypes.Text);
var spService = new soby_SharePointService(dataSourceBuilder);

var customerGrid = new sobyDataGrid("#sobyCustomerDiv", "Customers", spService, "There is no record found.");
customerGrid.AddColumn("FullName", "Full Name");
customerGrid.AddColumn("JobTitle", "Job Title");

var camlBuilder = new soby_CamlBuilder("Customer Phones", "", 2, "https://soby.sharepoint.com");
camlBuilder.Filters = new CamlFilters(false);
camlBuilder.AddViewField("ID", "ID", CamlFieldTypes.Text);
camlBuilder.AddViewField("Phonex0020Type", "PhoneType", CamlFieldTypes.Text);
camlBuilder.AddViewField("Title", "Title", CamlFieldTypes.Text);
var spService = new soby_SharePointService(camlBuilder );

var customerPhonesGrid = new sobyDataGrid("#sobyCustomerPhonesDiv", "Phones", spService , "There is no record found.");
customerPhonesGrid.DisplayTitle = false;
customerPhonesGrid.IsSelectable = false;
customerPhonesGrid.AddColumn("PhoneType", "Phone Type");
customerPhonesGrid.AddColumn("Title", "Phone");
/*
customerPhonesGrid.AddColumn("Title", "Phone", function(item){
var content = $("<div></div>");
var link =$("<a href='javascript:void(0)' onclick='soby_PopulateCustomerPhones(" + item.ID + ")'></a>").text(item.Title);
content.append(link);
return content.html();
});
*/
customerGrid.AddDataRelation("Title", "ID", customerPhonesGrid.GridID, "Customer")

var camlBuilder = new soby_CamlBuilder("Customer Addresses", "", 2, "https://soby.sharepoint.com");
camlBuilder.Filters = new CamlFilters(false);
camlBuilder.AddViewField("ID", "ID", CamlFieldTypes.Text);
camlBuilder.AddViewField("town", "Town", CamlFieldTypes.Text);
camlBuilder.AddViewField("Title", "Title", CamlFieldTypes.Text);
camlBuilder.AddViewField("PostCode", "PostCode", CamlFieldTypes.Text);
camlBuilder.AddViewField("Address1", "Address1", CamlFieldTypes.Text);

var spService = new soby_SharePointService(camlBuilder );
var customerAddressesGrid = new sobyDataGrid("#sobyCustomerAddressesDiv", "Addresses", spService, "There is no record found.");
customerAddressesGrid.DisplayTitle = false;
customerAddressesGrid.IsSelectable = false;
var cellTemplate1 = { TemplateType: "CellContent", PopupLinkText: "More info", Template: "<div><div style='background-color: blue;color: white;padding: 5px;float: left;'><strong>PostCode:</strong></div><div style='background-color: black;color: white;padding: 5px;float: left;'>#{PostCode}</div></div>" }
var cellTemplate2 = { TemplateType: "PopupContent", PopupLinkText: "More info", Template: "<table><tr><td><strong>Address Line1:</strong></td><td>#{Address1}</td></tr><tr><td><strong>City:</strong></td><td>#{Title}</td></tr><tr><td><strong>Town:</strong></td><td>#{Town}</td></tr><tr><td><strong>PostCode:</strong></td><td>#{PostCode}</td></tr></table>" }
customerAddressesGrid.AddColumn("Title", "City", null, cellTemplate1);
customerAddressesGrid.AddColumn("Town", "Town");
customerAddressesGrid.AddColumn("Town", "Town", null, cellTemplate2);

customerGrid.AddDataRelation("Title", "ID", customerAddressesGrid.GridID, "Customer")

customerGrid.Initialize(true);
</script>

Last edited Nov 12, 2014 at 2:42 PM by Serkant_Samurkas, version 4