By

Cool Grid Hacks Part 1 - Dynamic Listbox

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:

Figure One: Dynamic ListboxFigure Two: Dynamic Listbox

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 support@nitobi.com, 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.

Written by