datatable renders empty rows

[gbpanchal]

I have a scenario where I am displaying a list of categorized items. For each category I am displaying a tab. Within each tab is a datatable that lists the items for that specific category. In the datatable I only render the column if the vehicleCategoryID matches the category for the tab selected. So if "Cars" has a categoryID of 1 and "Trucks" has a categoryID of 2 then when the first tab is selected I only render the column if the categoryID is 1. Notice I am using a single datatable here as it is much easier to create, manipulate, and read instead of the 7 different datatables I would have to create otherwise. At first glance this works great. When I click on the "Cars" tab I only see car models and when I click on the "Trucks" tab I see only truck models. The problem with this though is I noticed some odd spacing between some of the rows in the tables. Not horrible, but enough to throw the ui look off. Upon further inspection of the page source I found that the spacing between rows was caused by empty additional tags being added without any matching tags. This is when I realized that even though the columns were not being rendered due to how I specified the rendered attribute, the rows were still being rendered. I suppose I made a mistake in assuming that if no columns were rendered, the rows would not be rendered either. See the pseudo-code below for an example of what I am talking about.

My question is obviously has anyone easily worked around this issue and gotten the tags to not render. I was hoping for an easy solution as I need to deploy this application shortly, but I am open to any responses on the matter.



For example pseudo-code:

(datamodel "vehicleDataModel" contains all data for both "Cars" and "Trucks")
...



<h:outputText value="#{vehicleData.vehicleModel}" />






<h:outputText value="#{vehicleData.vehicleModel}" />



...

[gbpanchal]

I have a scenario where I am displaying a list of categorized items. For each category I am displaying a tab. Within each tab is a datatable that lists the items for that specific category. In the datatable I only render the column if the vehicleCategoryID matches the category for the tab selected. So if "Cars" has a categoryID of 1 and "Trucks" has a categoryID of 2 then when the first tab is selected I only render the column if the categoryID is 1. Notice I am using a single datatable here as it is much easier to create, manipulate, and read instead of the 7 different datatables I would have to create otherwise. At first glance this works great. When I click on the "Cars" tab I only see car models and when I click on the "Trucks" tab I see only truck models. The problem with this though is I noticed some odd spacing between some of the rows in the tables. Not horrible, but enough to throw the ui look off. Upon further inspection of the page source I found that the spacing between rows was caused by empty additional tags being added without any matching tags. This is when I realized that even though the columns were not being rendered due to how I specified the rendered attribute, the rows were still being rendered. I suppose I made a mistake in assuming that if no columns were rendered, the rows would not be rendered either. See the pseudo-code below for an example of what I am talking about.

My question is obviously has anyone easily worked around this issue and gotten the "TR" tags to not render. I was hoping for an easy solution as I need to deploy this application shortly, but I am open to any responses on the matter.

For example pseudo-code:

(datamodel "vehicleDataModel" contains all data for both "Cars" and "Trucks")
...



<h:outputText value="#{vehicleData.vehicleModel}" />






<h:outputText value="#{vehicleData.vehicleModel}" />



...

[gbpanchal]

Finally i havesolved my problem...

My problem was that, i had problem of unnecessary empty rows in the h:dataTable. The unnecessary tag has been added without tag inside while i have seen the HTML code of JSF page. It was happening due to conditional rendering of column inside data table.

To solve this i have removed the conditional rendering of the column and put "first" and "rows" data members at backing bean. While navigation i set their values and then in JSF page i have put h:dataTable with both of its attribute "first" and "rows" assigned to their specific values in the backing bean.