Skip to Navigation | Skip to Content



Cool Grid Hacks Part 1 - Dynamic Listbox | April 25th, 2007

Juan Carlos Pontaza at Fidelity has created something that a lot of people have been asking about on the forums recently, and that is the Dynamic Listbox. There are a lot of people who wish to have something similar to the Master/Detail Combo example for two listboxes on the same row. This was finally achieved by the Dynamic Listbox, which was included in a modified version of Grid 3.41.

Basically, a standard listbox consists of keys and values. Below is the sample for a Listbox defined with an XML island:


<ntb:textcolumn label="Lookup" xdatafld="ProductCategoryID" width="150">
<ntb:listboxeditor
datasourceid="lookupCategoryDataSource"
displayfields="ProductCategoryName"
valuefield="ProductCategoryName" >
</ntb:listboxeditor>
</ntb:textcolumn>

<!- then, outside the <ntb:columns> tag… ->

<ntb:datasources>
<ntb:datasource id=”lookupCategoryDataSource”>
<ntb:datasourcestructure
id=”lookupCategoryDataSource”
Keys=”ProductCategoryID”
FieldNames=”ProductCategoryID|ProductCategoryName”>
</ntb:datasourcestructure>
<ntb:data id=”lookupCategoryDataSource”>
<ntb:e a=”1″ b=”Cleaners” xi=”0″></ntb:e>
<ntb:e a=”2″ b=”Solvents” xi=”1″></ntb:e>
<ntb:e a=”3″ b=”Adhesives” xi=”2″></ntb:e>
<ntb:e a=”4″ b=”Fuels” xi=”3″></ntb:e>
<ntb:e a=”5″ b=”Waxes” xi=”4″></ntb:e>
<ntb:e a=”6″ b=”Dyes” xi=”5″></ntb:e>
<ntb:e a=”7″ b=”Paints” xi=”6″></ntb:e>
<ntb:e a=”8″ b=”Sealants” xi=”7″></ntb:e>
</ntb:data>
</ntb:datasource>
</ntb:datasources>

In this example, The column is being bound to a ProductCategoryID field and you are getting the ProductCategoryName from the datasource value that matches the ProductCategoryID to be able to render the correct text.

In his case with the dynamic loader, we do not need to display the value, because the datasource will be different per row, so at renderer time we need the description value to write it on the cell. To solve this, the developer has to provide that other column too. For example:

<ntb:textcolumn label="Lookup" xdatafld="ProductCategoryID" xdisplayfld="ProductCategoryName" width="150">
<ntb:listboxeditor
datasourceid="lookupCategoryDataSource"
displayfields="ProductCategoryName"
valuefield="ProductCategoryName" >
</ntb:listboxeditor>
</ntb:textcolumn>

<ntb:textcolumn xdatafld="ProductCategoryName " visible="false"> </ntb:textcolumn>

<ntb:datasources>
<ntb:datasource id="lookupCategoryDataSource">
<ntb:datasourcestructure
id="lookupCategoryDataSource"
Keys="ProductCategoryID"
FieldNames="ProductCategoryID|ProductCategoryName">
</ntb:datasourcestructure>
<ntb:data id="lookupCategoryDataSource">
</ntb:data>
</ntb:datasource>
</ntb:datasources>

Now we don't any problem rendering the values because we have the column that is providing the description (make sure that visible is false, otherwise you will show that other column).
The only thing that is still needed is the url for the loader, for this we are using the dynamicloader attribute.

<ntb:textcolumn label="Lookup" xdatafld="ProductCategoryID" xdisplayfld="ProductCategoryName" width="150">
<ntb:listboxeditor
datasourceid="lookupCategoryDataSource"
dynamicloader="loader.jsp"
displayfields="ProductCategoryName"
valuefield="ProductCategoryName" >
</ntb:listboxeditor>
</ntb:textcolumn>

<ntb:textcolumn xdatafld="ProductCategoryName " visible="false"> </ntb:textcolumn>

<ntb:datasources>
<ntb:datasource id="lookupCategoryDataSource">
<ntb:datasourcestructure
id="lookupCategoryDataSource"
Keys="ProductCategoryID"
FieldNames="ProductCategoryID|ProductCategoryName">
</ntb:datasourcestructure>
<ntb:data id="lookupCategoryDataSource">
</ntb:data>
</ntb:datasource>
</ntb:datasources>

Now everything is ready. If you notice it, i still have the datasource object, because we are using it to initialize and bind the component to it. Now when the cell gets activated the bind method will get fired, the dynamicloader will get called adding the row values as parameters and populating the new combobox. And when you change the value on that cell both columns will get updated.

Here you have an example:

Note: I obscured his e-mail because I don't like people getting spammed. So this is the cool modfication that was added. If I manage to get time in the next few days, I will try to get this code ready for the latest version of Grid. If you have any cool Grid modifications that you did, that you think other people may like, please either post them to the forums, or send them to [email protected], and we will make sure that they are posted for others to see.

Thanks again to Juan Carlos Pontaza at Fidelity for sending us this nice addition to Grid.

Posted in General, Grid | 2 Comments » | Add to Delicious | Digg It

This entry was posted on Wednesday, April 25th, 2007 at 1:24 pm and is filed under General, Grid. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Cool Grid Hacks Part 1 - Dynamic Listbox”

  1. Andre’s Blog » Blog Archive » Flex is Open Sourced - Heyo! Says:

    [...] I find James’ quote from the press release interesting as I suspect it’s going to be a long time before there is really co-creation of the Flex guts. Mind you I guess Fidelity is writing code for us. But who knows. I’m sure the development community will be able to find some new hacks and tricks with access to the code. I know we will:) Technorati Tags: flex, opensource, compiler, ria, open, adobe, flexbuilder [...]

  2. James Governor’s Monkchips » links for 2007-04-26 Says:

    [...] Joe@Nitobi » Blog Archive » Cool Grid Hacks Part 1 - Dynamic Listbox Fidelity makes open source AJAX contribution to Nitobi. Small but useful. (tags: Fidelity AJAX OSS enterprise) [...]

Leave a Reply