Creating UITable with section using Mono touch and slodge mvvmcross

Question

I am trying to create a UItable with sections using mono touch and slodge mvvmcross. However I am having some issues.

In my data I have a range of sections with 1-2 elements and my tablesource have a list (ItemsSource) containing all elements.

It shows all the sections correct, however it seems that for every section it takes element 0 and/or 1 from the total list of elements and do not take in to account that it is a new section, if it is a new section the index should have a offset. But I might be wrong.

Should I be having multiple list with elements and swith the tablesource.Itemsource according to the section - I tried this approach however it wwnt into a spiral of doom :P

Any help is apreciated :)

The following is my code for the tableview:

using System;
using System.Collections;
using System.Collections.Generic;
using System.Drawing;
using System.Globalization;
using Cirrious.MvvmCross.Binding.Touch.ExtensionMethods;
using Cirrious.MvvmCross.Binding.Touch.Views;
using Cirrious.MvvmCross.Commands;
using Cirrious.MvvmCross.Interfaces.Commands;
using Cirrious.MvvmCross.Views;
using CmsApp.Core.Interfaces;
using CmsApp.Core.Model;
using CmsApp.Core.ViewModels;
using CmsApp.Core.ViewModels.Items;
using CmsApp.GtilP.Core.ViewModels.Items;
using CmsApp.Touch.Views.Items;
using MonoTouch.CoreGraphics;
using MonoTouch.ObjCRuntime;

namespace CmsApp.Touch

{
    using MonoTouch.Foundation;
    using MonoTouch.UIKit;

    [Register("WeekItemListViewController")] 
    public class WeekItemListViewController:CustomListViewController
    {

        public WeekItemListViewController(IntPtr handle): base(handle)
            {

            }

    private bool _hide;


    private List<TableSectionItemViewModel> _cells;
    private UmbracoTableViewController _table;
    private TabelViewSource _tableSource;
    private List<WeekItemTaskViewModel> _listOfTasks;
    private List<WeekItemHeaderViewModel> _listOfHeaders;
    private List<WeekItemFooterViewModel> _listOfFooter;
    private List<List<WeekItemTaskViewModel>> _listOfGroupedTasks;

    public bool Hide
    {
        get { return _hide; }
        set { _hide = value;
            this.Hidden = _hide;
        }
    }

    public BaseViewModel ViewModel { get; set; }

    //custom implementation for adding views to the button row

    protected override void AddViews()
    {

        SortItemsAcoordingToTyoe(ItemsSource);

        if(ItemsSource.Count==0)
        {
            this.Hidden = true;
            return;
        }
        else
        {
            this.Hidden = false;
        }

        if(_table!=null)
        {
            _table.View.RemoveFromSuperview();
        }

            _table = new UmbracoTableViewController(new RectangleF(0,0,this.Frame.Width,this.Frame.Height), UITableViewStyle.Plain);

            _table.TableView.BackgroundColor=UIColor.Clear;
            _tableSource = new TabelViewSource(_table.TableView,_listOfHeaders,_listOfFooter,_listOfGroupedTasks);

        _tableSource.SelectionChanged += (sender, args) => DoTableSelect((TableSectionItemViewModel)args.AddedItems[0]);

        _tableSource.ItemsSource=InitTableCells();;

            _table.TableView.SeparatorStyle = UITableViewCellSeparatorStyle.None;
            _table.TableView.Source = _tableSource;

        this.AddSubview(_table.View);


    }

    private void SortItemsAcoordingToTyoe(IList itemsSource)
    {
         _listOfGroupedTasks = new List<List<WeekItemTaskViewModel>>();
         _listOfTasks =new List<WeekItemTaskViewModel>();
         _listOfHeaders=new List<WeekItemHeaderViewModel>();
         _listOfFooter = new List<WeekItemFooterViewModel>();

        foreach (SectionItemBaseViewModel sectionItemBaseViewModel in itemsSource)
        {

            if(sectionItemBaseViewModel.GetType()==typeof(WeekItemHeaderViewModel))
            {

                _listOfHeaders.Add((WeekItemHeaderViewModel)sectionItemBaseViewModel);
                _listOfTasks=new List<WeekItemTaskViewModel>();
                _listOfGroupedTasks.Add(_listOfTasks);
            }
            else if (sectionItemBaseViewModel.GetType() == typeof(WeekItemTaskViewModel))
            {
                _listOfTasks.Add((WeekItemTaskViewModel)sectionItemBaseViewModel);
            }
            else if (sectionItemBaseViewModel.GetType() == typeof(WeekItemFooterViewModel))
            {
                _listOfFooter.Add((WeekItemFooterViewModel)sectionItemBaseViewModel);
            }
        }

    }


    private List<TableSectionItemViewModel> InitTableCells()
    {
        _cells = new List<TableSectionItemViewModel>();


        foreach (List<WeekItemTaskViewModel> listOfGroupedTask in _listOfGroupedTasks)
        {
            foreach (WeekItemTaskViewModel item in listOfGroupedTask)
            {
                var tableCell = new TableSectionItemViewModel() { TaskViewModel = item };
                _cells.Add(tableCell);
            }

        }


        return _cells;
    }



