ListView: Getting Started

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

Prerequisites

This article assumes that you have followed the Downloading UI for iOS, Installing UI for iOS and Setting Up the project steps from the common Getting Started article.

Setting up TKListView

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 Telerik UI 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.

In the viewDidLoad method of your view controller prepare a small array of sample data to be presented in TKListView.

_sampleArrayOfStrings =@[@"Kristina Wolfe",@"Freda Curtis",@"Jeffery Francis",@"Eva Lawson",@"Emmett Santos", @"Theresa    Bryan", @"Jenny Fuller", @"Terrell Norris", @"Eric Wheeler", @"Julius Clayton", @"Alfredo Thornton", @"Roberto Romero",@"Orlando Mathis",@"Eduardo Thomas",@"Harry Douglas"];
let sampleArrayOfStrings = ["Kristina Wolfe","Freda Curtis","Jeffery Francis","Eva Lawson","Emmett Santos", "Theresa Bryan", "Jenny Fuller", "Terrell Norris", "Eric Wheeler", "Julius Clayton", "Alfredo Thornton", "Roberto Romero","Orlando Mathis","Eduardo Thomas","Harry Douglas"]
simpleArrayOfStrings = new NSMutableArray();
simpleArrayOfStrings.Add (new NSString ("Kristina Wolfe"));
simpleArrayOfStrings.Add (new NSString ("Freda Curtis"));
simpleArrayOfStrings.Add (new NSString ("Eva Lawson"));
simpleArrayOfStrings.Add (new NSString ("Emmett Santos"));
simpleArrayOfStrings.Add (new NSString ("Theresa Bryan"));
simpleArrayOfStrings.Add (new NSString ("Jenny Fuller"));
simpleArrayOfStrings.Add (new NSString ("Terrell Norris"));
simpleArrayOfStrings.Add (new NSString ("Eric Wheeler"));
simpleArrayOfStrings.Add (new NSString ("Julius Clayton"));
simpleArrayOfStrings.Add (new NSString ("Harry Douglas"));
simpleArrayOfStrings.Add (new NSString ("Eduardo Thomas"));
simpleArrayOfStrings.Add (new NSString ("Orlando Mathis"));
simpleArrayOfStrings.Add (new NSString ("Alfredo Thornton"));

Next, create an instance of TKDataSource. This components is used to feed our data to TKListView.

_dataSource = [[TKDataSource alloc] initWithArray:_sampleArrayOfStrings];
let dataSource = TKDataSource()
dataSource.ItemSource = simpleArrayOfStrings;

Then create a new instance of TKListView and add it as a subview of the ViewController's main view. The autoresizingMask property is set in order to allow correct resizing of the list view when the device is rotated in landscape mode.

TKListView *_listView = [[TKListView alloc] initWithFrame: CGRectMake(0, 0, self.view.bounds.size.width,self.view.bounds.size.height-20)];
_listView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_listView.dataSource = _dataSource;
[self.view addSubview:_listView];
let listView = TKListView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.size.width,height: self.view.bounds.size.height-20))
listView.dataSource = dataSource
self.view.addSubview(listView)
TKListView listView = new TKListView ();
listView.Frame = new CGRect (0, 0, this.View.Bounds.Size.Width,this.View.Bounds.Size.Height-20);
listView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
listView.WeakDataSource = dataSource;
this.View.AddSubview(listView);

So far we have got the following view:

Now lets enable multiple selection:

_listView.allowsMultipleSelection = YES;
listView.allowsMultipleSelection = true
listView.AllowsMultipleSelection = true;

To see the result, after running this sample, select to select a few items:

Adding a single line of code should allow the user to reorder items by dragging a handle.

_listView.allowsCellReorder = YES;
listView.allowsCellReorder = true
listView.AllowsCellReorder = true;