LiveCode LessonsLiveCode Data Grid IntroductionHow Do I Create My First Data Grid Table?

How Do I Create My First Data Grid Table?

This lesson will show you how to create a bare bones data grid table. Data grid tables are useful when you need to display rows of data in structured columns.

Locate Data Grid on Tools Palette

Locate Data Grid on Tools Palette

Drag Data Grid Onto Card

Drag Data Grid Onto Card

Populate Data Grid Using Object Inspector

Populate Data Grid Using Object Inspector

Data Grid tables display data in columns that you can customize the look of. You don't have to worry about customization right now though because a Data Grid table can display plain text just fine. Let's test it out.

1) Switch to the Contents pane of the Object Inspector.

2) Type or paste some tab delimited text into the field. Click out of the field (in the Name field for example) to save the text you entered.

The tab delimited text you entered in the field will appear as columns in the data grid (1). The Object Inspector automatically creates a column in the Data Grid for each column in the text you provide (2).

Customizing Columns

Customizing Columns

Now that you've populate a Data Grid Table with some data let's look at the columns in the Data Grid.

Normally when you work with a Data Grid Table you will create columns in the property inspector in advance using the "+" button (1). Seeing as the columns I need already exist I've gone through and renamed "Col 1" to "state" and "Col 2" to "code" (2).

Note that I have assigned a label for the columns (3). Labels are useful for customizing the column labels in the Data Grid Table.

Populate Data Grid Using dgText Property

Now that we have defined our columns let's look at how to populate a Data Grid Table by setting the dgText property. Here is an example handler with comments that you can place in a button.

Note: Verify that the name of your data grid matches the name used in the code below otherwise an error will occur when you try to run it.

on mouseUp

## Create tab delimited data.

## Note that first line has name of columns.

## Providing names tells Data Grid how to map

## data to appropriate columns.

put "state" & tab & "code" & cr & \

"ALABAMA" & tab & "AL" & cr & \

"ALASKA" & tab & "AK" into theText

## Let Data Grid know that first line has column names

put true into firstLineContainsColumnNames

set the dgText [ firstLineContainsColumnNames ] of group "DataGrid" to theText

end mouseUp

Executing the above code would give you the following result in the Data Grid table.

Populating the Data Grid Using dgData Property

Here is an example of populating the Data Grid Table by setting the dgData property to an array. The end result is the same as the previous step.

Note: Verify that the name of your data grid matches the name used in the code below otherwise an error will occur when you try to run it.

on mouseUp

## Create a nested array.

## Array key names in the 2nd dimension

## dictate values for individual columns

put "ALABAMA" into theDataA[ 1 ][ "state" ]

put "AL" into theDataA[ 1 ][ "code" ]

put "ALASKA" into theDataA[ 2 ][ "state" ]

put "AK" into theDataA[ 2 ][ "code" ]

set the dgData of group "DataGrid" to theDataA

end mouseUp

12 Comments

Fraser

Scuppered at step one: I can't locate "Data Grid" on my tools palette. In its place I have "List Field". I'm using revMedia 4.0.0-dp-6 Build 930. What do I have to do to have data grid available?

Trevor DeVore

@Fraser: Data Grid's are available in Studio and Enterprise.

Jon Schwartz

Added two buttons with the scripts above (Populate Data Grid Using dgText Property and Populating the Data Grid Using dgData Property ) and a dataGrid. Neither populated the table.

When I put false into firstLineContainsColumnNames using the dgText Property it populated the table but of corse not the header.

Trevor DeVore

@Jon: You can't just execute the scripts without first configuring the columns as described in the lesson. Did you follow each step in the lesson and then execute the scripts or just try to execute the scripts?

Ted Johnson

I have the same problem reported by Jon. When attempting to populate the grid using dgText, following the example exactly, if I include this line 'put true into firstLineContainsColumnNames' I get a blank grid. Comment it out and the column headers and 2 rows of data show up.

If I try the dgData example I get nothing as well.

I am using version 6.1

Elanor Buchanan

Hi Ted

For the lines

put true into firstLineContainsColumnNames
set the dgText [ firstLineContainsColumnNames ] of group "DataGrid" to theText

to work correctly the column names need to be set up first and need to match the column names in theText. I have tested it here and it works in LiveCode 6.1 on Windows 7. If this doesn't help please let us know.

Kind regards

Elanor

Ron

I can't figure out how to create columns in a DataGrid.

Elanor Buchanan

Hi Ron

In the Property Inspector for the DataGrid there is a Columns option in the drop down, choose this.

When you are on the Columns pane click the button with the + icon next to the Columns heading, that will create a new column called "Col 1". You can then edit the name, label, width and other properties of the that column.

Once you have added your columns you can choose the one you want to edit from the list of columns.

I hope that helps.

Elanor

Aljaz

Is there any way i could create columns from script?

I would like to send queries to database and then display the result in data grid if that is possible.

Thank you for help

Aljaz

Elanor Buchanan

Hi Aljaz

Yes, you can set the dgProps["columns"] of your DataGrid in script, the value is a list of the column names, one per line. For example

local tColumnList

put "Country" & return & "Capital" into tColumnList
set the dgProps["columns"] of group "DataGrid 1" to tColumnList

Would give you a DataGrid with 2 columns named Country and Capital.

You can set lots of DataGrid properties in script, have a look at this lesson for a fuller list of properties.

http://lessons.runrev.com/m/datagrid/l/7343-data-grid-properties

I hope that helps.

Kind regards

Elanor

Dakila

Please split the lesson into a one-field table, and another one that adds another field.

Max

I cannot get this to work. Are there any sample stacks?

Add your comment

E-Mail me when someone replies to this comment