Grid Web Component

Overview

Smart.Grid displays data in a series of rows and columns. The Grid is usually bound to a data source.

To initialize a Grid, the user has to include the following files to the head of the page:

smart.base.css – the CSS file containing the styles for element
smart.element.js – the base class
smart.dataadapter.js – the JS file containing the definition for the Data Adapter.
smart.button.js – the JS file containing the definition for the buttons.
smart.scrollbar.js – the JS file containing the definition for the scrollbars.
smart.listbox.js – the JS file containing the definition for the listbox element.
smart.dropdownlist.js – the JS file containing the definition for drop-down list.
smart.grid.js – the JS file containing the element definition

The following code adds a data grid to the page:

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <link rel="stylesheet" href="../../source/styles/smart..base.css" type="text/css" />  
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>  
   <script type="text/javascript" src="../../source/smart.element.js"></script>  
   <script type="text/javascript" src="../../source/smart.button.js"></script>  
   <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>  
   <script type="text/javascript" src="../../source/smart.dataadapter.js"></script>  
   <script type="text/javascript" src="../../source/smart.grid.js"></script>  
   <script type="text/javascript" src="data.js"></script>  
   <script type="text/javascript">  
     Smart('#grid', class {  
       get properties() {  
         return {  
           dataSource: new Smart.DataAdapter(  
           {  
             dataSource: getCountriesData(),  
             dataFields:  
             [  
               'ID: number',  
               'Country: string',  
               'Area: number',  
               'Population_Urban: number',  
               'Population_Rural: number',  
               'Population_Total: number',  
               'GDP_Agriculture: number',  
               'GDP_Industry: number',  
               'GDP_Services: number',  
               'GDP_Total: number'  
             ]  
           }),  
           columns: [  
             'Country',  
             'Area',  
             'Population_Rural',  
             'Population_Total',  
             'GDP_Total'  
           ]  
         }  
       }  
     });  
    </script>  
 </head>  
 <body>  
   <smart-grid id="grid"></smart-grid>  
 </body>  
 </html>

Styling

The grid is stylable through classes like the rest of the Smart custom elements. However it does have some specific CSS variables that are used as well:

–smart-grid-footer-height – Used to set the default height of the footer. Default is 30px;
–smart-grid-header-height – Used to set the default height of the header. Default is 30px;
–smart-grid-group-header-height – Used to set the default height of the group header. Default is 30px;
–smart-grid-column-header-height – Used to set the default height of the column header. Default is 30px;
–smart-grid-pager-height – Used to set the default height of the pager. Default is 30px;
–smart-grid-filter-footer-height – Used to set the default height of the filter’s footer. Default is 30px;
–smart-grid-aggregate-footer-height – Used to set the default height of the aggregate’s footer. Default is 30px;
–smart-grid-header-color – Used to set the default color of the header. Default is rgb(149, 149, 149);
–smart-grid-header-background-color – Used to set the default background of the header. Default is #fff
–smart-grid-group-header-background-color – Used to set the default background of the group header. Default is #fff
–smart-grid-column-header-color – Used to set the default color of the column’s header. Default is rgb(149,149,149)
–smart-grid-column-header-border-color – Used to set the default border color of the column’s header. Default is #ddd
–smart-grid-column-header-background-color – Used to set the default background color of the column’s header. Default is #fff
–smart-grid-cell-fixed-background-color – Used to set the default border color of the fixed cells. Default is #fafafa
–smart-grid-cell-filter-row-background-color – Used to set the default filter row background color. Default is #f4f4f4
–smart-grid-pager-background-color – Used to set the default pager’s background color. Default is #fafafa
–smart-grid-cell-background-color – Used to set the default cell’s background color. Default is #fff
–smart-grid-cell-color – Used to set the default cell color. Default is #333
–smart-grid-cell-border-color – Used to set the default cell border color. Default is #f4f4f4
–smart-grid-footer-background-color – Used to set the default footer background color. Default is #fff
–smart-grid-aggregate-footer-background-color – Used to set the default aggregate background color. Default is #f4f4f4
–smart-grid-column-filter-background-color – Used to set the default column filter’s background color. Default is #f4f4f4
–smart-grid-cell-summary-row-background-color – Used to set the default summary row’s background color. Default is #f4f4f4

Smart.Grid– configuration and usage.

Overview

Styling