Blog

Back to Blog

ToDo List Grids Demo

Posted on 8 Jul 2013 Written by Andrew Polkinghorn

ShinobiGrids 2.0 brought in quite a few changes to previous releases, so let’s get stuck in and see what this library can do! The following blog post, part of our series helping you to recalibrate your knowledge of ShinobiGrids, will explain how to implement editable cells, column & row reordering and sections, using a todo list app. It will also detail how different parts of the grid were styled.

You can find the finished project on GitHub, or download the zip. Download it, have a play, and then read on to find out how we did it!

 Screen Shot 2013-05-21 At 15.48.51

Editing Cells 

Can making grid cells editable be as simple as setting a single property… Of course it can!

You can set a grid’s single or double tap events to the SDataGridEventEdit enumerator allowing you to edit your cells depending on what event you’ve assigned to it. In this example the Title and Description columns are editable via the double tap event. The following code from the example project shows how to assign a grid’s double tap event to the SDataGridEventEdit enumerator:

grid.doubleTapEventMask = SDataGridEventEdit;

If you want to go even further and access the cell after once you’ve finished editing a cell you can override the SDataGrid delegate method “– shinobiDataGrid:didFinishEditingCellAtCoordinate:”.  You can use the coordinate parameter to access the cell you’ve just edited if you want to do further customisations. 

Reordering Rows & Columns

Reordering rows and columns can’t also be as simple as setting a single property… Of course it can! 

To reorder rows you simply set your grids “canReorderRows” property to YES as shown in the code below:

_grid.canReorderRows = YES;

To reorder columns you can set the “canReorderViaLongPress” property on each on your grid’s columns that you want to be able to reorder. Setting this property is shown in the code below: 

descriptionColumn.canReorderViaLongPress = YES;

Sections

Can implementing sections be as simple as setting a single property… Unfortunately not. But it’s still pretty simple! 

You must implement the following methods in your grid’s datasource:

  • -numberOfSectionsInShinobiDataGrid:
  • -ShinobiDataGrid:numberOfRowsInSection:
  • -shinobiGrid:viewForHeaderInSection:inFrame:

In the first method you must return the number of sections you want in your grid. In this example that method returns three, a section for high, normal and low priorities.  

-(NSUInteger)numberOfSectionsInShinobiDataGrid:(ShinobiDataGrid *)grid {

    return [_data sections].count;

}

The second method is always required when making your own datasource and returns how many rows you want in each section. You can use the series index parameter to determine which series you are returning the number of rows for. In this example I have three arrays in my data which I use the section index to choose which array I use.

-(NSUInteger)shinobiDataGrid:(ShinobiDataGrid *)grid numberOfRowsInSection:(NSInteger)sectionIndex {

    if(sectionIndex == 0){

        return [_data highPriorityList].count;

    }else if(sectionIndex == 1) {

        return [_data normalPriorityList].count;

    }

    return [_data lowPriorityList].count;

} 

The last method gives you the frame of the section header so you can return a view that gets added on to the section’s header view. In this example I create a UILabel with the frame passed in and set it’s text and background color depending on the section index parameter. 

-(UIView *)shinobiDataGrid:(ShinobiDataGrid *)grid viewForHeaderInSection:(NSInteger)section inFrame:(CGRect)frame {

    UILabel *sectionLabel = [[UILabel alloc] initWithFrame:frame];

    sectionLabel.textColor = [UIColor whiteColor];

    sectionLabel.textAlignment = NSTextAlignmentCenter;

    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){

        sectionLabel.font = [UIFont fontWithName:@"Gill Sans" size:20.0f];

    } else {

        sectionLabel.font = [UIFont fontWithName:@"Gill Sans" size:15.0f];

    }

    sectionLabel.text = [_data sections][section];

    if(section==0){

        sectionLabel.backgroundColor = [UIColor colorWithRed:190.f/255 green:0.f/255 blue:0.f/255 alpha:1];

    } else if (section == 1){

        sectionLabel.backgroundColor = [UIColor colorWithRed:225.f/255 green:170.f/255 blue:17.f/255 alpha:1];

    }else {

        sectionLabel.backgroundColor = [UIColor colorWithRed:0.f/255 green:100.f/255 blue:0.f/255 alpha:1];

    }

    return sectionLabel;

} 

There is another method you can use if you just wanted to give the section header a string which is displayed as the title of the section. This datasource method is called “-shinobiDataGrid:titleForHeaderInSection:” and you can use the series index parameter to determine which series you are returning the title for similar to the above example with the UILabel.

Styling

Styling your grid has never been easier than with this new release. In this example I set four grid style objects and two grid properties to set the complete style of the grid. The four style objects are all SDataGridCellStyle objects which style normal cells, cells on alternate rows,  selected cells and column header cells. The four style objects are then assigned to the grid using the following properties:

  •  _grid.defaultCellStyleForRows
  • _grid.defaultCellStyleForAlternateRows
  • _grid.defaultCellStyleForSelectedRows
  • _grid.defaultCellStyleForHeaderRow

Below shows an example of how to implement one of the SDataGridCellStyle objects. The other SDataGridCellStyle objects are created and used in the exact same way except they have different background colors and fonts.

SDataGridCellStyle *cellStyle = [SDataGridCellStyle new];

cellStyle.backgroundColor = [UIColor colorWithRed:70.f/255 green:90.f/255 blue:150.f/255 alpha:1];

_grid.defaultCellStyleForRows = cellStyle;

The two grid properties i set are used to style the grid lines. I set grid properties defaultGridLineStyle.width and defaultGridLineStyle.color to determine the grid lines width and colour. Below shows the code from the ToDoList example where I set the width to 1 and color to orange:

_grid.defaultGridLineStyle.width = 1.0f;

_grid.defaultGridLineStyle.color = [UIColor orangeColor]; 

And there you have it… a fully functioning ToDo List using a ShinobiGrid featuring editable cells, reorderable rows & columns with sections. Here is one I made earlier.

Back to Blog