LiveCode LessonsLiveCode Data Grid Data Grid FundamentalsHow Do I Populate a Data Grid With Data?

How Do I Populate a Data Grid With Data?

There are a couple of ways you assign data to a data grid. This lesson will show you how.

Use The Property Inspector

Use The Property Inspector

You can use the Contents pane of the property inspector to quickly assign data to a data grid. This does not provide as many options as setting the properties mentioned below but it will get you up and running quickly.

1) Switch to the Contents pane of the property inspector.

2) Enter some tab delimited text into the field.

When you use the property inspector to assign data to the data grid the property inspector sets the dgText property of the data grid.

Set the dgText Property

Set the dgText Property

The data grid works with arrays behind the scenes but in the interest of making life easier for some folks there is a dgText property. The syntax is as follows:

set the dgText [ pFirstLineContainsHeaders ] of group "Data Grid" to pText

pText is assumed to be a collection of data where each row is delimited by the return character and each item is delimited by a tab. You can map each item of each line in pText to a particular key in an array (and thus a table column) by passing in true for pFirstLineContainsHeaders. If true then the data grid will extract the first line of pText and use the values for the internal key/column names. The default value for pFirstLineContainsHeaders is false.

If you set the dgText of a data grid table then all data will be imported and assigned to the appropriate column depending on the value of pFirstLineContainsHeaders. Normally you should set this property to true and provide the header that maps each item of each line to a specific column. Note that if pFirstLineContainsHeaders is true then the columns must already exist in your data grid table in order to be displayed.

If pFirstLineContainsHeaders is false then the columns property of the data grid is used for mapping. For example, the first item of a line of pText would be assigned to the column that appears on the first line in the columns property of the data grid. If line 1 of pText contains more items than there are columns in the table then new columns are added. Any new columns are named "Col 1", "Col 2", etc.

If you set the dgText property of a data grid form then the data will be imported but it is up to you to modify your Row Template Behavior to display the imported data correctly. If pFirstLineContainsHeaders is false then each item of each line in pText will be named "Label X" (where X is the item number) in the array that is passed to FillInData.

Set the dgData Property

Set the dgData Property

The dgData property of a data grid is a multi-dimensional array and is the actual format that the data grid works with under the hood. The data grid expects the first dimension of the array to be integers. The number of keys in the first dimension represents the number of records being displayed in the data grid. Here is an example with five records:

theDataA[1]

theDataA[2]

theDataA[3]

theDataA[4]

theDataA[5]

You then store all of your custom data in the second dimension. The following is how you would display five records, each with a "Name" property:

theDataA[1]["Name"]

theDataA[2]["Name"]

theDataA[3]["Name"]

theDataA[4]["Name"]

theDataA[5]["Name"]

In the example code above there are 5 records, each with a "FirstName", "LastName" and "Title" property. Your templates will have access to these properties when the time comes to draw the data on the screen.

Important: if you are using a data grid table then a key in the array must match the name of a column in the table in order to be displayed. So if you have a column named "Image URL" in your table you must have a corresponding key named "Image URL":

theDataA[1]["Image URL"]

2 Comments

Nate McVaugh

"Note that if pFirstLineContainsHeaders is true then the columns must already exist in your data grid table in order to be displayed."

Suppose I need to create the columns dynamically, based on the file being read (CSV spreadsheet with header names in first row). I can see how to set the contents using 'dgText of group "Foo"', but don't see anything like that for columns. I've tried dgCols and dgColumns, no luck.

Trevor DeVore

@Nate - you can set the dgProps["columns"] property of a data grid. See the data grid properties page for a description.

This lesson shows an example of setting the property.

Add your comment

E-Mail me when someone replies to this comment