Setting the GUI of List style

Home > Basic examples > Example 12

Explanation

This is an example of using dx5.create function to set GUI style at the time of component creation to 'list'.

The component's style uses the setUIStyle function.

// You must pass a JSON object whose has style properties.
dx.setUIStyle({ ... });

// Example 
dx.setUIStyle({
	headerVisible: true, // or false
	statusBarVisible: true, // or false
	borderVisible: true, // or false
	...
});

The technology for drawing the component screen uses SVG technology. SVG can have slightly different rendering results for different browsers, and because it is based on vector graphics, it is not easy to handle GUI layouts in pixel units. Therefore, it is difficult to compensate for the difference between the line thickness in the product level.

Example

Default layout style

The List style is the most used GUI in the Multi-module, and can hide the header, status bar, and check-box columns.

Setting header / status bar

You can apply a gradient to the header color.

Setting background

The background can be set to image.

Copy above address and set the path. Note) The background image may not be hidden by items. Please remove some items to test.

Setting fonts

Setting buttons(open, download)