Altinet
  • Home
  • Blog
  • Contact





Connecting AutoCompleteBox to a Ria Service using MVVM and Caliburn.Micro

On 19 Jul, 2011
Uncategorized
By : Bruno Samardzic
No Comments
Views : 4239

AutoCompleteBox connected to web service is often needed solution, and there are many solutions out there that are bare bone ones, but using such powerful UI framework as Caliburn.Micro is can reap some interesting benefits. So here’s my implementation.
I decided to subclass AutoCompleteBox because i subclass all of the controls i use. I called it AltiAutoCompleteBox.
A new event was added called PopulatingAsync and a new EventArg called PopulatingAsyncEventArgs:

AltiAutoCompleteBox basically just adds another event PopulatingAsync which is called every time Populating event is called:

    public partial class AltiAutoCompleteBox:AutoCompleteBox
    {
        public event EventHandler<PopulatingAsyncEventArgs> PopulatingAsync;
 
        public AltiAutoCompleteBox()
        {
            MinimumPopulateDelay = 500;
            MinimumPrefixLength = 2;
            FilterMode = AutoCompleteFilterMode.None;
            // handle the populating event of the associated auto complete box
            Populating += AssociatedObject_Populating;

        }

        private void AssociatedObject_Populating(object sender, PopulatingEventArgs e)
        {
            if (PopulatingAsync == null) return;

            PopulatingAsync(this,new PopulatingAsyncEventArgs(PopulateComplete,e.Parameter));
            // cancel the population of the auto complete box
            e.Cancel = true;
        }
    }

PopulatingAsyncEventArgs class is consisted of a Parameter and an action which will be called on ViewModel side when population of items is complete. It basically calls a PopulateComplete Action of AutoCompleteBox

    public class PopulatingAsyncEventArgs:EventArgs
    {
        public PopulatingAsyncEventArgs(Action complete,string parameter)
        {
            PopulateComplete = complete;
            Parameter = parameter;
        }

        public string Parameter { get; private set; }

        public Action PopulateComplete { get; private set; }
    }

On viewmodel side you do it something like this:

        public void FilterPartners(PopulatingAsyncEventArgs args)
        {
            Context.Load(Context.GetPartnersQuery().Where(x => x.Name.Contains(args.Parameter)),
                        x =>
                            {
                                PartnerList.Clear();
                                PartnerList.AddRange(x.Entities);
                                args.PopulateComplete();
                            }
                            
                         , null);
        }

And on the view side you hook it up like this:

 <AltiControls:AltiAutoCompleteBox
 Micro:Message.Attach="[Event PopulatingAsync]=[Action FilterPartners($eventArgs)]"  
SelectedItem="{Binding Partner,Mode=TwoWay}" 
ItemsSource="{Binding ElementName=ClaimFormUc, Path=DataContext.PartnerList}"/>

The important thing is the Message.Attach part.

And that’s basicall it! Next time you want to use this AutoCompleteBox, you just define the service and hook it up with message.Attach! And it has that yummy bubbling through visual tree built in and all!

Till next time..:)



Previous Post Next Post 

About The Author

Bruno Samardzic


Number of Posts : 45
All Posts by : Bruno Samardzic

Leave a Comment

Click here to cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>





Recent Posts

  • Angular vs React: round 2
  • Why programming is hard
  • Orchard Workflows, undocumented gem
  • The React Redux
  • React.js invoicing CRUD application, part 2: Description

Recent Comments

  • Angshuman on Animation for starred grid rows and columns using xaml
  • Advanced Excel Training in Lucknow on Angular vs React: round 2
  • Reginald Sophomore on My example of Angularjs directive
  • Slobodan on Angular and Breeze – story so far.
  • Bruno Samardzic on Reaction to Ember-forged Durandal Angularly Knocking out my Backbone, or my JS MVC framework research conclusion.

Contact

Altinet d.o.o.

OIB: 97429091194

Čulinečka cesta 146, Zagreb

Tel: +385 (1) 2946 819

Mob: +385 (98) 210 756

IBAN: HR4323400091110406470

Latest tweets