This example demonstrates how to use responsive design in the Soby Data Grid.
"sobyResponsiveCondition" class should be used to define condition. This needs to be added into "ResponsiveConditions" property of the grid. Passing this condition into "AddColumn" method will state the visibility of the column on different screen resolution.
Setting a condition on "RowDetailDisplayViewResponsiveCondition" property will state the visibility of the column expander on different screen resolution.
<!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 responsiveCondition1 = new sobyResponsiveCondition(function (width, height) {
if (width < 600)
return false;
else
return true;
});
var responsiveCondition2 = new sobyResponsiveCondition(function (width, height) {
if (width >= 600)
return false;
else
return true;
});
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);
bookGrid.AddColumn("Price", "Price", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
bookGrid.AddColumn("Year", "Year", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null, responsiveCondition1);
bookGrid.AddColumn("Genre", "Genre", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null, responsiveCondition1);
bookGrid.RowDetailDisplayFunction = function (grid, rowId, item) {
var container = $("<div></div>");
container.append("<strong>Year:</strong>" + item.Year + "<br>");
container.append("<strong>Genre:</strong>" + item.Genre);
return container.html();
};
bookGrid.ResponsiveConditions.push(responsiveCondition2);
bookGrid.RowDetailDisplayViewResponsiveCondition = responsiveCondition2;
bookGrid.ShowHeader = true;
bookGrid.IsEditable = false;
bookGrid.ShowRefreshButton = false;
bookGrid.DisplayTitle = false;
bookGrid.IsSelectable = true;
bookGrid.IsEditable = false;
bookGrid.Initialize(true);
This example displays all array values