CLASS: DataGrid

SUPER CLASS: Control

Subclasses

No subclasses found

Synopsis

Widget for displaying data in a tabular format.

JavaScript to access dataGrid data

To get data for the selected row

// Return the row for the selected grid item
this.customerDataGrid1.selected.data.address
// Return the address column for the selected grid item
this.customerDataGrid1.selected.data.address

See details for more code examples.

Full Description

Also see Data Grid Column.

A DataGrid is created and configured automatically when you drag a business data object from the palette into your canvas.

Steps for Creating a DataGrid

To create and configure a DataGrid, follow these steps:

1. Drag a DataGrid widget onto the Page.
2. Bind the dataSet property of the DataGrid widget by either (a) selecting a variable from the drop down list or (b) selecting the bind circle that appears to the right of the dataSet property.
   The object you bind must represent a list. Typically, you will use a LiveVariable or Service Variable.
3. Add the columns. You can click autoColumns to have them built for you, or you can add columns manually by clicking the addColumn operation.
4. Use a column's field property to specify a specific field from the dataSet to display in the column.
5. To size the columns, you can either click autoSize or use the columnWidth property to specify a precise width.
6. To order columns use the index property of each column.

Code Examples

// Number of columns in the grid
this.customerDataGrid1.getCollection().length
// Number of rows in the grid
this.customerDataGrid1.dataSet.getCount()
// Get/set the column widgets attributes
this.customerDataGrid1.getCollection()[0].getValue("caption");
this.customerDataGrid1.getCollection()[0].setValue("caption","Foo");
// Get all grid data
this.customerDataGrid1.dataSet
// Get grid row data
this.customerDataGrid1.dataSet.getItem(0).
// Get/set row and attribute data 
this.customerDataGrid1.dataSet.getItem(0).getValue("address");
this.customerDataGrid1.dataSet.getItem(0).setValue("address","123 Foo St");
// Add row to grid
this.customerDataGrid1.dataSet.addItem({company:"Foo"}, 0)
// Remove row from grid
this.customerDataGrid1.dataSet.removeItem(0)
// Change column width
main.customerDataGrid1._columns[0].setValue("columnWidth","0px")
// To determine if there is a selected row
if (this.customerDataGrid1.getEmptySelection == true) {
   alert("No row selected!");
}

Properties

DataGrid.addColumn

This button adds a single column widget to the grid.

DataGrid.autoSizeHeight

DataGrid.autoSizeWidth

DataGrid.minHeight

DataGrid.minWidth

described in Control

Defines the minimum size of a widget. The minWidth property is used when the width property is set to a percent (%) value. The widget will shrink based on the available space until the minWidth pixel value is reached, at which point the widget will not shrink further.

DataGrid.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

DataGrid.addColumn

This button adds a single column widget to the grid.

DataGrid.autoColumns

This button automatically adds a column to the dataGrid for every attribute in the dataSet LiveVariable.

DataGrid.autoSizeHeight

DataGrid.autoSizeWidth

DataGrid.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

DataGrid.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

DataGrid.clearColumns

This button removes all the columns in a dataGrid.

DataGrid.dataSet

This property sets the LiveVariable to use as input to this grid. Click the binding icon and use the binding editor to set the data to display in the dataGrid widget.

DataGrid.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

DataGrid.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

DataGrid.minHeight

DataGrid.minWidth

described in Control

Defines the minimum size of a widget. The minWidth property is used when the width property is set to a percent (%) value. The widget will shrink based on the available space until the minWidth pixel value is reached, at which point the widget will not shrink further.

DataGrid.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

DataGrid.onAfterRender

This event is called just after the grid is populated with data. Can be used to select the first row of a grid automatically once the grid is rendered.

// Function called by afterRender event of the customersDataGrid widget
  customersDataGrid1AfterRender: function(inSender) {
    try {
       // inSender is the customersDataGrid1 widget
       // getCount() function returns number of items in grid
       // selected == false if no row is selected
       if (inSender.dataSet.getCount() && !inSender.selected) {
          // Select the first row in datagrid
          inSender.select(0);
       }      
    } catch(e) {
      console.error('ERROR IN customersDataGrid1AfterRender: ' + e); 
    } 
  },

DataGrid.onBeforeRender

This event is called just before the grid is populated with data. Not often used.

DataGrid.onCanEdit

DataGrid.onCellClick

This event is called when the user clicks a particular cell in the grid.

DataGrid.onDeselected

This event is called when the user deselects row in the dataGrid.

DataGrid.onHeaderCellClick

This event is called when the user clicks a header row cell in the dataGrid.

By default, when a user clicks on a header cell, the application performs a sort on the column. You can override by calling a custom service or custom JavaScript triggered on this event.

DataGrid.onSelected

This event is called when the user selects a row in the dataGrid.

DataGrid.onSelectionChanged

This event is called when the user clicks a different row in the dataGrid.

DataGrid.onSetColumns

This event is called when the dataGrid column values are set. This event can be used to format data within a DataGrid. However, the dataExpression property of the dataGridColumn widget provides an easier way to format data.

This example defines a formatter for column 0 that returns a checkbox for each cell in that column

dataGrid1SetColumns: function(inSender, inColumn, inIndex) {
    if (inIndex == 0)            // 1st column is zero   
       inColumn.formatter = function(inDatum, inRowIndex) { 
       if(inDatum == 0)
           return '<INPUT TYPE=CHECKBOX NAME="Active"><P>';
       else 
           return '<INPUT TYPE=CHECKBOX NAME="Active" CHECKED><P>';
       }
}

DataGrid.onSetStructure

This event is called when the column structure is created for the grid. This event can be used to dynamically add columns to the grid.

DataGrid.onSort

This event is called when the user clicks a column heading and causes the dataGrid to sort by that column.

DataGrid.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

DataGrid.scrollX

described in Control

The ScrollX property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated width can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollX(true);

DataGrid.scrollY

described in Control

The ScrollY property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated height can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollY(true);

DataGrid.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Use within the javascript editor

this.<UniqueID>.setShowing(true)

DataGrid.updateNow

This button updates the data in the dataGrid.

DataGrid.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");