Button in Custom ViewCell Xamarin Tableview C#

Issue

Looking forward to your assistance once again :)

I'm trying to have the buttons on the far right be able to delete their row in the tableview control. Right now they now about which row they are on but I cannot connect this information to the parent. The table view is populated with a custom viewcell.

The custom view cell contains two different pickers, two entry fields and a button. I haven't found a cleaner way to execute this as I have the picker's data which isn't related to the # of rows in the data table control.

Currently when you click a button on the right it posts to the console what row was selected but I don't know of a way to connect that to its parent in order to actually delete that row on the data table

View Cell Code Behind

public partial class RecipeIngredientViewCell : ViewCell
{
    ObservableCollection<clIngredient> _listIngredients = new ObservableCollection<clIngredient>();
    public ObservableCollection<clIngredient> listIngredients { get { return _listIngredients; } }

    ObservableCollection<clUnit> _listUnit = new ObservableCollection<clUnit>();
    public ObservableCollection<clUnit> funclistUnit { get { return _listUnit; } }


    clRecipeIngredient _recipeIngredient;
    int _row;

    public RecipeIngredientViewCell(clRecipeIngredient passedrecipeIngredient, ObservableCollection<clIngredient> passedlistIngredients, ObservableCollection<clUnit> passedlistUnits, int row)
    {
        InitializeComponent();

        _listIngredients = passedlistIngredients;
        _listUnit = passedlistUnits;
        _recipeIngredient = passedrecipeIngredient;

        _row = row;

        this.BindingContext = _recipeIngredient;

        //INGREDIENT PICKER
        pickerIngredient.ItemsSource = _listIngredients;
        for(int x = 0; x < _listIngredients.Count; x++)
        {
            if (_listIngredients[x].IngredientName == _recipeIngredient.IngredientName)
            {
                pickerIngredient.SelectedIndex = x;
            }
        }
        //UNIT PICKER
        pickerUnit.ItemsSource = _listUnit;
        for (int x = 0; x < _listUnit.Count; x++)
        {
            if (_listUnit[x].UnitName == _recipeIngredient.UnitName)
            {
                pickerUnit.SelectedIndex = x;
            }
        }


    }

    private void btnDeleteRecipeIngredient_Clicked(object sender, EventArgs e)
    {
        //NOT IMPLEMENTED YET!
        
        Console.WriteLine(_recipeIngredient.IngredientName + " AT ROW " + _row.ToString());
    }

    private void txtQuantity_TextChanged(object sender, TextChangedEventArgs e)
    {
        _recipeIngredient.Quantity = txtQuantity.Text.ToDouble();
    }

    private void txtComment_TextChanged(object sender, TextChangedEventArgs e)
    {
        _recipeIngredient.Comments = txtComment.Text;
    }

    private void pickerIngredient_SelectedIndexChanged(object sender, EventArgs e)
    {
        _recipeIngredient.IngredientName = pickerIngredient.SelectedItem.ToString();
    }

    private void pickerUnit_SelectedIndexChanged(object sender, EventArgs e)
    {
        _recipeIngredient.UnitName = pickerIngredient.SelectedItem.ToString();
    }
}

View Cell XAML

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="RecipeDatabaseXamarin.Views.RecipeIngredientViewCell">

<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="75" />
    </Grid.ColumnDefinitions>
    <Picker Grid.Column = "0" x:Name="pickerIngredient" HorizontalOptions = "StartAndExpand" SelectedIndexChanged="pickerIngredient_SelectedIndexChanged"/>
    <Entry Grid.Column = "1" x:Name ="txtQuantity" HorizontalOptions = "StartAndExpand" Text = "{Binding Quantity}" TextChanged="txtQuantity_TextChanged" />
    <Picker Grid.Column = "2" x:Name ="pickerUnit" HorizontalOptions = "StartAndExpand" SelectedIndexChanged="pickerUnit_SelectedIndexChanged"/>
    <Entry Grid.Column = "3" x:Name="txtComment"  HorizontalOptions = "StartAndExpand" Text = "{Binding Comments}" TextChanged="txtComment_TextChanged" WidthRequest="150"/>
    <Button Grid.Column = "4"  x:Name="btnDeleteRecipeIngredient" HorizontalOptions = "StartAndExpand" Text = "Delete Ingredient" Clicked="btnDeleteRecipeIngredient_Clicked"/>
</Grid>

Code Behind for Page

        var section = new TableSection(); 
        for(int i = 0;i<_downloadedRecipeIngredients.Count;i++)
        {
            var cell = new RecipeIngredientViewCell(downloadedRecipeIngredients[i], listIngredients, listUnit, i);

            section.Add(cell);
        }
        tblData.Root.Add(section);

In the main page code behind I want the button to run a block of code to execute something such as

            tblData.Root.del(ROW_INDEX);

Thanks!

I believe I have this solved. Will post the solution when I get back from the 4th weekend.

Solution

The solution to this problem is answered on another post. Basically the solution is easier once MVVM is implemented even though it was a pain to get it to work on the picker withing the listView control.

This other thread has sample code which you can run.

Trying to set picker within listview MVVM Xamarin

If anyone runs into the same issue please post and I'll try to respond back as this issue was a PAIN!!!!

Answered By - Steven Marcus