Quantcast
Viewing all articles
Browse latest Browse all 7205

How to control the detail view layout on the web to avoid enormous gaps between the view item caption and the editor

Scenario:

When you have properties in your business class with captions of significantly different lengths, the detail view often looks awkward on the web. This happens because the built-in WebLayoutManager is relatively simple and doesn't support many layout properties that the WinLayoutManager supports (because of the underlying powerful XtraLayout control). Specifically, the item caption length of layout items on the web is calculated as a maximum of all visible items on the detail view. As a result, we have too large a gap between a short caption and the editor when there are long captions.

Image may be NSFW.
Clik here to view.


Solution:

This example demonstrates a possible solution to this common issue by introducing additional properties in the layout group and layout item model nodes.

We create a new model interface that extends the IModelLayoutGroup interface (similar to IModelWinLayoutGroup) with the additional TextAlignMode property. Another model interface extends the IModelLayoutViewItem interface (similar to IModelWinLayoutItem) in the same manner. These properties allow you specify different modes of the caption width calculation for individual items and items in each group separately. Refer to the TextAlignModeGroup and TextAlignModeItem enumerations documentation for options description. These new model interfaces are registered in the web module.

We create a custom layout manager derived from the WebLayoutManager class with the LayoutItem method overridden. In this method, the CaptionWidth is calculated according to new options specified in the item and parent groups it belongs to. The custom layout manager is instantiated in the overridden CreateLayoutManagerCore method of the WebApplication.

Now, the detail view layout can be fine tuned via the Model Editor in the web module in a similar manner as you would in the WinForms application model.

Image may be NSFW.
Clik here to view.

Note how some caption widths are set to local minimums, some set to a a common minimum calculated in the owner or outer group and some widths are calculated globally.

See also:
Extend and Customize the Application Model in Code

 


Viewing all articles
Browse latest Browse all 7205

Trending Articles