This example demonstrates how to bind static data into the Soby Data Grid.
"soby_StaticDataService" class takes json data as parameter. You will also need to define the properties with "SobySchemaField" class. You can check the following code;
<!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_CustomersDiv'></div>
</body>
</html>
var items = [
{ ID: 1, FirstName: "Serkant", LastName: "Samurkas", Age: 37, Sex: "M" },
{ ID: 2, FirstName: "Dexter", LastName: "McKenzie", Age: 39, Sex: "M" },
{ ID: 3, FirstName: "Tricia", LastName: "Cooper", Age: 31, Sex: "F" },
{ ID: 4, FirstName: "Debra", LastName: "Drinian", Age: 39, Sex: "F" },
{ ID: 5, FirstName: "Alex", LastName: "Long", Age: 24, Sex: "M" },
{ ID: 6, FirstName: "Michele", LastName: "Kane", Age: 26, Sex: "F" }
];
var customerService = new soby_StaticDataService([
new SobySchemaField("Id", SobyFieldTypes.Number, null),
new SobySchemaField("FirstName", SobyFieldTypes.Text, null),
new SobySchemaField("LastName", SobyFieldTypes.Text, null),
new SobySchemaField("Age", SobyFieldTypes.Number, null),
new SobySchemaField("Sex", SobyFieldTypes.Text, null)
], items);
var customerGrid = new soby_WebGrid("#soby_CustomersDiv", "Customers", customerService, "There is no record found.");
customerGrid.IsEditable = false;
customerGrid.IsSelectable = false;
customerGrid.AddKeyField("ID", "ID");
customerGrid.AddColumn("FirstName", "FirstName", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
customerGrid.AddColumn("LastName", "LastName", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
customerGrid.AddColumn("Age", "Age", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
customerGrid.AddColumn("Sex", "Sex", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null);
customerGrid.Initialize(true);
This example displays all array values