How to set multiple numbers of rows and columns in query panel in UI layer

This blog we will see how to set multiple numbers of rows and columns in the query panel in UI layer. This below screen is the query panel (when we will drag and drop data control of view criteria in UI layer). 

                       

Now we will see how to make multiple row and columns in the above query panel. Add the maxColumns="3" rows="1" in af:query component. The af:query component is 

<af:query id="qryId1" headerText="Search" disclosed="true"
value="#{bindings.EmployeesVOCriteriaQuery.queryDescriptor}"                               

model="#{bindings.EmployeesVOCriteriaQuery.queryModel}"                          

queryListener="#{bindings.EmployeesVOCriteriaQuery.processQuery}"             queryOperationListener="#{bindings.EmployeesVOCriteriaQuery.processQueryOperation}" resultComponentId="::resId1" binding="#{backingBeanScope.backing_QueryPanel.qryId1}" maxColumns="3" rows="1"/>

Now refresh your browser and check number of rows and columns will display.

                    

Thanks...