Analytics

Sunday, May 20, 2012

Grails Dynamic Dropdown

Recently I had a UI requirement where a customer wanted to select values from two separate dropdowns. The value of the first dropdown essentially filtered the values for the second dropdown. Given the financial projects we support are not heavy on UI requirements, I had to do some initial learning and experimentation to yield a good implementation. This blog entry details the how to implement dynamic dropdowns in Grails with ajax and minimal JavaScript.

Example Problem

A contrived for dynamic dropdowns can be described below:

A user would like to select a sports team for a city. The user first selects a value for a dropdown to choose a city. A second dropdown is filtered with the sports teams within that city. An example to clarify:
  • The user selects Dallas as the city in the first dropdown. The second dropdown now displays values: Mavericks, Cowboys and Rangers.
  • The user selects Pittsburgh as the city in the first dropdown. The second dropdown now displays values Steelers, Pirates, and Penguins.

High Level Design in Grails 

Before we get into the details, we can take a step back and describe how we can accomplish a dynamic dropdown in the grails framework.
  • On a gsp page, create a select dropdown with the list of cities.
  • On change of the city dropdown, send an ajax call to the server with a param of the city selected.
  • A controller on the server receives the parameter and looks for teams based on the city selected.
  • Return a template with a new select dropdown for the teams, providing a model with the filtered list of teams.
We will continue below with code snippets. The code was demoed with Grails 2.0.

Domain Objects
The domain objects for this example are quite simple: A City object with a name, and a Team object.

package dropdown

class City {

  String name

  static hasMany = [teams: Team]

  static constraints = {
  }
}

package dropdown

class Team {
  
  String name

  static belongsTo = Team

  static constraints = {
  }
  
  String toString() {
    name
  }
}

Gsp Page

A gsp page contains a list of the cities directly from a GORM call. This is commonly performed and demonstrated by the default generated grails gsp pages. Note the use of remoteFunction. This is a grails gsp utility which makes an ajax call to the server and provides 'update' for the section of the dom to be updated on return.

For the team dropdown, we will start off with a an empty select tag. Below is a snippet.

<g:select name="city.id" from="${City.list()}" optionKey="id" optionValue="name"
                noSelection="['':'Choose City']"
                onchange="${remoteFunction (
                        controller: 'city',
                        action: 'findTeamsForCity',
                        params: '\'city.id=\' + this.value',
                        update: 'teamSelection'
                )}" />
  ....
  
  <td id="teamSelection" valign="top">
    <select>
   <option>Choose Team</option>
    </select>
  </td>

Controller used for Filtering

The controller will have a closure which takes in the city id, and then uses it to provide the teams associated with the city. This closure is invoked via ajax. The closure renders a template and a model.

The def dynamicDropdown closure is just used for navigation. By convention its renders the gsp of the same name.
package dropdown

class CityController {

  static scaffold = City

  // just navigation to the gsp
  def dynamicDropdown = {
  }

  def findTeamsForCity = {
    def city = City.get(params.city.id)
    render(template: 'teamSelection', model:  [teams: city.teams])
  }
} 

Template

The template is used to replace a section of the dom in the gsp. It accepts any model that is provided.

<!-- This template renders a drop down after a city is selected -->

<g:select name="team.id" from="${teams}" optionValue="name"
          optionKey="id"/> 



Conclusion

There are multiple ways to accomplish a dynamic dropdown. Native jQuery can be used, or even native JavaScript. I chose to utilize the built-in functions of grails and lessen my dependency on client side programming. This proved to be clean, quick and quite simple!

25 comments:

  1. Grails 2.0.1 complains about this line

    params: ''city.id=' + this.value',

    Even after getting around that, this code won't dynamically fill the teams dropdown - however, the relationships do work.

    Did you test this code? Do you have a working sample project which you might share?

    Thanks

    ReplyDelete
  2. This code is working code that i pasted on to the site. Unfortunately the tool i used to format html on to the blog left out a '/' char, and it was escaped.

    the snipper should lool like this:

    params: '\'city.id=\' + this.value',

    If you would like a zip of the code, send me an email please. I will be glad to send it to u. I have corrected on the site.

    Thanks for catching that!

    ReplyDelete
  3. Can you send me the code. Much appreciated.

    ReplyDelete
  4. @cmtopinka

    i sent the code to cmtopinka@gmail.com. Is that your email? If not please let me know

    ReplyDelete
  5. Hi
    can u send me the code to karthiknagtaurus@gmail.com

    ReplyDelete
  6. Hello, can you also email me the code at rachel_bird@taylor.edu?
    Thanks so much.

    ReplyDelete
  7. Plz u send me the code kamonpop@gmail.com

    ReplyDelete
  8. PLease send me the code at saurabhkr1@yahoo.com . Many Thanks in advance

    ReplyDelete
  9. Hello, Can you send me the code, please? Thank you
    lletuga15@gmail.com

    ReplyDelete
  10. Hi , can you please send me the code, too? I tried to google it with no luck.
    erik.marencik[at]gmail[dot]com

    ReplyDelete
  11. i have to create the samething , but the value of first select to be tested. for eg: it belongs to province ="BC" something like that.
    One morething , these two select tag to be used in the create.gsp page does it affect other user data already entered?
    Can you please give me reply and code to my id :kalpana.vasan@gmail.com

    ReplyDelete
  12. Hi. I was wondering if you could share the source with me as well. Thank you! ahdunn@gmail.com

    ReplyDelete
  13. send me please too!
    mihailorama@gmail.com

    ReplyDelete
  14. send me please too!

    rafra_raja@yahoo.com.mx

    ReplyDelete
  15. Hi can you send me the code also. jerika.legasto@gmail.com
    Thank you.

    ReplyDelete
  16. Send me a copy please!

    elisieldavila@gmail.com

    Thank you.

    ReplyDelete
  17. Could you please send a copy of this code to jobrien1956@gmail.com

    Thanks

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Please send a copy to javier7co@gmail.com
    Thanks

    ReplyDelete
  20. What is the path of the template .gsp file?
    Could you please send a copy of this code to jool49@gmail.com
    Thank you

    ReplyDelete
  21. Please send a copy of the code to andrelink14@gmail.com.
    Thank you

    ReplyDelete
  22. Could you please send a copy of this code to hemantgp@gmail.com

    Thanks

    ReplyDelete
  23. Hello, could you please send a copy of this code to dimitris-ts@hotmail.com

    Thanks you!!

    ReplyDelete
  24. Hello, could you please send a copy of this code to hameedr09@gmail.com

    Thanks you!!

    ReplyDelete