An interactive grid for working with a source’s data.


  • Grid Title (String)
    • Title displayed in widget container
  • Data
    • The data displayed in the appropriate grid column
    • Expected format:
      [ {"column_name": any(value), "another_column_name": any(vale)} ]
  • Columns
    • The columns in the grid, should correlate to data’s keys and data type. Optionally, include a ‘disabled’ attribute to prevent value updates.
    • Expected format:
      [ {"name": "column_name", "type": "string"}, {"name": "another_column_name", "type": "int", "disabled": boolean} ]
  • Size In Blocks (Int)
    • See Portal Overview for info on block size


This example configuration uses ClearBlade ‘Collection’ and ‘Collection Columns’ datasources, and all users with access to the portal have been given CRUD permissions. Note that any datasource may be used, but parsers need to be adjusted for expected format and/or the relevant query.

Incoming parser for Data

if(this.datasource === undefined){return;}
var fmtData = [];
for(var i = 0, len = this.datasource.length; i < len; i++){
return fmtData;

Here, we extract the data from the collection datasource results.
[{"data": {"item_id" : 0001, "col_1": 4321}, {"data": {"item_id" : 0002, "col_1": 1234}]
and format it to the grid’s expected data:
[{"item_id" : 0001, "col_1": 4321}, {"item_id" : 0002, "col_1": 1234}]

Outgoing parser for Data

var query = cb.Query();
this.widget.query = query;
return this.widget;

For this outbound parser, the widget is assigned a ClearBlade Query to update/delete items with matching unique keys, “item_id”. Note that this logic may need to be adapted if you are working with a datasource other than a collection.

Incoming Parser for Columns

if(this.datasource == undefined){return;}
var fmtColumns = [];
for(var c = 0, len = this.datasource.length; c < len; c++){
    var col = {
        "name": this.datasource[c].ColumnName, 
        "type" : this.datasource[c].ColumnType, 
        "disabled" : (this.datasource[c].ColumnName == "item_id" ? true : false) 
return fmtColumns;

Finally, we take the collection columns datasource:
[{"ColumnName": "item_id", "ColumnType": "uuid"}, {"ColumnName": "col_1", "ColumnType": "int"}]
and format it to the grid’s expected column data:
[{"name" : "item_id", "type": "uuid", "disabled": true}, {"name": "col_1": "int", "disabled": false}]
Since, “item_id” is disabled, a user will not be able to edit it’s value.