Soby Web Components

This example demonstrates how to use cell template in the Soby Data Grid.
Cell template can be passed into "AddColumn" method. There are two types of cell template; 1. CellContent: This type render the template as part of datagrid cell.

var cellTemplate1 = { TemplateType: "CellContent", PopupLinkText: "More info", Template: "<div><div style='background-color: blue;color: white;padding: 5px;float: left;width:250px'><strong>Author:</strong> #{Author.Name}<br><strong>Genre:</strong> #{Genre}<br> <strong>Year:</strong> #{Year}<br><strong>Price:</strong> $#{Price}</div></<div>" };
bookGrid.AddColumn("Year", "Description", SobyShowFieldsOn.All, null, cellTemplate1, true, true, true, null, null, null);
        
2: PopupContent: This type render the template within a popup box.
var cellTemplate2 = { TemplateType: "PopupContent", PopupLinkText: "More info", Template: "<div><div style='background-color: blue;color: white;padding: 5px;float: left;width:250px'><strong>Author:</strong> #{Author.Name}<br><strong>Genre:</strong> #{Genre}<br> <strong>Year:</strong> #{Year}<br><strong>Price:</strong> $#{Price}</div></div>" };
bookGrid.AddColumn("Year", "Description", SobyShowFieldsOn.All, null, cellTemplate2, true, true, true, null, null, null);
        

<!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_BooksDiv'></div> </body> </html>
var items = [ { ID: 16, Title: "Northanger Abbey", Year: 1817, Price: 1295, Genre: "Gothic parody", ImageUrl:"", WebSiteUrl:"", Author:{Id:1,Name:"Benjamin Disraeli"} }, { 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", Author:{Id:2,Name:"Charles Dickens"} }, { 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", Author:{Id:3,Name:"Miguel de Cervantes"} }, { 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", Author:{Id:4,Name:"Elizabeth Hardwick"} }, { 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", Author:{Id:5,Name:"Daniel Defoe"} }, { 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", Author:{Id:6,Name:"Jonathan Swift"} }, { ID: 22, Title: "Clarissa", Year: 1748, Price: 475, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Clarissa.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Clarissa", Author:{Id:7,Name:"Samuel Richardson"} }, { 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", Author:{Id:8,Name:"Henry Fielding"} }, { ID: 24, Title: "Frankenstein", Year: 1818, Price: 740, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Frankenstein.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Frankenstein", Author:{Id:9,Name:"Mary Shelley"} }, { 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", Author:{Id:10,Name:"Thomas Love Peacock "} }, { ID: 26, Title: "Sybil", Year: 1845, Price: 720, Genre: "Picaresque", ImageUrl:"/Images/Carousel/Sybil.jpg", WebSiteUrl:"https://en.wikipedia.org/wiki/Sybil_(novel)", Author:{Id:11,Name:"Benjamin Disraeli"} }, { 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", Author:{Id:12,Name:"Charlotte Brontë"} }, { 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)", Author:{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("Author", SobyFieldTypes.Object, null), new SobySchemaField("ImageUrl", SobyFieldTypes.Text, null), new SobySchemaField("WebSiteUrl", SobyFieldTypes.Text, null) ], items); var bookGrid = new soby_WebGrid("#soby_BooksDiv", "Books", bookService, "There is no record found."); bookGrid.AddKeyField("Id", "Id"); bookGrid.AddColumn("Title", "Title", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null); var cellTemplate1 = { TemplateType: "CellContent", PopupLinkText: "More info", Template: "<div><div style='background-color: blue;color: white;padding: 5px;float: left;width:250px'><strong>Author:</strong> #{Author.Name}<br><strong>Genre:</strong> #{Genre}<br> <strong>Year:</strong> #{Year}<br><strong>Price:</strong> $#{Price}</div></<div>" }; var cellTemplate2 = { TemplateType: "PopupContent", PopupLinkText: "More info", Template: "<div><div style='background-color: blue;color: white;padding: 5px;float: left;width:250px'><strong>Author:</strong> #{Author.Name}<br><strong>Genre:</strong> #{Genre}<br> <strong>Year:</strong> #{Year}<br><strong>Price:</strong> $#{Price}</div></div>" }; bookGrid.AddColumn("Year", "Description", SobyShowFieldsOn.All, null, cellTemplate1, true, true, true, null, null, null); bookGrid.AddColumn("Year", "Description", SobyShowFieldsOn.All, null, cellTemplate2, true, true, true, null, null, null); bookGrid.Initialize(true);
This example displays all array values

Want to learn more about the grid component? Check out the API documentation.