Adding the IGGridView to a UIView
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides basic information about creating an instance of the IGGridView™ and displaying data to help you get up and running with this control.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

Adding the IG Framework File

This topic explains the requirements for adding the grid framework file to an Xcode project; a requirement for using the IGGridView™ control.


In this topic


Code Examples

Code examples summary

The following table lists the code examples included in this topic.

Example

Description

Instantiating the IGGridView Code Example

To beginning to use the IGGridView create an instance of it and addit to your view. The code in this example creates the instance by overriding the UIViewController’s viewDidLoad method.

Data Binding Code Example

Once instantiated add you data to the IGGridView. The code example implements the IGGridViewDataSource protocol and demonstrates usage of the required selector methods.



Instantiating the IGGridView – Code Example

Description

To start using the IGGridView, it is necessary first to create an instance of it, and add it to your view.

Code

The code below overrides the UIViewController’s viewDidLoad method to instantiate the IGGridView.

In Objective-C:


-(void)viewDidLoad { [super viewDidLoad];
IGGridView* gridView = [[IGGridView alloc]initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:IGGridViewStyleDefault]; gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self.view addSubview:gridView]; }

In C#:


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

IGGridView gridView = new IGGridView(new RectangleF(0,0, this.View.Frame.Size.Width, this.View.Frame.Size.Height), IGGridViewStyle.IGGridViewStyleDefault);
gridView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
this.View.AddSubview(gridView);
}

Displaying Data – Code Example

Description

Once instantiated, you can add data to an IGGridView following the same patterns as the UITableView control. The connection of data is very similar and adds another dimension to what you can display; namely columns.

Prerequisites

Implementing the IGGridViewDataSource requires that you implement the following three selectors first:

  • -(int) gridView:(IGGridView*)gridView numberOfRowsInSection:(int)section;
  • -(int) numberOfColumnsInGridView:(IGGridView*)gridView;
  • -(IGGridViewCell*)gridView:(IGGridView*)gridView cellAt:(IGCellPath*)path;

Code

To begin the process of displaying data, the UIViewController class needs to implement the IGGridViewDataSource protocol.

In Objective-C:

@interface TestViewController : UIViewController<IGGridViewDataSource>

In C#:

public class DataProvider : IGGridViewDataSource

With the protocol implemented on the UIViewController class, the instantiated IGGridView needs to be told that the UIViewController contains the data source to use.

In Objective-C:

gridView.dataSource = self;

In C#:

grid.WeakDataSource = new DataProvider();

The code example, which follows demonstrates general usage of these three required selectors using hardcoded data. Implementing this code results in the IGGridView displaying a 100 rows by 5 columns grid, where the text assigned to the cell is the cell’s identifying path.

In Objective-C:

-(int)gridView:(IGGridView *)gridView numberOfRowsInSection:(int)section
{
        return 100;
}
-(int)numberOfColumnsInGridView:(IGGridView *)gridView
{
        return 5;
}
-(IGGridViewCell *)gridView:(IGGridView *)gridView cellAt:(IGCellPath *)path
{
        IGGridViewCell* cell = [gridView dequeueReusableCellWithIdentifier:@"CELL"];
        if(cell == nil)
        {
                cell = [[IGGridViewCell alloc]initWithReuseIdentifier:@"CELL"];
        }
        cell.textLabel.text = [NSString stringWithFormat:
                @"Row: %d, Section: %d, Column:%d", 
                path.rowIndex, path.sectionIndex, path.columnIndex];
        return cell;
}

In C#:

public class DataProvider : IGGridViewDataSource
{
  public override int NumberOfRowsInSection (IGGridView grid, int sectionIndex)
  {
   return 100;
  }

  public override int NumberOfColumns (IGGridView gridView)
  {
   return 5;
  }
 
  public override IGGridViewCell CreateCell (IGGridView grid, IGCellPath path)
  {
   IGGridViewCell cell = (IGGridViewCell)grid.DequeueReusableCell("Cell");
   if(cell == null)
    cell = new IGGridViewCell("Cell");

   cell.TextLabel.Text = path.RowIndex + "." + path.SectionIndex + "." + path.ColumnIndex;
  
   return cell;
  }
}

The IGGridView only renders that which is currently in its viewport; anything visible on the screen. Once cells leave the viewport via scrolling, they are retained and queued up by the grid for later reuse. When a cell comes into view, its data source calls the cellAt method, and asks for a new cell to display. You can identify the requested cell via the path property, which contains the section, row index within the section, and the column of the cell within the row. Instead of creating a new cell each time this method is called, you must first call the dequeReusableCellWithIdentifier selector of the IGGridView. The identifier is the string used initially to create the cell. If no cell is returned, then a new cell should be created. However, you must initialize it with the initWithReuseIdentifier method, which is used later to dequeue the cell. Once created, you can prepare the cell to display the content you desire.


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This section serves as an introduction to the IGGridView’s key features and functionalities.