Using DHTML, however, you can have a categorized view where the categories can be expanded and collapsed on the client, which solves both problems. In part one, we started looking at how this is done, starting with a view with only one category. Now, let's get more advanced. Let's say you have two categories.

Expanding the DHTML view
First, add a field called "Category2" to your form and modify the documents so they contain both categories. Change the Notes view and add a second categorized column between the two existing columns with a value of Category2.

OK, let's think about what we want the browser view to do. When a top-level category is clicked, the subcategories should be shown. And when a subcategory is selected, the documents should be shown. Furthermore, when a top-level category is collapsed, the subcategories should also be collapsed. (That's the way the Notes client works.)

Fortunately, @DocNumber gives us an indented value for subcategories. For example, "1.1" means the first subcategory under the first category. So, you would think that we would just duplicate the first column into the second column, changing "Category1" to "Category2." Well, that's actually pretty close. What actually happens if you do this is the subcategories start out with a </div> tag, so they actually close the <div> tag from the top-level category. This means that all categories are shown, whether they are top-level or not.

"Ok, just remove the </div> tag from the sub-level categories," you say. But that won't quite work either. The documents need to be grouped in their own <div>, and that grouping needs to be closed out. So the </div> is needed. What we want to do instead is to add an empty <div> tag to the end of the top-level categories. This will be closed by the first sub-category's </div> tag. But doing this means we'll be off on the number of <div> </div> pairs, so we have to add a </div> tag to the start of the top-level categories. And this means we want another empty <div> tag at the start of our view template to even out the </div> tags in the first category. Phew! So, now the first column has a value of: