SmartGrid
Here is a sample Smart Grid JSON configuration:
{ "dataSources": { "customerDatasource": { "objectName": "customerDataSource", "entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity", "tableRef": "eCustomer", "entityView": "eSalesrep" } }, "settings": { "classList": [ "customer-form" ], "style": { "font-size": "15" } }, "columns": [ { "customerGrid": { "componentType": "grid", "componentOptions": { "gridLayout": { "height": 500, "width": 600, "scrollable": "scrollable", "sortable": true, "selectable": "row", "pageable": { "pageSizes": [ 10, 25, 100 ], "buttonCount": 5 }, "resizable": true, "columns": [ { "field": "CustNum", "title": "Cust Num", "width": "100" }, { "field": "Name", "title": "Name", "width": "240" }, { "field": "Country", "title": "Country", "width": "160", "windowSizes": [ "lg", "md" ] }, { "field": "City", "title": "City", "width": "200", "windowSizes": [ "lg" ] }, { "field": "eSalesrep[0].RepName", "title": "Rep Name", "width": "240", "template": "childRelation:eSalesrep:RepName", "windowSizes": [ "lg" ] }, { "type": "command", "width": "50", "form": "\/customer\/:CustNum\/orders", "text": "View Orders", "imageUrl": "Consultingwerk\/SmartComponentsDemo\/Web2\/Images\/package.png" }, { "type": "command", "width": "50", "action": "PutCustomerOnHoldHandler", "text": "Put customer on credit hold", "imageUrl": "Consultingwerk\/SmartComponentsDemo\/Web2\/Images\/sign_stop.png" } ], "detailTemplate": { "dataSources": [ { "objectName": "orderDataSource", "entityName": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity", "tableRef": "eOrder", "entityView": "eCustomer", "initialFilter": { "operator": "eq", "field": "CustNum", "value": "[dataItem.CustNum]" } } ], "rows": [ { "orderGrid": { "componentType": "grid", "componentOptions": { "gridLayout": "Consultingwerk.SmartComponentsDemo.OERA.Sports2000.OrderBusinessEntity/order", "dataSource": "orderDataSource", "objectName": "orderGrid" } } } ] } }, "disableTextSelection": true, "dataSource": "customerDataSource", "objectName": "customerGrid" } } } ] }
The "gridLayout" property may be a string or an object. If a string is passed, then the Smart Grid will treat it as a URL and attempt to fetch the grid layout. If an object is passed, it will be used as the grid layout.
A note on the Smart Grid detail template:
The detail template accepts the same JSON layout that a Smart Form does, with the addition that it also supports template variables which will be matched to values from the current data item. For example, "[dataItem.CustNum]" will be resolved to the CustNum of the currently selected customer.
JSON Properties list and explanations:
Property | Type | Explanation | Equivalent HTML Attribute |
---|---|---|---|
gridLayout | string | object | The reference to the grid layout to be retrieved from the backend service, or the actual grid layout object. | smart-grid-layout |
objectName | string | A unique identifier used for obtaining references to the grid component | smart-object-name |
dataSource | string | The smart-object-name of the Smart Data Source that the grid should bind to | smart-data-source |
filterable | logical | Use this to disable filtering support. By default, filtering is enabled. Filtering can also be disabled using the grid layout. | filterable |
gridLayout.resizable | logical | Allows resizing of the SmartGrid's columns. | |
disableTextSelection | logical | Disables the text selection in the grid's rows. | disable-text-selection |