JavaScript Editor js editor     Web development 

Main Page

File: ...\Samples\Solution\Toledo\Griders.scx

This sample demonstrates how you can perform the following actions:

Selecting Grid Highlight Styles

You can use highlighting styles to control how highlighting appears and behaves in a grid when you select rows and the focus moves from the grid. To set highlighting styles, use the GridВ HighlightStyle property.

In the sample, to set the HighlightStyle, select a style in the combo box on the form. The combo box contains the following code:

В Copy Code
ThisForm.grdCustomers.HighlightStyle = VAL(this.Value)

For more information about HighlightStyle, see HighlightStyle Property.

You can also set highlighting colors. For more information, see HighlightBackColor Property, HighlightForeColor Property, SelectedItemBackColor Property, and SelectedItemForeColor Property.

Fitting Columns to Width of Data

This sample resizes grid columns automatically to fit the width of data in the column using the GridВ AutoFit method as follows:

В Copy Code

You can also resize grid columns by double-clicking the upper-left corner of the grid. To resize an individual column automatically, double-click the dividing line on right side of the column. You can control this behavior using the GridВ AllowAutoColumnFit property.

For more information, see AutoFit Method and AllowAutoColumnFit Property.

Locking Grid Columns

You can lock columns so the columns remain fixed when the scrolling horizontally across a grid by using the GridВ LockColumns property.

In the sample, you can lock the first column in the grid by setting grdCustomers.LockColumns to 1 as in the following code:

В Copy Code
ThisForm.grdCustomers.LockColumns = 1

You can also lock the Customer ID column by clicking the column header. The pushpin in the column header indicates whether the column is locked. To lock individual columns, right-click the area between the column headers.

For more information, see LockColumns Property and LockColumnsLeft Property.

Displaying Images in Column Headers

You can specify an image for a column header using the Picture property and set image orientation using the HeaderВ Alignment property.

In the sample, an image appears in the Company Name column header to indicate the direction of the sort order in the column. Clicking the column header displays different images to indicate ascending or descending sort order.

For more information, see Picture Property and Alignment Property.

See Also

JavaScript Editor js editor     Web development