Show values in each line when search - xpages

Question

I have a combo box, a button and a view for search function. The view has two columns which are Category and Course. In the Course column, I set multi-value separator is "New Line", enable "Multiple values as separate entries" and both view column headers are sort column. Therefore, when use internet explorer to see the application, the view looks like this:
Category | Course
-------------------------------------------------------
Accounting | Advanced Accounting
Accounting | Introduction to Accounting
Accounting | Communication Skills
Accounting | Writing Skills
Engineering | Advanced Engineering
Engineering | Introduction to Engineering
Engineering | Communication Skills
Engineering | Writing Skills
Information Technology | Advanced Information Technology
Information Technology | Introduction to Information Technology
Information Technology | Communication Skills
Information Technology | Writing Skills
(Update)
Thank you stwissel's answer, I remove the button, so there is a combo box and a view that is categorised. Although I do not find "LimitToCategory" in the view properties(grateful if someone let me know where to find it), I get the value from the combo box and put it in "Filter by category name", also the combo box has onchange event and partial update the view.
I run the program, when I choose a category, the view can display relevant values related to the category. Imagine the view show the result like the following:
Category | Course
-------------------------------------------------------
Information Technology | Advanced Information Technology
Introduction to Information Technology
Communication Skills
Writing Skills
However how to display course individually? What can I do to make the course should show individual row? (please see the sample below)
Category | Course
----------------------------------------------------------
Information Technology | Advanced Information Technology
----------------------------------------------------------
Information Technology | Introduction to Information Technology
----------------------------------------------------------
Information Technology | Communication Skills
----------------------------------------------------------
Information Technology | Writing Skills
----------------------------------------------------------
I add another customerConverter from this post xpages view panel column multivalue separator but the result still the same.
Category | Course
----------------------------------------------------------
Information Technology | Advanced Information Technology
----------------------------------------------------------
Information Technology | Introduction to Information Technology
----------------------------------------------------------
Information Technology | Communication Skills
----------------------------------------------------------
Information Technology | Writing Skills
----------------------------------------------------------
I attach the full code for your review please.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoTheme="true">
<xp:this.resources>
<xp:dojoModule name="dijit.form.ComboBox"></xp:dojoModule>
</xp:this.resources>
<xp:comboBox id="comboBox2" dojoType="dijit.form.ComboBox"
style="width:400.0px" value="#{sessionScope.category}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
var SetFirstValueBlank = #Text("");
return SetFirstValueBlank;
}]]></xp:this.value>
</xp:selectItems>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:#Unique(#DbColumn(#DbName(), "CategoryListView", 1));}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="viewPanel5">
</xp:eventHandler>
</xp:comboBox>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:viewPanel rows="30" id="viewPanel5">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager5">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view2"
viewName="CategoryCourseView2">
<xp:this.categoryFilter><![CDATA[#{javascript:getComponent("comboBox2").getValue();}]]></xp:this.categoryFilter>
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="Category" id="viewColumn9"
rendered="false">
<xp:this.converter>
<xp:customConverter
getAsObject="#{javascript:return value;}">
<xp:this.getAsString>
<![CDATA[#{javascript:return #Implode(value, "<br />")}]]>
</xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
<xp:viewColumnHeader value="Category"
id="viewColumnHeader9">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="viewColumn11" columnName="$10"
contentType="HTML">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header"
id="viewColumnHeader11" value="Category">
</xp:viewColumnHeader>
</xp:this.facets>
</xp:viewColumn>
<xp:viewColumn columnName="CourseName" id="viewColumn10"
contentType="HTML">
<xp:this.converter>
<xp:customConverter
getAsObject="#{javascript:return value;}">
<xp:this.getAsString>
<![CDATA[#{javascript:return #Implode(value, "<br />")}]]>
</xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
<xp:viewColumnHeader value="Course"
id="viewColumnHeader10">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
</xp:view>
Grateful for your advice please. Thank you.

Answer 1

When selecting a value from a drop down you are actually perform a filter rather than a search. In XPages you would categorise the view and compute the value of LimitToCategory to be the drop down value - you can directly point to the value in that property.
You wouldn't even need the button. For some design inspiration see this article
Hope that helps

Answer 2

The ViewPanel is a very limited component, aimed at giving a basic view control on the page. If you want a more sophisticated or flexible layout like this, the best approach is to use a repeat control.
The kind of functionality you're likely to be trying to force the View Panel to give you what you want is much more complex than building the layout with a repeat control (which can also take a dominoView as a datasource).