ShieldUI grid

50 %
50 %
Information about ShieldUI grid
Technology

Published on February 26, 2014

Author: JStoikov

Source: slideshare.net

Shield UI Grid

Overview • Shield UI Grid supports the following functionality: sorting, paging, scrolling, filtering, paging, scrolling, hierarchy, Masterdetails, real time update, conditional formatting, events, RTL

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Getting Started In order to take advantage of the functionalities offered by our grid component, you will need to: 1. Include references to all required scripts and css files. <!DOCTYPE html> <html> <head> <title>Shield Grid</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" /> <link rel="stylesheet" type="text/css" href="css/all.min.css" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/shieldui-all.min.js" type="text/javascript"></script> </head> <body> ... </body> </html> Please note that the grid requires two css files, one with all base styles and one with the theme styles. 2. Add the control declaration along with the desired properties. The grid widget display tabular data and offers rich interactivity based on built in functionalities like paging, sorting, selection, etc. You can create the grid widget from a div element with the following code: $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products } }); }); The grid supports built in sorting, paging, selection, etc. which can be configured via corresponding properties: $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, paging: true }); }); $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, sorting: true }); }); $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, selection: true }); }); Accessing the grid You can find the grid by its container id: $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products } }); }); function getGrid() { var grid = $("#grid").swidget(); return grid;

API • • • • • • • • • • • • • • A grid component is initialized with the shieldGrid constructor, passing it a dictionary of settings as shown below: $("#grid").shieldGrid({ dataSource: { data: [ { ID: 1, name: "name1" }, { ID: 2, name: "name2" } ] }, columns: [ { field: "ID", title: "Unique Number", format: "{0:c}" }, { field: "name", title : "Name", width: "300px" } ] }); More configuration settings can be found at https://www.shieldui.com/documentation/grid/javascript/api/settings

Resources • Documentation • https://www.shieldui.com/documentation/gri d Examples https://demos.shieldui.com/web/gridgeneral/basic-usage

Resources • Documentation • https://www.shieldui.com/documentation/gri d Examples https://demos.shieldui.com/web/gridgeneral/basic-usage

Add a comment

Related presentations

Related pages

Grid | Shield UI

The ShieldUI jQuery Grid component boasts exceptional performance and a high level of customizability. This page lists some of its main features. Paging ...
Read more

jQuery Plugins and JavaScript UI Framework | Shield UI

The library includes powerful data-visualization components like charts and grid as well as ... power of the ShieldUI JavaScript UI ... Shield UI Ltd. All ...
Read more

JavaScript Grid Basic Usage - demos.shieldui.com

JavaScript Grid Basic Usage - This example demonstrates a basic setup for the ShieldUI jQuery-based Grid control.You can find the gridData.js file content ...
Read more

Shield UI Demos

Shield UI Demos - Shield UI Javascript and HTML 5 Interactive Demos. Explore the powerful Chart, flexible Grid and many other UI components for rapid ...
Read more

ShieldUI Grid: Grid with remote json data - Stack Overflow

I've been trying to get the Grid to work with remote json data source; its been unsuccessful. Does anyone have sample code that I can compile and see work?
Read more

jQuery Grid Plugin

The jQuery Grid plugin by ShieldUI is designed to provide rich functionality, cross-browser support and easy to use API. Whether you only want to render ...
Read more

ShieldUI Grid Export to PDF options - Stack Overflow

I am working with the ShieldUI Grid control and have setup a pretty standard sample, similar to this sample. As demonstrated in it, I have setup the ...
Read more

JQuery HTML5 Grid from ShieldUI extension

Lightweight, fast and customizable JavaScript Grid component. ... I haven't seen in a long time a control that to impress me so much at the first look.
Read more

Detail Grids Template | PrepBootstrap

Detail Grids Bootstrap template, demonstrating two related detail grids. ... The sample uses the ShieldUI jquery grid component displaying data records.
Read more

GitHub - shieldui/shieldui-lite: Lightweight version of ...

shieldui-lite - Lightweight version of the Shield UI JavaScript/HTML5 library
Read more