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

Position DataForm editors on new lines on iOS


Product Version 2018.3.1109
Product DataForm for Xamarin Cross-Platform


Currently DataForm is designed to follow the native look ∓ feel of the platform, so the editors containing a header and an input field are arranged differently on iOS and Android. You could rearrange the components in each editor in DataForm on iOS through a custom renderer.

You would need to create a class that inherits from DataFormRenderer​ and override its UpdateEditor method - in it you could get a reference to each of the editors you're using ( you could check the available editors and their counterparts on iOS here and update their layout per your needs.

In addition, you would need to override the method for setting the height of the editors that is defined through a DataFormDelegate.


Let's have the following sample DataForm definition:

<telerikInput:RadDataForm x:Name="dataForm">
        <local:SourceItem />

and a sample SourceItem:

public class SourceItem
    [DisplayOptions(Header = "Name")]
    public string Name { get; set; }

    [DisplayOptions(Header = "Age")]
    public int Age { get; set; }

    [DisplayOptions(Header = "Weight (kg)")]
    public double Weight { get; set; }

    [DisplayOptions(Header = "Height (cm)")]
    public int Height { get; set; }

with the editors defined like this:

dataForm.RegisterEditor(nameof(SourceItem.Age), EditorType.IntegerEditor);
dataForm.RegisterEditor(nameof(SourceItem.Name), EditorType.TextEditor);
dataForm.RegisterEditor(nameof(SourceItem.Weight), EditorType.DecimalEditor);
dataForm.RegisterEditor(nameof(SourceItem.Height), EditorType.IntegerEditor);

The snippet below shows how you would need to implement the CustomDataFormRenderer and UpdateEditor method:

public class CustomDataFormRenderer : DataFormRenderer
    protected override TKDataFormDelegate GetDataFormDelegate(TKDataForm form)
        return new IOSDataFormDelegate(this);
    public class IOSDataFormDelegate : DataFormDelegate
        public IOSDataFormDelegate(DataFormRenderer renderer) : base(renderer)
        public override nfloat HeightForEditor(TKDataForm dataForm, uint groupIndex, uint editorIndex)
            return 70;
    protected override void UpdateEditor(TKDataFormEditor editor, IEntityProperty property)
        if (editor is TKDataFormTextFieldEditor)
            var editorDef = editor.GridLayout.Definitions[4];
            editorDef.Row = 1;
            editorDef.Column = 1;
            editorDef.ColumnSpan = 3;

            var editorLabelDef = editor.GridLayout.Definitions[1];
            editorLabelDef.Row = 0;
            editorLabelDef.Column = 1;
            editorLabelDef.ColumnSpan = 3;

            var feedbackDef = editor.GridLayout.Definitions[3];
            feedbackDef.Row = 2;
            feedbackDef.ColumnSpan = 3;

        base.UpdateEditor(editor, property);

Here is the result:



In this article