    private void DoTableSelect(TableSectionItemViewModel tableItemViewModel)
    {
        /*
        string selected = tableItemViewModel.Title;
        ((WelcomeScreenViewModel) ViewModel).SortViews(selected);

        _titleLabel.Text = selected;

        */
        int section=0;
        int row=0;
        NSIndexPath index=null;
        foreach(var group in _listOfGroupedTasks)
        {

            if(group.Contains(tableItemViewModel.TaskViewModel)){

                row=group.IndexOf(tableItemViewModel.TaskViewModel);
        index = NSIndexPath.FromRowSection(row, section);
                break;
            }
            section++;
        }

        if(index!=null){
            _table.TableView.DeselectRow(index, false);}
    }

    private class TabelViewSource : MvxBindableTableViewSource
    {
        private List<WeekItemHeaderViewModel> _listOfHeaders;
        private List<WeekItemFooterViewModel> _listOfFooter;
        private List<List<WeekItemTaskViewModel>> _listOfGroupedTasks;

        public TabelViewSource(UITableView view, List<WeekItemHeaderViewModel> listOfHeaders, List<WeekItemFooterViewModel> listOfFooter, List<List<WeekItemTaskViewModel>> listOfGroupedTasks)
            : base(view)
        {

            _listOfFooter = listOfFooter;
            _listOfGroupedTasks = listOfGroupedTasks;
            _listOfHeaders = listOfHeaders;

        }
        public override float GetHeightForRow(UITableView tableView, NSIndexPath indexPath)
        {
            return 50.0f;
        }

        public override int NumberOfSections(UITableView tableview)
        {
            return _listOfHeaders.Count;
        }

        public override int RowsInSection (UITableView tableview, int section)
        {
            List<WeekItemTaskViewModel> list=_listOfGroupedTasks[section];

            //this.ItemsSource=list;
            return list.Count;
        }

        public override int SectionFor(UITableView tableview, string title, int atIndex)
        {
            return atIndex;
        }



        protected override UITableViewCell GetOrCreateCellFor(UITableView tableView, NSIndexPath indexPath, object item)
        {
            //var reuse = tableView.DequeueReusableCell(TaskTableCell.Identifier);

     //       var listOfTasks = _listOfGroupedTasks[indexPath.Section];

       //     var task = listOfTasks[indexPath.Row];

         //   if (reuse != null)
           // {
             //   return reuse;
            //}
            // tjek på type - sektion, item footer
            var toReturn = TaskTableCell.LoadFromNib();

            return toReturn;
        }

/*
        public override UIView GetViewForFooter(UITableView tableView, int section)
        {
            return base.GetViewForFooter(tableView, section);
        }
*/
        public override string TitleForHeader(UITableView tableView, int section)
        {
            WeekItemHeaderViewModel header = _listOfHeaders[section];
            return header.Title;
        }
    }

}

public class TableSectionItemViewModel 
{
    public WeekItemTaskViewModel TaskViewModel { get; set; }

    public string Title
    {
        get{return TaskViewModel.TaskName;}

    }

    public bool IsExpired
    {
        get{
            return TaskViewModel.IsExpired;
        }
    }

    public bool TaskIsDone
    {
        get{
            return TaskViewModel.TaskIsDone;
        }
    }


    public IImageItem CellBackground
    {
        get
        {
            return new LocalImageItem("tablecell_background.png");
        }
    }

    public string[] CheckMarkImage
    {
        get
        {
            return TaskViewModel.CheckMarkImageData;
        }
    }

    public IMvxCommand ToggleDone
    {
        get { return new MvxRelayCommand(CheckBoxPushed); }
    }

    private void CheckBoxPushed()
    {
        TaskViewModel.TaskIsDone=!TaskIsDone;
    }
    }
}

Answer 1

I don't really understand the problem you are seeing at present.

However, I can explain how I used sections in BaseSessionListView.cs the conference sample.

Basically, in that sample the ItemsSource was a grouped source - so the ViewModel code was:

public class SessionGroup : List<Session>
{
    public string Key { get; set; }

    public SessionGroup(string key, IEnumerable<Session> items)
        : base(sessions)
    {
        Key = key;
    }
}

private List<SessionGroup> _groupedList;
public List<SessionGroup> GroupedList
{
    get { return _groupedList; }
    protected set { _groupedList = value; RaisePropertyChanged("GroupedList"); }
}

This meant that my exposed ItemsSource had a structure a bit like:

Group
    Session
    Session
    Session
Group
    Session
    Session
    Session
    Session
Group
    Session
    Session
etc

The Section based methods in the table source were then:

public override string[] SectionIndexTitles(UITableView tableView)
{
  if (_sessionGroups == null)
       return base.SectionIndexTitles(tableView);

   return _sessionGroups.Select(x => KeyToString(x.Key, 10)).ToArray();
}

protected override object GetItemAt(NSIndexPath indexPath)
{
   if (_sessionGroups == null)
       return null;

   return _sessionGroups[indexPath.Section][indexPath.Row];
}

public override int NumberOfSections(UITableView tableView)
{
    if (_sessionGroups == null)
        return 0;

    return _sessionGroups.Count;
}

public override int RowsInSection(UITableView tableview, int section)
{
    if (_sessionGroups == null)
        return 0;

    return _sessionGroups[section].Count;
}

This seemed to work.... but I don't know if it helps with your question?

---

If I'd wanted to add a header element, then I guess I would have just changed the RowsInSection and GetItemAt methods to accomodate this - plus the GetOrCreateCellFor to return header element cells too... but I guess there will be other ways to do this too?