Smart Grid

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

Sample Markup



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.


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]


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" }