Configuring a Custom Cell
Send Feedback

Glossary Item Box

Topic Overview


This topic provides a conceptual overview, with code, on creating and configuring a custom cell on the IGGridView™ control.

Required background

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



Adding the IG Framework File

This topic explains how to add the grid framework file to the project.

In this topic


Custom cell summary

The IGGridView is extremely flexible; able to display an infinite number of layouts. This is possible by creating a derived IGGridViewCell for customization. When doing so, override the setupSize method (recommended). Use this method to setup and size your content.

  • -(void)setupSize:(CGSize)size;

Useful for cleanup, the optional and configurable cellDetached method fires whenever a cell recycles.

  • -(void)cellDetached;

Creating a Custom Cell – Code Example


The following code derives from IGGridViewCell and overrides setupSize to size its content. This example uses the initWithReuseIdentifier method to initialize the cell’s content.


In Objective-C:

@interface SampleCell : IGGridViewCell
    UIImageView* _rootImage;
-(void)setImage:(NSString*)imgName withTitle:(NSString*)title;
@implementation SampleCell
-(id)initWithReuseIdentifier:(NSString *)identifier
    self = [super initWithReuseIdentifier:identifier];
        _rootImage = [[UIImageView alloc]init];
        _rootImage.contentMode = UIViewContentModeScaleAspectFit;
        _textLabel.textAlignment = UITextAlignmentCenter;
        _textLabel.textColor = [UIColor whiteColor];
        _textLabel.font = [UIFont fontWithName:@"Marker Felt" size:14];
        [self addSubview:_rootImage];
        self.clipsToBounds = YES;
    return self;
-(void)setImage:(NSString*)imgName withTitle:(NSString*)title
    UIImage* normalImage = [UIImage imageNamed:imgName];
       _rootImage.image = normalImage;
    _textLabel.text = title;
    _rootImage.frame = CGRectMake(10, 5, size.width - 20, size.height - 30);
    _textLabel.frame = CGRectMake(10, size.height - 20, size.width - 20, 15); 

In C#:

public class SampleCell :IGGridViewCell
  UIImageView _rootImage;

  public SampleCell(string identifier) :base (identifier)
   _rootImage = new UIImageView();

   this.TextLabel.TextAlignment = UITextAlignment.Center;
   this.TextLabel.TextColor = UIColor.White;
   this.TextLabel.Font = UIFont.FromName("Marker Felt", 14);

   this.ClipsToBounds = true;
  public void SetImage(string imageName, string title)
   _rootImage.Image = new UIImage(imageName);
   this.TextLabel.Text = title;

  public override void SetupSize (SizeF size)
   _rootImage.Frame = new RectangleF(10, 5, size.Width - 20, size.Height - 30);
   this.TextLabel.Frame = new RectangleF(10, size.Height - 20, size.Width - 20, 15);


The implementation of the custom IGGridViewCell involves creating an instance of the cell in the IGGridViewDataSource’s cellAt method.

In Objective-C:

  SampleCell* cell = [gridView dequeueReusableCellWithIdentifier:@"cell"];
    if(cell == nil)
        cell = [[SampleCell alloc]initWithReuseIndentifier:@"cell"];
    NavigationItem* item = [self resolveDataObjectForRow:path];
    [cell setImage:item.imgPath withTitle:item.displayName];
    return cell;

In C#:

   SampleCell cell = (IGGridViewCell)grid.DequeueReusableCell("Cell");
   if(cell == null)
    cell = new SampleCell("Cell");
   cell.SetImage("imgName", path.RowIndex.ToString());
   return cell;

Related Content


The following topics provide additional information related to this topic.



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

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