DataForm: Getting Started

This quick start tutorial demonstrates how to create a simple iOS application with TKDataForm.

Setting up TKDataForm

Now that our project is created and the TelerikUI.framework is added, we can start referencing and using the TelerikUI types:

Open your ViewController.m file and add a reference to the chart header file:

#import <TelerikUI/TelerikUI.h>

Note that starting with Xcode 6 Apple doesn't generate the precompiled headers file automatically. That is why you should add import the UIKit framework before importing TelerikUI:

#import <UIKit/UIKit.h>

If you are writing Swift, add the same line in your bridging header.

If you are using Xamarin, add a reference to TelerikUI.dll in your project and use the using directive:

using TelerikUI;

First you should create a bussiness object that will be displayed and edited by TKDataForm. Lets create a class called PersonalInfo

public class PersonalInfo : NSObject
    public string Server { get; set;}

    public string Details { get; set;}

    public string Account { get; set;}

    public bool Secure { get; set;}

    public string Password { get; set;}

    public int EncryptionLevel { get; set;}

    public bool SendAllTraffic { get; set;}

    public int InfoProtocol{ get; set;}

    public PersonalInfo ()
        this.InfoProtocol = 0;
        this.Details = "";
        this.Server = "";
        this.Secure = false;
        this.Password = "";
        this.EncryptionLevel = 0;
        this.Account = "";
        this.SendAllTraffic = true;

The TKDataForm object should be created in viewDidLoad method:

this.dataForm = new TKDataForm (this.View.Bounds);
this.dataForm.Delegate = this.dataFormDelegate;
this.View.AddSubview (this.dataForm);

You should adopt TKDataFormDelegate and implement its dataForm:updateEditor:forProperty: method in order to customize the editors:

public override void UpdateEditor (TKDataForm dataForm, TKDataFormEditor editor, TKEntityProperty property)
    TKGridLayoutCellDefinition feedbackDef = editor.GridLayout.DefinitionForView (editor.FeedbackLabel);
    editor.GridLayout.SetHeight (0, feedbackDef.Row.Int32Value);

    if (property.Name == "InfoProtocol") {
        editor.Style.TextLabelDisplayMode = TKDataFormEditorTextLabelDisplayMode.Hidden;
        TKGridLayoutCellDefinition textLabelDef = editor.GridLayout.DefinitionForView (editor.TextLabel);
        editor.GridLayout.SetWidth (0, textLabelDef.Column.Int32Value);

    if (editor.IsKindOfClass (new Class(typeof(TKDataFormTextFieldEditor))) && !(property.Name.Equals("Password"))) {
        property.HintText = "Required";

Setting up TKDataForm with TKDataFormViewController

In master/detail scenario the content of an editor will open on its own screen. It this case you should use TKDataFormViewController. This view controller contains a TKDataForm and adopts its TKDataFormDelegate and TKDataFormDataSouece protocols. TKDataFormOptionsEditor is used to display option lists on its own screen and it requires the usage of TKDataFormViewController.

We should create a view controller that inherits from TKDataFormViewController. For demonstration purposes we will be using the PersonalInfo class from the snippet above.

public class DataFormGettingStarted : TKDataFormViewController

TKDataFormViewController does not contain a navigation controller. You should provide one before using the TKDataFormViewController.

The setup of the TKDataForm is done in the viewDidLoad of the inheriting class. since the TKDataformViewController provides ready-to-use instance of the TKDataForm, you can used it and just setup the visual appereance and data properties.

public override void ViewDidLoad()
    base.ViewDidLoad ();

    this.personalInfo = new PersonalInfo ();
    this.dataSource = new TKDataFormEntityDataSourceHelper (this.personalInfo);
    this.dataFormDelegate = new GettingStartedDataFormDelegate ();

    this.dataSource["Password"].HintText = "Ask every time";
    this.dataSource ["Password"].EditorClass = new Class (typeof(TKDataFormPasswordEditor));
    this.dataSource["InfoProtocol"].ValuesProvider = NSArray.FromStrings(new string[] { "L2TP", "PPTP", "IPSec" });
    this.dataSource["EncryptionLevel"].ValuesProvider = NSArray.FromStrings(new string[] { "FIPS Compliant", "High", "Client Compatible", "Low" });

    this.dataSource.AddGroup(" ", new string[] { "InfoProtocol" });
    this.dataSource.AddGroup (" ", new string[] {

    this.DataForm.BackgroundColor = new UIColor (0.937f, 0.937f, 0.960f, 1.0f);
    this.DataForm.GroupSpacing = 20;
    this.DataForm.Delegate = this.dataFormDelegate;
    this.DataForm.WeakDataSource = this.dataSource.NativeObject;