LiveCode LessonsLiveCode Data Grid Working With Data Grid TablesHow Can I Colorize Individual Lines in a Table?

How Can I Colorize Individual Lines in a Table?

This lesson will show you how to change the color of individual lines in a Data Grid table. Before you being this lesson you will need to read the lesson How Do I Override the Default Behavior for Rendering Data to a Cell?

Coloring A Single Line

Coloring A Single Line

In this example I am going to modify the basic example created in the lesson mentioned above so that it colors a row red if the row's line has error property is true.

By clicking on the Toggle Line 3 Color button the color of line 3 turns red. The code in the button extracts the data for line 3 from the data grid, toggles the "line has error" property and reassigns the new data to line 3.

on mouseUp pMouseBtnNo

put the dgDataOfLine[3] of group "DataGrid 1" into theDataA

put not theDataA["line has error"] into theDataA["line has error"]

set the dgDataOfLine[3] of group "DataGrid 1" to theDataA

end mouseUp

Now let's look at what the default custom column behavior looks like for this data grid.

The Default Custom Column Behavior

The Default Custom Column Behavior

Here is the relevant code in the default custom column behavior for this data grid. The key addition to the code is the SetForeGroundColor handler. This handler checks the value of the "line has error" column for this row (using GetDataOfIndex) and if it is true then changes the cell to red. Since each cell in this row has the same value for "line has error" the entire row appears red.

on FillInData pData

-- This message is sent when the Data Grid needs to populate

-- this template with the column data. pData is the value to be displayed.

set the text of me to pData

SetForeGroundColor

end FillInData

on LayoutControl pControlRect

-- A default column is just a field.

end LayoutControl

setprop dgHilite pBoolean

-- This custom property is set when the highlight of your column template has

-- changed. You only add script here if you want to customize the highlight.

if pBoolean then

set the foregroundcolor of me to the dgProp["hilited text color"] of the dgControl of me

else

SetForeGroundColor

end if

end dgHilite

private command SetForeGroundColor

if GetDataOfIndex(the dgIndex of me, "line has error") then

set the textcolor of me to red

else

set the textcolor of me to black

end if

end SetForeGroundColor

0 Comments

Add your comment

E-Mail me when someone replies to this comment