Manual > Control Reference > Basics > Grid control > Functionality Description > Setting Grid Properties

Specifying Cell Properties Using Styles

A combination of cell property settings is predefined as a "style."For each column (or each row)You can register it in advance. This is the recommended setting method.

By registering a style, when a new row or column is added to the grid, the various settings registered as the style will be applied.Cell PropertiesIt will be taken as the default value.

If the number of rows displayed in the grid changes dynamically, orThis is a good method if you want to change the display format.

(An example of specifying different display formats for each column)

cr_0185

To define styles for each column (or row), use the following methods:

▪AddStyle	... Define styles. Give each style a unique name.
▪SetDefaultStyle	... Assigns the style defined with AddStyle to each column.

By assigning the style registered with the AddStyle method as the style of each column (or each row) with the SetDefaultStyle method, when a new row (or column) is added using the AddRow / AddCol / InsertRow / InsertCol method or the Rows / Cols property, the various setting values assigned as the style will beCell PropertiesThis behavior will be adopted as the default value.

Below is an example of a script using styles.

	// Prepare columns to apply style to
	this.Cols = 10;
	this.Rows = 0;

	// Add style using AddStyle
	this.AddStyle(
		c("styleLabel" , "CellType:label"), 
		c("styleEdit" , "CellType:edit"),
		c("styleMeter" , "CellType:meter"),
		c("styleLamp" , "CellType:lamp"),
		c("styleSwitch" , "CellType:switch"),
		c("styleButton" , "CellType:button", "TextColor:@TextColor"),
		c("styleSideButton", "CellType:sidebutton"),
		c("styleCombo" , "CellType:combo", "ComboType:DROPDOWNLIST", "TextList:data1"+::RET()+"data2"+::RET()+"data3"),
		c("styleImage" , "CellType:image", "File:" + "image.png"),
		c("styleFill1" , "FillColor:#000000", "TextColor:@SelectColor"),
		c("styleFill2" , "FillColor:#000000", "TextColor:#FFFFFF")
	);

	// Set style for each column
	this.SetDefaultStyle("col",
		c(
			"styleLabel, styleFill1", 
			"styleEdit, styleFill2", 
			"styleMeter, styleFill1", 
			"styleLamp, styleFill1", 
			"styleSwitch, styleFill1", 
			"styleButton", 
			"styleSideButton, styleFill2", 
			"styleCombo, styleFill2", 
			"styleImage", 
			"styleLabel, styleFill1"
		)
	); 

	// Add a row
	this.AddRow(10);

	// Set column width
	this.SetColWidth(0, c(70, 70, 100, 50, 50, 100, 100, 100, 80, 500));
	// Set the header title
	this.SetRowData(-1, c("label", "edit", "meter", "lamp", "switch", "button", "sidebutton", "combo", "image"), F);

■Explanation

Specify the number of columns (or rows) to style

Prepare in advance the number of columns (or rows) for which you want to set styles.

For example, when you set a style for a column, you specify the number of columns in the Cols property, and in this case, the Rows property is set to 0 because the style is applied to the added rows.

	this.Cols = 10;
	this.Rows = 0;

Define a style

A style is a predefined set of cell properties for a range of cells (rows, columns, etc.). To define a style, use the AddStyle method.

	this.AddStyle(
		c("styleLabel"     , "CellType:label"),	
		c("styleEdit"      , "CellType:edit"),
		c("styleMeter"     , "CellType:meter"),
		c("styleLamp"      , "CellType:lamp"),
		c("styleSwitch"    , "CellType:switch"),
		c("styleButton"    , "CellType:button", "TextColor:@TextColor"),
		c("styleSideButton", "CellType:sidebutton"),
		c("styleCombo"     , "CellType:combo", "ComboType:DROPDOWNLIST", "TextList:data1"+::RET()+"data2"+::RET()+"data3"),
		c("styleImage"     , "CellType:image", "File:" + "image.png"),
		c("styleFill1"     , "FillColor:#000000", "TextColor:@SelectColor"),
		c("styleFill2"     , "FillColor:#000000", "TextColor:#FFFFFF")
	);

The AddStyle method allows you to specify multiple style definition arrays as parameters. The style definition array is specified in the following format:

c(style name (string), cell property (string))

Set style for each column (or row)

This section explains how to set styles for each column. Use the SetDefaultStyle method to set predefined styles for each row.

	this.SetDefaultStyle("col",
 		c(
			"styleLabel, styleFill1", 
			"styleEdit, styleFill2", 
			"styleMeter, styleFill1", 
			"styleLamp, styleFill1", 
			"styleSwitch, styleFill1", 
			"styleButton", 
			"styleSideButton, styleFill2", 
			"styleCombo, styleFill2", 
			"styleImage", 
			"styleLabel, styleFill1"
		)
        );

In the SetDefaultStyle method, pass either "col" (column-by-column) or "row" (row-by-row) as the first parameter. If you want to specify a style on a column-by-column basis, specify "col".

The second parameter specifies the styles for each column in an array.

c(first column style name, second column style name, ...)

You can also assign multiple styles to each column at the same time by listing the style names separated by commas and enclosing them in double quotation marks.

c("style name1, style name2, style name3", style name1, "style name1, style name4", ...)

Cell Properties(Background color, text color, text position, blinking, etc.)When settingYou need to set the cell type.SetDefaultStyle MethodWhen specifying style names, the CellType must be specified at the beginning of each style.

example)

//Define the style

this.AddStyle(

c("styleLabel" , "CellType:label"),

c("styleFill1" , "FillColor:#000000", "TextColor:@SelectColor")

);

// Specify styleLabel with CellType setting first

this.SetDefaultStyle("col",c("styleLabel, styleFill1"));

// The following is not allowed

this.SetDefaultStyle("col",c("styleFill1, styleLabel"));

When multiple style names are specified with a comma in the SetDefaultStyle method, if there are duplicate cell property settings in each style, the last one will be valid. For example, in the following case, the FillColor property is specified in both styleLabel and styleFill1, but when specifying the style name in the SetDefaultStyle method, styleFill1 is the last one, so "FillColor:#000000" will be valid.

//Define the style

this.AddStyle(

c("styleLabel" , "CellType:label", "FillColor:#C0C0C0"),

c("styleFill1" , "FillColor:#000000", "TextColor:@SelectColor")

);

// Specify multiple styles

this.SetDefaultStyle("col",c("styleLabel, styleFill1"));

Add a row (column)

Use the AddRow method to add the number of rows you want to add. Here, we'll use 10 rows as an example.

	this.AddRow(10);

If you add a row when a style has been defined for each column using the SetDefaultStyle method, the added row will have the style applied.

Even if you change the Rows property value, it will behave the same as the AddRow method.

Specify the column width

Set the width of each column using the SetColWidth method.

	this.SetColWidth(0, c(70, 70, 100, 50, 50, 100, 100, 100, 80, 500));

In addition to the method in the example above, you can also set the column widths all at once using the column/row properties. For details, see "Setting Column/Row Properties".

Set data for the header and each cell

Set data for the header and each cell using SetData / SetTableData / SetColData / SetRowData.

        this.SetRowData(-1, c("label", "edit", "meter", "lamp", "switch", "button", "sidebutton", "combo", "image"), F);

The data set for the header and each cell differs for each CellType. For details, see the SetData method.

In the above example, we've shown how to set styles for each column, but you can also set styles for each row (or the whole row).

Setting cell properties with styles

Setting cell properties with styles