Soby Web Components

This example demonstrates how to use refresh button in the Soby Data Grid.
"ShowRefreshButton" property states whether refresh button should be visible or not.

bookGrid.ShowRefreshButton = true; 

<!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="/Scripts/main.js" type="text/javascript"></script> <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 bookDataSourceBuilder = new soby_WSBuilder(); bookDataSourceBuilder.Filters = new SobyFilters(false); bookDataSourceBuilder.AddSchemaField("Id", SobyFieldTypes.Number, null); bookDataSourceBuilder.AddSchemaField("Title", SobyFieldTypes.Text, null); bookDataSourceBuilder.AddSchemaField("Year", SobyFieldTypes.Number, null); bookDataSourceBuilder.AddSchemaField("Price", SobyFieldTypes.Number, null); bookDataSourceBuilder.AddSchemaField("Genre", SobyFieldTypes.Text, null); bookDataSourceBuilder.AddSchemaField("AuthorId", SobyFieldTypes.Lookup, { ModelName: "Author", ValueFieldType: SobyFieldTypes.Number, ValueFieldName: "Id", TitleFieldName: "Name", ReadTransport: new soby_TransportRequest(soby_GetTutorialWebAPIUrl() + "/Authors", "json", "application/json; charset=utf-8", "GET") }); var bookService = new soby_WebServiceService(bookDataSourceBuilder); bookService.Transport.Read = new soby_TransportRequest(soby_GetTutorialWebAPIUrl() + "/Books", "json", "application/json; charset=utf-8", "GET"); bookService.Transport.Add = new soby_TransportRequest(soby_GetTutorialWebAPIUrl() + "/Books", "json", "application/json; charset=utf-8", "POST"); bookService.Transport.Update = new soby_TransportRequest(soby_GetTutorialWebAPIUrl() + "/Books(#key)", "json", "application/json; charset=utf-8", "PUT"); bookService.Transport.Delete = new soby_TransportRequest(soby_GetTutorialWebAPIUrl() + "/Books(#key)", "json", "application/json; charset=utf-8", "DELETE"); bookGrid = new soby_WebGrid("#soby_BooksDiv", "Books", bookService, "There is no record found."); bookGrid.ShowRefreshButton = true; bookGrid.AddKeyField("Id", "Id"); bookGrid.AddColumn("Title", "Title", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null); bookGrid.AddColumn("Year", "Year", 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("Genre", "Genre", SobyShowFieldsOn.All, null, null, true, true, true, null, null, null); bookGrid.AddColumn("AuthorId", "Author", SobyShowFieldsOn.All, function (item) { return item.Author.Name; }, null, 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.