<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Soby Web DataGrid Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="/media/js/jquery-3.1.0.js" type="text/javascript"></script>
<link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" />
<script src="/media/js/soby.service.js"></script>
<script src="/media/js/soby.ui.components.js"></script>
</head>
<body>
<div id='soby_AuthorsDiv'></div>
<div id='soby_BooksDiv'></div>
</body>
</html>
var items = [
{ ID: 16, Title: "Northanger Abbey", Year: 1817, Price: 1295, Genre: "Gothic parody", ImageUrl:"", WebSiteUrl:"", AuthorId:1 },
{ ID: 17, Title: "David Copperfield", Year: 1850, Price: 1500, Genre: "Bildungsroman", ImageUrl:"/Images/Carousel/David Copperfield.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/David_Copperfield", AuthorId:2 },
{ ID: 18, Title: "Don Quixote", Year: 1617, Price: 895, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Don Quixote.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Don_Quixote", AuthorId:3 },
{ ID: 19, Title: "Moby Dick", Year: 1851, Price: 725, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Moby Dick.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Moby-Dick", AuthorId:4 },
{ ID: 20, Title: "Robinson Crusoe", Year: 1719, Price: 1250, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Robinson Crusoe.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Robinson_Crusoe", AuthorId:5},
{ ID: 21, Title: "Gulliver’s Travels", Year: 1726, Price: 2150, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Gulliver’s Travels.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Gulliver%27s_Travels", AuthorId:6 },
{ ID: 22, Title: "Clarissa", Year: 1748, Price: 475, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Clarissa.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Clarissa", AuthorId:7 },
{ ID: 23, Title: "Tom Jones", Year: 1749, Price: 880, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Tom Jones.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Tom_Jones", AuthorId:8},
{ ID: 24, Title: "Frankenstein", Year: 1818, Price: 740, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Frankenstein.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Frankenstein", AuthorId:9 },
{ ID: 25, Title: "Nightmare Abbey", Year: 1818, Price: 895, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Nightmare Abbey.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Nightmare_Abbey", AuthorId:10},
{ ID: 26, Title: "Sybil", Year: 1845, Price: 720, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Sybil.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Sybil_(novel)", AuthorId:11 },
{ ID: 27, Title: "Jane Eyre", Year: 1847, Price: 990, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Jane Eyre.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Jane_Eyre", AuthorId:12},
{ ID: 28, Title: "Vanity Fair", Year: 1848, Price: 500, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Vanity Fair.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Vanity_Fair_(novel)", AuthorId:13 }
];
var authors = [
{Id:1, Name:"Jane Austen"},
{Id:2, Name:"Charles Dickens"},
{Id:3, Name:"Miguel de Cervantes"},
{Id:4, Name:"Elizabeth Hardwick"},
{Id:5, Name:"Daniel Defoe"},
{Id:6, Name:"Jonathan Swift"},
{Id:7, Name:"Samuel Richardson"},
{Id:8, Name:"Henry Fielding"},
{Id:9, Name:"Mary Shelley"},
{Id:10, Name:"Thomas Love Peacock "},
{Id:11, Name:"Benjamin Disraeli"},
{Id:12, Name:"Charlotte Brontë"},
{Id:13, Name:"William Thackeray"}
];
var bookService = new soby_StaticDataService([
new SobySchemaField("Id", SobyFieldTypes.Number, null),
new SobySchemaField("Title", SobyFieldTypes.Text, null),
new SobySchemaField("Year", SobyFieldTypes.Number, null),
new SobySchemaField("Price", SobyFieldTypes.Number, null),
new SobySchemaField("Genre", SobyFieldTypes.Text, null),
new SobySchemaField("AuthorId", SobyFieldTypes.Number),
new SobySchemaField("ImageUrl", SobyFieldTypes.Text, null),
new SobySchemaField("WebSiteUrl", SobyFieldTypes.Text, null)
], items);
var authorService = new soby_StaticDataService([
new SobySchemaField("Id", SobyFieldTypes.Number, null),
new SobySchemaField("Name", SobyFieldTypes.Text, null)
], authors);
var authorGrid = new soby_WebGrid("#soby_AuthorsDiv", "Authors", authorService, "There is no record found.");
authorGrid.AddColumn("Name", "Name", SobyShowFieldsOn.All, null, null, true, true, false, null, null, null);
authorGrid.IsSelectable = true;
authorGrid.IsEditable = false;
authorGrid.OnRowSelected = function (grid, rowID) {
var authorBooksGrid = new soby_WebGrid("#soby_BooksDiv", "Books", bookService, "There is no record found.");
authorBooksGrid.DisplayTitle = false;
authorBooksGrid.IsSelectable = false;
authorBooksGrid.IsEditable = false;
authorBooksGrid.AddColumn("Title", "Title", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
authorBooksGrid.AddColumn("Year", "Year", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
authorBooksGrid.AddColumn("Price", "Price", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
authorBooksGrid.AddColumn("Genre", "Genre", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
authorBooksGrid.Initialize(false);
var selectedDataItems = grid.GetSelectedDataItems();
var authorIds = new Array();
for (var i = 0; i < selectedDataItems.length; i++) {
authorIds[authorIds.length] = selectedDataItems[i]["Id"];
}
authorBooksGrid.FilterResultWithMultipleValues("AuthorId", authorIds, SobyFieldTypes.Number, SobyFilterTypes.Equal, false);
};
authorGrid.Initialize(true);
This example displays all array values