/
Smart Grid

Smart Grid

Owned by Mike Fechner
Last updated: Mar 05, 2021 by Oana Sucigan

The Smart Grid presents multiple rows of data and provides and interface for paging.

Sample Markup

<smart-grid
   (selection-changed)="onCustomerGridSelectionChanged($event)"
   (onDoubleClicked)="onCustomerGridDoubleClicked($event)"  
   (on-command-clicked)="onCustomerGridCommandClicked($event)"
   smart-object-name='customerGrid' 
   smart-data-source='customerDataSource'
   [filterable]="false" 
   smart-grid-layout='Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity/customer'>
</smart-grid>

Description

AttributeDescription
smart-object-nameAn unique identifier used for obtaining references to the grid component
smart-data-sourceThe smart-object-name of the Smart Data Source that the grid should bind to
smart-grid-layoutThe reference to the grid layout to be retrieved from the backend service.

[smart-grid-layout]

Alternatively a client side grid layout, see example below.
(selection-changed)Use this to set up an event handler for grid selection changes.
(onDoubleClicked)Use this to set up an event handler for (row) double click events.
(on-command-clicked)Use this to set up an event handler for command button clicks.
[filterable]Use this to disable filtering support. By default, filtering is enabled. Filtering can also be disabled using the grid layout, see example below.
[disable-text-selection]Disables the text selection in the grid's rows.

Example for client side grid layout using [smart-grid-layout]

<smart-grid 
     smart-object-name='customerGrid' 
     smart-data-source='customerDataSource' 
     [smart-grid-layout]='gridLayout'>
</smart-grid>

and in the Form's SmartController:

    gridLayout: any = {
        height: 400,
        width: 600, 
        groupable: false, 
        sortable: true, 
        selectable: "row", 
        pageable: { 
            refresh: true, 
            pageSizes: [10, 25, 100], 
            pageSize: 10, 
            buttonCount: 5 
        },
		filterable: false, 
        editable: { 
            mode: "inline" 
        }, columns: [
            { field: "CustNum", title: "Cust Num", windowSizes: ['lg'] }, 
            { field: "Name", title: "Name" }, 
            { field: "Country", title: "Country" }, 
            { field: "City", title: "City" }, 
            { field: "eSalesrep[0].RepName", title: "Rep Name", template: "childRelation:eSalesrep:RepName" }
          ]
    }

Related content