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.

Another Blog? Nifty!

Hello, all readers of this blog at the bottom of the screen.  My name is Joe (as indicated by the name of the blog), and this is my Nitobi blog, not to be confused with other, older, misguided blogs that I have had in the days of my youth.  (Or was that less than 2 years, ago. Does that count as “my youth”?)

Anyway, with this blog, I will focus mostly on stuff that comes in that is cool.  The e-mails of the innocent (and sometimes the guilty, if mentioned) will be protected mostly out of making sure that I don’t accidentally end up causing them to get spam.  This will mostly feature posts relating to what problems you may find out in the wild writing your web application, whether that may be in ASP.NET, Java, PHP, CFM, Ruby, etc.  I may also point out public apps that use our components, so if you want to show off your stuff, contact me and I will probably blog about it.

I feel that this wraps up this first post.