MasterDetail.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)
Upload soby_spservice.js and soby.ui.components.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);
camlBuilder.Filters = new CamlFilters(false);
camlBuilder.AddViewField("ID", "ID", CamlFieldTypes.Text);
camlBuilder.AddViewField("PhoneType", "PhoneType", CamlFieldTypes.Text);
camlBuilder.AddViewField("Title", "Title", CamlFieldTypes.Text);
var spService = new soby_SharePointService(camlBuilder );

var customerPhonesGrid = new sobyCamlBuilderGrid("#sobyCustomerPhonesDiv", spService, "There is no record found.");
customerPhonesGrid.AddColumn("PhoneType", "Phone Type");
customerPhonesGrid.AddColumn("Title", "Phone");
customerGrid.AddDataRelation("Title", "ID", customerPhonesGrid.GridID, "Customer")

customerGrid.Initialize(true);

</script>

Last edited Nov 12, 2014 at 2:33 PM by Serkant_Samurkas, version 5