Ordering an observable collection with Reactiveui

Question

I am having some difficulty with ordering an observable collection in my ViewModel. Here is my situation:

In my view model, I have the following list:

public List<TicketModel> Tickets
        {
            get { return _Tickets.Value; }
            set
            {
                {
                    this.RaiseAndSetIfChanged(c => c.Tickets, value);
                }
            }
        }
        private ObservableAsPropertyHelper<List<TicketModel>> _Tickets;

This list is populated using a ReactiveAsyncCommand:

LoadTickets.RegisterAsyncFunction(x => loadTickets())
                .ToProperty(this, x => x.Tickets);

All works so far.

I have another command, SortByCommand which gets called whenever the user wants to sort a collection. The command looks like this:

SortByCommand = new ReactiveCommand(this.WhenAny(c => c.Tickets, ((tickets) => tickets.Value != null && tickets.Value.Count > 0)));
SortByCommand.Subscribe(c => sortTickets((SortByModel)c));

The command also calls a function that orders the collection using an order by clause:

private void sortTickets(SortByModel model)
{
    Tickets = Tickets.OrderBy(model.Selector).ToList();
}

Whenever the sortTickets function is called, there is an exception thrown which says:

Unable to cast object of type 'ReactiveUI.ObservableAsPropertyHelper`1[System.Collections.Generic.List`1[Bugmine.Modules.MyPage.Models.TicketModel]]' to type 'System.Collections.Generic.List`1[Bugmine.Modules.MyPage.Models.TicketModel]'.

I have several questions:

1) Why can't I set directly the Tickets model? Do I need to first convert the result of the OrderBy to some sort of observable collection?

2) Is there a better way of doing this?

EDIT: Clarification

The approach I am taking right now is:

• The Tickets collection gets reset every x seconds.

• As soon as the sortTickets function is called, I will sort and reset this collection by:

  Tickets = Tickets.OrderBy(c => c.Name).ToList(); //for example

• When the Tickets collection is loaded again, I will check if it should be sorted and sort it before setting the Tickets property.

This feels a bit hacky because I am basically setting the collection at two points - upon loading and upon sorting. Moreover, upon loading I am using the ReactiveUI helper -> ToProperty:

LoadTickets.RegisterAsyncFunction(x => loadTickets())
    .ToProperty(this, x => x.Tickets);

Whereas, upon sorting I am doing that myself:

Tickets = Tickets.OrderBy(model.Selector).ToList();

I am wondering if there is a better way to do the sorting using the ReactiveUI approach which I already use upon loading.

Thanks in advance!

Answer 1

Just had a look on Ana's blog http://blog.paulbetts.org/index.php/2010/07/05/reactivexaml-series-implementing-search-with-observableaspropertyhelper/

//
// This is the canonical way to make a read-only property whose value
// is backed by an IObservable
//

ObservableAsPropertyHelper<List<FlickrPhoto>> _Photos;

I think the read-only is the important point there.

Instead you could try using a normal observable where you can use OnNext to push in the new value

private Observable<List<TicketModel>> _Tickets = new Observable<Lis<TicketModel>>();
_Tickets.OnNext(newValue);

Or use a ObservableForProperty<> and just use the property normally

public List<TicketModel> _Tickets { get;set;}
private Observable<List<TicketModel>> _ticketsObservable= ObservableForProperty<..>(x=>x.Tickets);

Both of these methods expose an Observable which we can use later in the sort.

Why not try handling the two inputs into your sort in the same way, then it wont feel so hacky. That way you'll also have an

public SortModel SortModel {get;set;}

Your sort command implementation becomes

SortByCommand.Subscribe(c => _Sort = c));

but then you subsribe to both ticket changes AND sort criteria changes in one, see http://rxwiki.wikidot.com/101samples#toc44 for CombineLatest

new ObservableForProperty<..>(x=>x.SortModel)
    .CombineLatest(_ticketsObservable) 
    .Subscribe( (x,y)=>
    {
         //Refactor to SortMethod
         _tickets = y.OrderBy(x.Selector);
    });

Answer 2

Another way to solve this is via CreateDerivedCollection:

SortedTickets = Tickets.CreateDerivedCollection(
    x => new TicketViewModel(x),
    orderer: (l,r) => SortModel.Selector(l, r),  // Returns CompareTo() result
    signalReset: this.WhenAny(x => x.SortModel, x => x.Value));  // Reorder on SortModel change

Note that this breaks down if Tickets is set repeatedly (which in this case it is) - you might change your model to initializing Tickets in the ctor, then Clearing and Adding all the items, i.e.

LoadTickets.RegisterAsyncFunction(x => loadTickets())
    .Subscribe(x => {
        // TODO: Make sure Tickets is a ReactiveCollection
        Tickets.Clear();
        Tickets.AddRange(x);   // Will trigger resorting of SortedTickets
    });

Answer 3

1. I'm pretty sure that the result of OrderBy(..) is an IEnumerable instead of an ObservableCollection. Fortunately though, it has a constructor that can do the conversion, i.e.

Tickets = new ObservableCollection<...>(Tickets.OrderBy(...));

1. "Better" can be very subjective measure. Firstly you haven't explained the full lifespan of the Tickets collection and the tickets it contains, so we can't really tell. You might consider using a SortedTickets field/property instead of overwriting your tickets property which you might find you wouldn't need to be an observable collection as you would know when it needs to NotfyProperryChanged from the Tickets observable. It all depends on how frequently your tickets is likely to change.

P.S. Also make sure you have tested what happens to your sorted list when you add another ticket as you can't just