How Do I Give Color To a Non Editable Column?

This lesson describes how coloring a non editable column in a Data Grid table, using the Data Grid Helper plugin.

Opening Columns Builder

Opening Columns Builder

First, drag a datagrid onto a stack and double click on it to open the Data Grid Helper (DGH) Properties Palette.

Click the "Edit..." button to open Columns Builder.

Building Columns in the Columns Builder Preview

Building Columns in the Columns Builder Preview

Click the (+) button and add four columns.

Setting the Editable Properties of a Column to False

Setting the Editable Properties of a Column to False

Select the column "Col1", then change it's editable property to false.

Repeat the operation for column "Col4".

Apply The Column Builder Properties To The DataGrid

Apply The Column Builder Properties To The DataGrid

Click on the "Apply" button to apply the properties modifications to the selected DataGrid (1).

Going Back to The Data Grid Properties

Going Back to The Data Grid Properties

Once the editable properties changed for the two columns, click on the "Grid" button, for closing the Column Buidler and going back to the Data Grid's properties.

Installing the DGH Properties Script With the DGH's Scripts Installer

Installing the DGH Properties Script With the DGH's Scripts Installer

Double-click on the Scripts topic to open the scripts list.

Then click on the "Install Script" button of the "DGH Properties" item.

Once the Script installed, the "Install Script" button, turns to grey.

Selecting a Color for Non Editable Columns

Selecting a Color for Non Editable Columns

The columns color properties are now available. We can select a color for the non editable columns of our data grid.

Open the color picker by clicking on the color rectangle of the "Color For Not Editable Columns" properties. (1) In this example, we have selected a yellow color. The color is immediately applied to the datagrid non editable columns.

You can remove the selected color at any moment by clicking on the "Clear" button (2).

Testing The Result

Testing The Result

To test how the datagrid will looking with datas, open the Contents tab of the LiveCode's Property Inspector, then input some data.

Separate data of each column by a tab, and each line by a return.

Adding Transparency to a Column By Changing the Column Ink Property

Adding Transparency to a Column By Changing the Column Ink Property

The column ink property allows to change the column transparency. In this example we chose the "addMin" value, for displaying the row alternated color.

Note that the final result for a "Column Ink" may depend of the chosen colors for the datagrids (alternate row color, column color, etc). You can try each "Column Ink" values, and then, decide what appareance is better for your datagrid.

0 Comments

Add your comment

E-Mail me when someone replies to this comment