Configuring Grid Data Entry
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides an introduction to grid editing on the IGGridView™ control and demonstrates how to configure them using a code example.

In this topic


Introduction

Grid editing summary

Editing cells on the grid is handled through the IGGridViewDataSourceHelper. To turn on editing, simply set the allowEditing property found on the IGGridViewDataSourceHelper to YES. Double tapping any editable cell after enabling this property rotates the cell into edit mode.

Note: IGGridViewColumnDefintion and IGGridViewValueColumnDefintion both support editing, however IGGridViewImageColumnDefintion does not.

You can customize the animation sequence of a cell entering or exiting edit mode by setting the following properties found on the IGGridViewDataSourceHelper.

  • editingTransitionDuration – gets or sets the time, in seconds, it takes for a cell to animate into edit mode or exit edit mode
  • editingStartTransitionOptions - gets or sets the transition for a cell to enter edit mode
  • editingEndTransitionOptions - gets or sets the transition for a cell to exit edit mode
Note: The UIViewAnimationOptions enumerations for the editingStartTransitionOptions and editingEndTransitionOptions properties can be found in Apple’s documentation.

Use the editingDelegate property on the IGGridViewDataSourceHelper, which is of type IGGridViewDataSourceHelperEditingDelegate, to be notified when an editor is about to be displayed or dismissed. You can use these methods to do things like setting a default editing value or tweaking a value before storing the value in your underlying data.

Editing is mainly a column level feature. To disable editing for a particular column, set the editable property to NO on IGGridViewColumnDefinition.

Currently UITextField is the only built in editor supported. To use a different editor, you will have to create a custom column definition derived from one of the IGGridViewColumnDefintion classes. Then you will need to override the following methods:

  • -(void)gridView:(IGGridView*)gridView displayEditorForCell:(IGCellPath*)path usingDataSource:(IGGridViewDataSourceHelper*)dataSource
  • -(void)gridView:(IGGridView *)gridView removeEditorForCell:(IGCellPath *)path usingDataSource:(IGGridViewDataSourceHelper *)dataSource isCellStillVisible:(BOOL)cellVisible isAnotherCellEnteringEditMode:(BOOL)anotherCellEnteringEditMode

The column is responsible for displaying the editor, raising the delegate methods of the data source and optionally choosing whether or not to use the data source helper’s animation settings. For example, you can use the following lines of code to display and remove the editor:

  • Show - [UIView transitionFromView:cell.textLabel toView:field duration:dsh.editingTransitionDuration options:dsh.editingStartTransitionOptions completion:nil];
  • Hide - [UIView transitionFromView:_editField toView:cell.textLabel duration:duration options:options completion:nil];

You will need to notify the grid when using a custom editor in any grid that requires a keyboard. Failure to notify the grid could cause cells nearer to the bottom of the device screen to become covered by the keyboard and obscures what the user is typing. The IGGridView has two methods that allow you to control this behavior.

  • registerKeyboardForCell:
  • unregisterKeyboard:

The IGGridView method’s registerKeyboardForCell: and unregisterKeyboard: are helper methods that tell the grid to listen for a keyboard. By registering the cell, the grid will automatically make sure the cell being edited is scrolled above the keyboard. It will also update the grid’s contentInset, repositioning the bottom of the grid is at the top of the keyboard.

When finished editing, you should unregister the keyboard. By doing this the grid will gracefully animate back into place by adjusting the contentInset. The unregisterKeyboard: method accepts a BOOL parameter, which is a flag that you can set if your cell is exiting edit mode and another cell is entering edit mode. Setting this parameter flag to NO allows the grid to stay at the current contentInset position.

Finally, cells can be programmatically placed into and out of edit mode by using one of the following methods found in the IGGridViewDataSourceHelper class.

  • beginEditing:inGrid:
  • endEditing

Configuring Grid Editing – Code Example

Description

The code below creates an instance of the IGGridView with one column and five rows that allow cell editing.

Prerequisites

This code example requires the inclusion of the IG framework; details about how to add this framework are available in the Adding the IG Framework File topic.

Code

In Objective-C:

IGGridViewDataSourceHelper *dsh;
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    NSArray *data = [[NSArray alloc] initWithObjects:@"One", @"Two", @"Three", @"Four", @"Five", nil];
    CGRect gridFrame = CGRectInset(self.view.bounds, 10, 10);
    IGGridView *gridView = [[IGGridView alloc] initWithFrame:gridFrame style:IGGridViewStyleDefault];
    gridView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    gridView.headerHeight = 0;
    gridView.emptyRows = NO;
    [self.view addSubview:gridView];
    dsh = [[IGGridViewDataSourceHelper alloc] init];
    dsh.data = data;
    dsh.allowEditing = YES;
    gridView.dataSource = dsh;
}

In C#:

public override void ViewDidLoad ()
{
      base.ViewDidLoad ();
      
      this.View.BackgroundColor = UIColor.White;
      List<NSObject> data = new List<NSObject> ();
      data.Add (new NSString("One"));
      data.Add (new NSString("Two"));
      data.Add (new NSString("Three"));
      data.Add (new NSString("Four"));
      data.Add (new NSString("Five"));
      IGGridView gridView = new IGGridView (this.View.Bounds, IGGridViewStyle.IGGridViewStyleDefault);
      gridView.Frame.Inflate (-10, -10);
      gridView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
      gridView.HeaderHeight = 0;
      gridView.EmptyRows = false;
      this.View.Add (gridView);
      IGGridViewDataSourceHelper dsh = new IGGridViewDataSourceHelper ();
      dsh.Data = data.ToArray();
      dsh.AllowEditing = true;
      gridView.DataSource = dsh;
}

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

The topics in this group cover enabling, configuring, and using the IGGridView control’s supported features.