Creating a custom column for the IGGridView (ObjectiveC / Xamarin.iOS)

Introduction

Like most developers, I don't just write for my employer, but I write for myself and projects that I want to do.   When I can, I like to use the product I am working on to enhance my projects.  It allows me to take advantage of the work I am doing and it dog foods my efforts. I am constantly amazed on how many product enhancements my product teams find by just using our own things.   

This article on custom columns is based one of these labor of love projects (Dun duun- Law & Order bars clanging).

TL;DR - Making a custom column for the IGGridView is easy, check out the sample (Objective - C)(Xamarin-iOS).  Xamarin-IOS sample in a few days.

Creating a custom column

The IGGridView is designed to show all types of data.  Out of the box we show normal text data, we have a column to display images, we even have a column that can show the object that is being bound to.  We understood however that developers are going to want to visualize their data in other ways too, so we tried to make the process of making a custom column for your data as painless as possible.

Inheriting the IGGridViewColumnDefinition

The first custom column in this example doesn't need a custom cell to display the data, we are just going to customize how the data gets formatted going into the default text cell.  

If we take a look at the CurrentRecordColumnDefinition.m we can see that the is only one method being overridden.   -(IGGridViewCell*)gridView: createCell: usingDataSource: is called as the grid view goes to draw each cell.  In this case the column definition isn't using a custom cell type so it's doing the work that needs to be done, and then modifies the default cell's textLabel appropriately to show the data.   This is probably the simplest custom column that could be set up as it is just changing the text being assigned.  This would be appropriate for specialized format type columns.

// in this case we want to format the data going into the underlying textLabel and assign it to the textLabel.attributedText.
-(IGGridViewCell *)gridView:(IGGridView *)gridView createCell:(IGCellPath *)path usingDataSource:(IGGridViewDataSourceHelper *)dataSource
{
// first we see if we can grab a cell from the recycler
  IGGridViewCell* cell = (IGGridViewCell*)[gridView dequeueReusableCellWithIdentifier:@"CurrentRecordCell"];
  if (!cell)
  {
    // nope, make a new one
    cell = [[IGGridViewCell alloc]initWithReuseIdentifier:@"CurrentRecordCell"];
  }
// get the data object that is going to be associated with the row, and send it to a method to generate the text we want to display.
TeamSeasonData* data = [dataSource resolveDataObjectForRow:path];
// set the textLabel.attributedText. Since we aren't making a custom cell we are using default IGGridVeiwCell object and just modifying what is being shown.

cell.textLabel.attributedText = [self generateText: data];
return cell;
}

Custom Column Definition with Custom Cell

The IGGridView also allows the custom columns to show custom cells. With this we are able to show almost anything in a cell. So for this example we added a IGSparkLineView to the cell.

Similar to the first case we will define a custom column definition and override  -(IGGridViewCell*)gridView: createCell: usingDataSource:.  In this case the code is extremely similar to the previous code.   The difference is going to that since we aren't using the default cell, we need to tell the custom cell to set itself up.

// tell the cell to set itself up with the data object
[cell setupCell:[dataSource resolveDataObjectForRow:path]];

The custom cell will inherit from IGGridViewCell. As an IGGridViewCell is just a UIView we will be able to set up the layout just like any other UIView.  So during the init phase we create a sparkline and set it to the cell.  During the setup method call we make a datasource helper and bind it to the sparkline.

-(id)initWithReuseIdentifier:(NSString *)identifier
{
self = [super initWithReuseIdentifier:identifier];
if (self)
{
self.sparkGraph = [[IGSparklineView alloc]init];
self.sparkGraph.displayType = IGSparklineDisplayTypeWinLoss;
self.sparkGraph.lineThickness = 2.0;
[self addSubview:self.sparkGraph];
}
return self;
}

-(void)setupSize:(CGSize)size
{
int padding = 5;
self.sparkGraph.frame = CGRectMake(0, padding, size.width, size.height-(padding*2));
}

-(void)setupCell:(TeamSeasonData *)data
{
_helper = [[IGSparklineViewDataSourceHelper alloc]initWithValues:data.recordData];
self.sparkGraph.dataSource = _helper;
}

With that little bit of code, we have created two custom columns to enhance how we display data in the IGGridView.  

So if you are looking to make a custom column please download the sample and review it.  It requires the NucliOS frameworks, so you may need to download the trial versions which can be downloaded from the NucliOS product page.

If you have any questions, please visit the NucliOS Forums and ask away.

Sample of custom column for NucliOS IGGridView (Objective-C)

Sample of custom column for NucliOS IGGridView (Xamarin-iOS)

** This article has been modified to include the Xamarin-iOS sample.

By Darrell Kress