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 = [city: City]

  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!

Reference: Grails Dynamic Dropdown from our JCG partner Nirav Assar at the Assar Java Consulting blog.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

4 Responses to "Grails Dynamic Dropdown"

  1. Adama NAON says:

    Great post !
    One error to correct : in the domain class Team, put belongsTo=[city:City] instead of belongsTo=Team.
    Thank you again !

  2. Hello.. I have a query and hope you will help with that.

    I am developing a grails application and came across a problem where I have to populate more than one drop downs (say dropdown2, dropdown3 etc) on selecting a particular value from dropdown1. How can I achieve that?

  3. Tunji says:

    I tried the steps above but did not get the result. The first dropdown works fine but the second does not get populated. No errors shown as well. Any clue?

Leave a Reply


seven + 2 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books