LiveCode LessonsData GridLiveCode 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?

You can download the sample stack from this url: https://tinyurl.com/yb47xl2a

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