Multi-column combo box – NetAdvantage for jQuery

In this article I will show you how to turn the Infragistics’ jQuery combo box into a multi-column combo box. This would be useful if you want to display the values of more than just one property of each item in the dropdown list of the combo box. Using this design pattern you could simplify the life of your users by providing them with a more informative and descriptive way to choose items from a list.

Straight away I should say that there is no out of the box functionality for this and what I would actually do is show you how to make it look like a multi column combo box. This will be done by creating a few templates and styles. It is straight forward.

The first thing that we need to do is set up the environment in which we’ll create the control. That including the required JS scripts and CSS files. We need the jQuery, the jQuery UI and jQuery Templates scripts. In addition we need the IG UI base and IG UI Combo JS files. The easiest way to start using them is to set links to the respective CDN locations. Here is how to do that for an HTML page.

You also need some basic css styles to get the default look of the Infragistics combo box. Again for an HTML page here is what you need to include

Note that the URL for the Infragistics CDN includes format of the type …jquery/xxxxx/yyyy/js…. the xxxxx is the release version, 20112 is the latest as of the time of writing this article. The other number is the build that you want to use. By the time you read this there might be a newer version and you will need to change that number if you want to use it instead. Note also that all those files come with the product download and you are not required to use the CDN.

Once we have all this in place we can add a div that will be our combo box and work on it. I’ll set its id to comboNetflix, as I’ll display data from the Netflix’s movie database (an open free data service with oData protocol).

After I add the div I ‘m going to include a short script tag that will convert it to an igCombo control and will set the appropriate properties. Lastly I’ll create some custom css settings too. You’ll be able to see the code a little further down the article.

So before I show you the specifics I will explain how to create the separate columns in theory. The combo box does not have them by default out of the box, but the drop down list is structured in a manageable way. We have a header space at the top, content in the middle and footer at the bottom. The content is a list of items. All those elements, the header, the items and the footer are template-able. They can contain any HTML elements as a template. This feature works only if we have included the jQuery template pack. So what we will do is provide a template that will make the items look like in a table and each column will show the value for a property of the respective item. I will implement this by using spans with predefined widths, borders and margins. The end result will look exactly like the screenshot in the beginning of the article.

So in the body of the page we add this:

The container div will only be used to position the combo in the middle of the screen and is not really needed to this sample. It just makes it look a little better.

Then in the head section I’ll add the following script:

Lets take a closer look at this part. We select the div that will be our future combo and call the Infragistics method igCombo(). The parameters then tell it how it will look like and behave. Here is what is interesting specifically for the multi-column combo. The valueKey is the name of the property that will be used when an item is selected to fill in the combo box value. Width is the actual width of the future combo box. It will override the existing div CSS styles if you have them. Then the data source is a standard oData service with some filtering parameters. It returns result in JSON format. And now the most interesting properties – templates for the header, footer and items. Those can be anything. They can be image tags, text, tables, whatever you want that HTML allows. As I said before I’ll have three spans next to each other for every line with some CSS styling that I will show you in a second. The content in each cell is dynamic. You can reference the content of properties of each item by using this syntax: ${PropertyName}. Also note that the footer will actually be separate. What you will make of it is completely up to you.

In the CSS I have a few classes. The cell class will be used for each span in the header and content. It will set the horizontal borders and some padding that is common for all cells. Also it will set the float to left so they are aligned properly. Then the class first will set the width for the first column and provide a right border and some margin to the left. Similarly the middle and last classes will customize the other columns. I will also have a section that makes the header cells bold and the border under the header solid instead of dotted. Here is the complete CSS:

Note again that the container is not related to the multicolumn combo box its just there to put it in the middle of the screen.

So that’s basically all you need – include the proper JS and CSS files, add an empty div that will be constructed as the igCombo by a script with some properties in the head section and lastly the header, items and footer of the combo will be templated by providing some HTML blocks to the respective properties and styling them with CSS.

I hope this has been useful and interesting. Here is a link to the complete sample that I just showed.