Skip to main content

Veritran Docs

Data Grid Head

The Data Grid Head component allows you to add a header to the data grid. This component can only be configured and used once added to a Data Grid component. Refer to the sections below to learn more.

Caution

To set a header in the data grid, drag and drop the Data Grid Head component within the Data Grid component.

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.

Advanced

There are no attributes available for configuration in the Advanced tab for the Data Grid Head component.

Data Grid Header Cell

In this section, you can define the cell attributes related to its size, text content, style and events. Refer to the table below to learn how to configure a header cell.

Width

Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

Height

Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu

Font Size

Cell text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.

Standard absolute size

Enter any of the following values: xx-small, x-small, small, medium, large, x-large and xx-large.

Relative size

Enter any of the following values, where each constant represents a fixed portion of the screen: rel-xx-small (1/54); rel-x-small (1/40); rel-small (1/30); rel-medium (1/22); rel-large (1/15); rel-x-large (1/10) and rel-xx-large (1/5).

Absolute size in pixels

Enter a value followed by the suffix px. For example, 6px.

Size in millimeters

Enter a value followed by the suffix mm. For example, 6mm.

Size according to the number of base line rows

Enter a value followed by the suffix br. For example, 2br. You can use decimal numbers.

Font Family

Text font family or typeface. To set a font family, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually.

Font Style

Text font style. To set the font style, click the arrow and select an option from the drop-down menu. The only option available is italic.

Font Weight

Text font weight. To set the font weight, click the arrow and select an option from the drop-down menu. The only option available is bold.

Color

Text color. To set the color, click the field and type a hexa color code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code.

Text Decoration

Decoration added to the text. To set the decoration, click the arrow and select an option from the drop-down menu. The only option available is underline.

Text Alignment

Click the desired alignment option. From left to right: none (no alignment), justified, left, centered or right, depending on whether you want the text not to be aligned, to be aligned with both left and right edges, the left edge, centered between the two edges of the component or aligned with the right edge. You can also click </> and type the code to set the text alignment manually.

Vertical align

Cell content position. Click the field and select an option from the drop-down menu to define the position of the content within the cell. The options available are: bottom, middle, top.

Background Color

Cell background color. To set a color, click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively

Background Gradient

Click the Gradient radio button to set a color gradient for the component's background. Click each of the square icons to open the color picker. In the color picker, select the color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code to form the color gradient. Click Switch direction to invert the order of the colors selected for the gradient. Click Change to horizontal direction or Change to vertical direction to define the gradient's direction in horizontal or vertical position, respectively.

Note

If you set a background color, the gradient won't be applied. Remember to complete one of the two options.

Background Image

Click the Image checkbox to add an image to the component's background. You can use a background image with both the Flat and Gradient background options. Click the Background image field and type the name of the background image, or click the upload icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name.

Resource Origin

Method through which the resource referenced by the component is loaded. Fill in this field if the component selected references a resource, like an image or a video. Click the arrow and select one of the options available in the drop-down menu: choose L (Local) to retrieve the coded content from the local resources or choose H (HTTP) to retrieve the resource content from the Comm Server.

Expires

Indicates the form and validity of the defined HTTP resource's cache. By default, no value is defined. If the field remains empty, the image will be downloaded every time it is used.

To define this attribute, click the field and enter the desired value. Refer to the table below to learn more about the values that can be configured.

session

The image is valid until the app user closes the app or signs out of the app.

Never

The image won't be deleted from the cache.

M:[number of days in a month, separated by commas]

Note

To specify the last day of the month, use the word last instead of the number.

The image is valid up to the day or days specified. It applies for every month of the year. For example: M:1,10, 20, last

W:[days of the week, separated by commas]

Note

To specify the days of the week, use the following expressions (in order): mo, tu, we, th, fr, sa and su.

The image is valid up to the day or days specified. It applies for every week of the month. For example, W: mo, fr, sa.

[amount of hours]h

The image is valid for the number of hours specified, from the moment it loads. For example, 12h.

[number of days]d

The image is valid for the number of days specified, from the moment it loads. For example, 10d.

[amount of seconds]s

The image is valid for the amount of seconds specified, from the moment it loads. For example, 25s.

[YYYYMMddHHmmss]

The image is valid up to the date and time specified (including year, month, day, hours and minutes). Then, the image will load every time until the value is changed. For example, 20151231182056.

Tip

Regardless of this attribute, if the app user deletes the app or its data, cached images will be deleted too.

Padding properties

Space between the cell border and the cell content. Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

On Click

Attribute that defines an event or action to be triggered when clicking the cell. To learn how to set the event or action to be triggered, read the Events and Actions section in Actions.

Position

Position of the cell within the row. Click the field and enter the position number.