Master / Detail drop down lists – client side data binding

Master Detail Drop Down Lists
Today’s post is a response to a comment I’ve got from Rajesh. Before I go on with the post, I’d like to thank Rajesh for being one of my readers and giving a feedback. So, first the comment:

“I have a scenario of client binding where I’m facing problems. I have two select boxes which will be loaded on load using client side data binding. On selecting data of one select box, data in the second select box needs to be re-binded accordingly. (like selecting ASIA in one selectbox should only load Asian counties in the second select box).”

So, in today’s post I’ll make a following example : we’ll have two select elements. First one will have the names of countries, the second one will display the names of cities, based on which country we’ve chosen in the first select element. I’m not going to use Rajesh’s example with continents and countries, because I’ve already have this web service done (countries/cities) so I can reuse it. However, the principle is identical.

The list of countries we will load as soon as the page loads, but the list of cities we will load once user chooses the country.

For getting data we’ll need a web service. It is the same web service I’ve used in Master / Detail post with ListView, only this time we’ll use two select elements. We’ll name the web service geography.asmx. This is how this file looks like:


The code behind for this file looks like this:


As you can see the GetCountries Function has DataObjectMethodType.Select attribute, and that is because we want the countries to load as soon as page loads, so we’ll use dataSource component in xml-script. As you can see, here I’ve simply created manually a DataTable and return it. You would probably retrieve data from SQLServere here.

Next method you can see is GetCities. This is a simple WebMethod, because we will call it from javascript (we won’t use it with dataSource component). It takes one parameter, namely IDCountry, and returns the cities located in that country. Last function in this class, simple creates and fills DataTable with cities.

Now, let’s go to the default.aspx page, where we are going to set up our select elements. First make sure you register ScriptManager. You’ll also need here a reference to geography.asmx web service so that we can call its methods from java script. This part of code should look like this:


Now, we need to create two html select elements. One we’ll name selCountries and other selCities. For selCountries, we’ll define onchange event to call “selCountries_Change” function in javacript (this function will be called every time user changes the selected index > in our case every time user chooses different country). For selCities we’ll define onchange event to call “selCities_Change”. This function will simply show user a message that says something like “You have selected New York as your favourite city!” > obviously the name of the city is actually variable and depends on which city user chose. This part of code looks like this:


Now let’s see our xml-script. Take a look at the code first and I’ll explain it then:


First we set up the dataSource. I’ve explained this many times, so just briefly. We want it to load as soon as page loads, and use the geography.asmx as its web service. Then we’ll declare selCountries select element and bind it to this data source. If in doubt about this part of code, please read first Drop Down List – Client Side Data Binding Post.

Next thing we do, is declare our selCities select element. You will see that the process is pretty much the same as for the selCountries select element with one important change. We did not define dataContext for it, nor did we define bindings. This is because we are going to bind data to this select element through javascript (in the selCountries_Change function; remember how we set that event in html!).

Last thing we have to do is write the javascript to handle the change events of our select elements. Take a look at the code first :


First function is the selCountries_Change() function, which is invoked every time user chooses a different country. We don’t want to do anything if selectedIndex is 0, because first item in our select element is simply an instruction (“Choose a country”). If user selected something else, we find the value of that choice (that is the IDCountry value) and call BindCities function with that value as a parameter.

The BindCities function will call GetCities function on our webservice and send it the IDCountry parameter, so that GetCities functions knows which cities to return. The second parameter is the name of the callback function. Callback function is the function that web service will call once it has the data and to which it will send the data.

The BindCities_Callback function is called by web service and receives data table with list of cities for chosen country in results parameter. You see how we first get reference to the atlas representation of our selCities select element (we do that with dollar sign). Then we call selCities.control.set_data(results) function. This is something similar to’s data source property (e.g. in with drop down list you would do selCities.DataSource = results). Last thing we do here is call evaluateIn method on selCities (in that would be selCities.DataBind()). So to wrap it all up, we get the reference to select element, set it’s data source with set_data method and finally bind the data to the control.

At the end there is just a simple selCities_Change function. This function is called every time user selects different city. Here we just find which city user chose and give an alert message telling him that he chose that particular city. Obviously, you would replace this code with something more useful.

The whole project you can download from reBlogger lab.

This blog is being delivered to you by
“Do you know what your employees are blogging about?”

About these ads

11 Responses to “Master / Detail drop down lists – client side data binding”

  1. Joel Rumerman Says:

    Great example!

    Shawn Burke just linked to your blog as a good resource and he’s right.

    Have you played around at all with the alternative syntax of the web service calling pattern? It provides the ability to pass a user context object from caller to callback. Using it, you might be able to generalize your code on to update any listview from the callBack function. Through the use of eval of course (gotta love eval).

    Thx, Joel

  2. codingatlas Says:

    Hi Joel,

    I’m sorry for not responding sooner. But it was a weekend and things are really hectic up here. Anyway, I have not tried using your approach, though it definetly seems interesting. Generalization is always good :). I’ll give it a try this weekend, hopefully…


  3. smismfootly Says:


    VIAGRA, CIALIS, PHENTERMINE, SOMA… and other pills!

    Welcome please:


    Welcome please:


  4. Robforhq Says:

    You have the natural advantage in debt settlement services , which may be appropriate for debtors with …
    Great Solution

  5. bob Says:

    WKh0o4 hi nice site thx

  6. Useful AJAX Links | pc-aras Says:

    [...] Master / Detail drop down lists — client side data binding (Coding [...]

  7. Compare Suppliers Says:

    Thanks for the coding help I really appreciate it. I’ll keep an eye out for more of your blogs.

  8. personal injury lawyers jacksonville Says:

    enjoyed the read, i will bookmark your page and share it with my friends

  9. SportBoy Says:

    Great post! Your information is best dedicated to the all around us! Thanks!

  10. Emily Says:

    Wonderfully interesting blog post thanks for writing it
    i just added your blog to my bookmarks and will check back often.

  11. steroids Says:

    I really like your website and daily watch it for latest articles because you provides many knowledge about many things.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: