Data Layout Control

  • 3 minutes to read

The DataLayoutControl extends the layout management functionality provided by the Layout Control with tools that help you to:

  • Connect to a data source.
  • Choose target data source fields.
  • Specify editors to edit the chosen fields.
  • Specify the editors' bindable properties.

lc-datalayoutcontrol

Online Video

 

The following tutorial shows how to get started with the DataLayoutControl.

Step 1. Bind to Data Source

First off, drop a DataLayoutControl onto the form and bind the control to a target data source. This can be accomplished in a number of ways:

Once the DataLayoutControl has been bound to a data source, the control remains empty, since no field has been retrieved from the data source as yet.

Step 2. Retrieve Fields

Click the control's smart tag and select Retrieve Fields.

DataLayoutControl-bound-smartTag-RetrieveFieldsCommand

The following wizard will be opened. Its first page allows you to confirm the target data source (or provide another one) and specify binding settings.

DataLayoutControl-Wizard

Click Next to switch to the next page, which allows you to:

  • Select the data source fields to be retrieved from the data source
  • Specify the editors that will be used for editing the data source fields
  • Specify editor properties to create bindings.
  • Specify the layout column count for the created layout. By default, the "Column Count" setting equals 1, and thus all editors will be arranged in one column.

DataLayoutControl-Wizard-page2

Click Finish to generate the layout.

DataLayout_Wizard_Results

Step 3. Replace Editors and Change Bindable Properties

If you need to replace a generated editor with another one, you can do this using one of two approaches.

  • Click the generated editor, invoke its smart tag and select a new editor in the Change Editor Type dropdown.

    datalayoutcontrol-changeeditortype-viasmarttag.gif

  • Click the DataLayoutControl's smart tag and select Edit Fields.

    DataLayoutControl-smartTag-EditFieldsCommand.png

    In the invoked dialog, locate the target field and change the editor type in the second column.

    datalayoutcontrol-changeeditortype-viaBindingManager.gif

    This dialog also allows you to specify a custom bindable property if the default one does not satisfy your needs.

    datalayoutcontrol-changeBindableProperty-viaBindingManager.gif

Step 4. Customize Layout

After the initial layout has been created, you can customize it as needed.

  • Add new controls
  • Delete controls (by selecting them and pressing the DELETE key).
  • Rearrange and resize layout items using drag-and-drop.
  • Combine items into regular and tabbed groups.
  • Modify item properties in the Properties window.

DataLayoutControl-Customization.gif

For more information on design-time and runtime customizations, see the Customization Capabilities and Customizing a Layout In Code topics.

See Also