Knockout that cascading dropdown

In this article I will explain how you can make cascading dropdowns with Knockout. Knockout is a javascript library which provides you some stuff to implement the MVVM pattern.  Knockout provides you the following stuff:

  • Declarative bindings: (Easily associate DOM elements with model data using a concise, readable syntax);
  • Automatic UI Refresh: (When your data model’s state changes, your UI updates automatically)
  • Dependency tracking: (Implicitly set up chains of relationships between model data, to transform and combine it)
  • Templating: (Quickly generate sophisticated, nested UIs as a function of your model data)

In the example below I use jQuery to get some json server data.

The Json server data should be an array of objects containing a ‘value’ and ‘text’ property. As you can see I use the ‘html5′ ‘data-bind attribute’ to map my view model to my UI elements.

For example your ASP.NET MVC3 action could look like this.

I wrote the examples in notepad, so there could be some issues. However if I did my job well this should be all to let all the magic happen.

Didn’t this knocked out a bunch of javascript code you would write normally?

If you like it share it! If you don’t share it!

You may also like...

6 Responses

  1. Elliptical says:

    Dit is de exacte info die ik zoek , bedankt! Arron

  2. cleyton says:

    Hi,

    I would like to try your example with a hard coded json object. Is it possible to download the source code with a hard coded object?

    Cheers
    C

    • You can get the source code from Github by clicking the gist. Of course you can try it out with your own hardcoded json object. Just create a method that returns the json instead of getting it from the server. Let me know where you have issues, so I can help you out. Please note that the new version of Knockout changed some names of methods, however the concept should still work. ko.dependentObservable –> ko.computed

      • Cleyton says:

        Hi Marco,
        Thanks for your reply.

        I have started a jsFiddle to see if you can kindly help me to fix
        a logic problem I have in my attempt to use cascanding selects with
        added captions. It is partially working

        http://jsfiddle.net/cleytonjordan/4cDdD/4/

        I have two selects and would like to add captions to advise the user
        what to do and expect. I have tried using ko.computed as Flo
        sugggested but my logic is still not right.

        THIS IS THE LOGIC
        ——————————-

        select1 = Poster Select
        select2 = Client Select

        One poster can have many clients.

        1 – If the view model’s POSTER ARRAY LIST is empty I add ‘No Posters’
        caption to select1. I also add a caption to select2 ‘No Clients’ and
        disable both selects

        2 – If the view model’s POSTER ARRAY LIST has only one item I display
        the current item and no caption

        if the selected Poster object has no ClientSite array, I
        add a caption to select2 ‘No Clients’

        if the selected Poster object has only one item in the
        ClientSite array, I display the current ClientSite item in select2 and
        disable the select2

        if the selected Poster object has a collection of
        ClientSites, I display ‘Select Client’ caption in select2

        3 – If the view model’s POSTER LIST has many items, I display a
        caption in
        in select1 ‘Select Poster’

        if the selected Poster object has no ClientSite array, I
        to add a caption to select2 ‘No Clients’

        if the selected Poster object has only one item in the
        ClientSite array, I display the item and disable select2

        if the selected Poster object has more than one item in
        the
        ClientSite array, I display ‘Select Client’ in select2

        When I select an item in select1 that has items in the ClientSite and
        then go back to the caption ‘Select Poster’, I get an error. I think
        the reason for this is that I am changing from an object to a string
        but select2 is expecting an object.

        Please could someone share some light?

        Cheers

        C

  3. Cleyton says:

    Marco,

    I also have a question about your tutorial.

    You create a view model with properties only:

    var viewModel = {
    country: ko.observable(),
    countries: ko.observableArray(),
    state: ko.observable(),
    ……
    };

    Then you create a property called countrySelect outside the view model.

    1 – Why did you create it outside the view model?
    2 – It seems you are creating an object with a read: and write properties. Why do you do that?
    3 – Could you please explain to me what read and write properties do?
    4 – How do you know the value the user selected in the drop down list?

    Thanks

    C

    viewModel.countrySelect = ko.dependentObservable({ read: viewModel.country, write: function (country) { this.country(country); $.getJSON(‘http://localhost:56502/KnockoutJS/CascadingDropdown/States/’ + country.value, null, function (response) { viewModel.states(response); }); }, owner: viewModel });

Leave a Reply

Your email address will not be published. Required fields are marked *

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