New to Telerik UI for WinUI? Download free 30-day trial

Data Field

The data fields of RadDataBar are the rows representing the properties of the underlying data object.

Several different types of data field implementations are available. Each data field implementation provides a different editor.

  • DataFormDataField: Used for editing string properties. The editor is a TextBox. Any data type that doesn't have a dedicated editor will use this data field type.
  • DataFormCheckBoxData: Used for editing bool properties. The editor is a CheckBox control.
  • DataFormComboBoxField: Used for editing enum values. The editor is a ComboBox populated with a collection containing all values from the enum.
  • DataFormDateField: Used for editing properties of type DateTime. The editor is a RadDateTimePicker.

A data field is auto-generated for each property in the current data item and it contains a label showing the property name and an editor that allows changing the value. Based on the property's data type the proper data field type is created.

Modifying Auto-Generated Data Fields

To access the auto-generated fields, you can use the AutoGeneratingField event. The event arguments provide access to the currently generated data field object which can be adjusted accordingly to your needs.

Example 1: Using the AutoGeneratingField event

private void dataForm_AutoGeneratingField(object sender, Telerik.UI.Xaml.Controls.Data.DataForm.AutoGeneratingFieldEventArgs e) 
{ 
    if (e.PropertyName == "FirstName") 
    { 
        e.DataField.Label = "First Name"; 
    } 
} 
The Cancel property of the event arguments can be used to avoid the creation of a specific data field.

Example 2: Canceling data field creation

private void dataForm_AutoGeneratingField(object sender, Telerik.UI.Xaml.Controls.Data.DataForm.AutoGeneratingFieldEventArgs e) 
{ 
    if (e.PropertyName == "FirstName") 
    { 
        e.Cancel = true; 
    } 
} 

Defining Data Fields Manually

To have more control over the created data fields, you can disable the auto-generation and define them manually. To do so, set the AutoGenerateFields property of RadDataForm to false and then use the ReadOnlyTemplate and EditTemplate properties to add the custom data field elements.

Example 3: Manual data fields definition

<telerik:RadDataForm AutoGenerateFields="False"> 
    <telerik:RadDataForm.ReadOnlyTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <telerik:DataFormDataField Label="Name" LabelPosition="Beside" IsReadOnly="True" DataMemberBinding="{Binding Name, Mode=TwoWay}" /> 
                <telerik:DataFormCheckBoxField Label="Checked" IsReadOnly="True" LabelPosition="Beside" DataMemberBinding="{Binding IsChecked, Mode=TwoWay}" /> 
                <telerik:DataFormDateField Label="Date" IsReadOnly="True" LabelPosition="Beside" DataMemberBinding="{Binding Date, Mode=TwoWay}" /> 
            </StackPanel> 
        </DataTemplate> 
    </telerik:RadDataForm.ReadOnlyTemplate> 
    <telerik:RadDataForm.EditTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <telerik:DataFormDataField Label="Name" LabelPosition="Beside" DataMemberBinding="{Binding Name, Mode=TwoWay}" /> 
                <telerik:DataFormCheckBoxField Label="Is Checked" LabelPosition="Beside" DataMemberBinding="{Binding IsChecked, Mode=TwoWay}" /> 
                <telerik:DataFormDateField Label="Date" LabelPosition="Beside" DataMemberBinding="{Binding Date, Mode=TwoWay}" /> 
            </StackPanel> 
        </DataTemplate> 
    </telerik:RadDataForm.EditTemplate> 
</telerik:RadDataForm> 

The binding to the model property behind each field is created with the DataMemberBinding property of the data field.

To mark a data field as read-only, set its IsReadOnly property.

Setting Label Position

The default position of the data field labels is above the editor. To change this, set the LabelPosition property of the DataFormDataField element to Beside.

Example 4: Setting LabelPosition

<telerik:DataFormDataField DataMemberBinding="{Binding Name, Mode=TwoWay}" Label="Name" LabelPosition="Beside"/> 

Showing Data Field Description

Each data field object exposes a Description property that is used to provide additional information about the property. The information is shown in a tooltip that appears on mouse over a question mark icon next to the data field's editor.

Example 4: Setting LabelPosition

<telerik:DataFormDataField DataMemberBinding="{Binding Name, Mode=TwoWay}" Description="This is the data field description."/> 
In this article
Not finding the help you need?