Delete A Row In TableView By Swiping And Handling Row Selection

In this article, we are going to learn how to delete a row in TableVIew by Swiping and how to handle the item click event of TableView.

Introduction

In this article, we are going to learn how to delete a row in TableView by Swiping and how to handle the item click event of TableView.

Solution

In my last tutorial we saw how to create a simple table view. Just refer to our previous tutorial because we are going to continue from there.

Here is link of previous tutorial http://www.c-sharpcorner.com/blogs/create-tableview-in-xamarin-ios

Here are the steps required to delete a row in TableView by Swipe:

Step 1

First we need to override the CanEditRow method

CanEditRow

If CommitEditingStyle is overridden, all rows are assumed to be editable. If this method is implemented and returns false (for some specific rows, or for all rows) then the swipe-to-delete gesture will not be available in that cell.

public override bool CanEditRow(UITableView tableView, Foundation.NSIndexPath indexPath) {
    return true;
}

Step 2

Handle the click of delete button. For this we need to integrate CommitEditingStyle method.

CommitEditingStyle

The table source detects if this method is overridden and automatically enables the swipe-to-delete gesture. The method’s implementation should call DeleteRows on the UITableView to cause the cells to disappear, and also remove the underlying data from your model (for example, an array, dictionary or database).

public override void CommitEditingStyle(UITableView tableView, UITableViewCellEditingStyle editingStyle, Foundation.NSIndexPath indexPath) {
    switch (editingStyle) {
        case UITableViewCellEditingStyle.Delete:
            tabledata.RemoveAt(indexPath.Row);
            tableView.DeleteRows(new NSIndexPath[] {
                indexPath
            }, UITableViewRowAnimation.Fade);
            break;
        case UITableViewCellEditingStyle.None:
            break;
    }
}

Step 3

By default delete Button text is “Delete”. If you want to change the name of delete button. First override the method TitleForDeleteConfirmation as mention below.(Otional)

public override string TitleForDeleteConfirmation(UITableView tableView, Foundation.NSIndexPath indexPath)
{
    return "Trash";
}

Handle Row Selection

To handle user row selection we have to override RowSelection method UITableViewSource, using NSIndexPath indexpath to determine which row was selected.

public override void RowSelected(UITableView tableView, Foundation.NSIndexPath indexPath)
{
    new UIAlertView("Row Selected", tabledata[indexPath.Row], null, "OK", null).Show();
    tableView.DeselectRow(indexPath, true);
}

Now the code looks like this,

public override bool CanEditRow(UITableView tableView, NSIndexPath indexPath) {
    return true; // return false if you wish to disable editing for a specific indexPath or for all rows
}
public override void CommitEditingStyle(UITableView tableView, UITableViewCellEditingStyle editingStyle, Foundation.NSIndexPath indexPath) {
    switch (editingStyle) {
        case UITableViewCellEditingStyle.Delete:
            // remove the item from the underlying data source
            tabledata.RemoveAt(indexPath.Row);
            tableView.DeleteRows(new NSIndexPath[] {
                indexPath
            }, UITableViewRowAnimation.Fade);
            break;
        case UITableViewCellEditingStyle.None:
            break;
    }
}
public override string TitleForDeleteConfirmation(UITableView tableView, Foundation.NSIndexPath indexPath) {
    return "Trash";
}
public override void RowSelected(UITableView tableView, Foundation.NSIndexPath indexPath) {
    new UIAlertView("Row Selected", tabledata[indexPath.Row], null, "OK", null).Show();
    tableView.DeselectRow(indexPath, true); // iOS convention is to remove the highlight
}

Output

Try to build and run the project, if everything is ok as I mention then your app will look like this,

1. After swipe delete button will appear
   
   
   
   
2. After click on delete button row data deleted,
   
   
3. After clicking on row, alert will appear