How to Assign Custom CSS Class to Arbitrary Arbitrary Rows of H:Datatable

How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

Bind the rowClasses attribute to a bean property which returns the desired string of CSS classes.

<h:dataTable value="#{bean.list}" rowClasses="#{bean.rowClasses}">

with e.g.

public String getRowClasses() {
StringBuilder rowClasses = new StringBuilder();
for (Item item : list) {
if (rowClasses.length() > 0) rowClasses.append(",");
rowClasses.append(item.getRowClass());
}
return rowClasses.toString();
}

Update to clarify, this way you have full programmatic control over the rowClasses string. Note that the above is just a kickoff example, it doesn't necessarily need to be obtained by Item#getRowClass() or so. You can even do it in a simple for loop with a counter.

E.g.

public String getRowClasses() {
StringBuilder rowClasses = new StringBuilder();
for (int i = 0; i < list.size(); i++) {
if (rowClasses.length() > 0) rowClasses.append(",");
rowClasses.append(selected.contains(i) ? "selected" : "none");
}
return rowClasses.toString();
}

where selected is a List<Integer>. If it contains 1, 2 and 5, then the returned string will look like as follows for a list of 10 items:

none,selected,selected,none,none,selected,none,none,none,none

Change individual rows in datatable with JSF

Ok have solved my own problem.

in my style attribute i have done the following to check the condition:

<b:dataTableColumn value="#{daten.erfasser}" label="Erfasser"
style="color:#{gesamt.auswahlHervorheben eq daten.erfasser ? gesamt.farbe : 'black'}; font-weight:#{gesamt.auswahlHervorheben eq daten.erfasser ? 'bold' : 'none'}"></b:dataTableColumn>

Have a nice day---+++

How to apply style to a PrimeFaces dataTable?

Get the Primefaces User Guide of the version of your Primefaces here.

In that document you'll find how to override the styles of each component under Skinning heading.

For Example:

Following is the skinning for p:outputLabel

Sample Image

If you want to change color I'd use my css as which will apply for all p:outputLabels.

.ui-outputlabel{
color:blue;
}

If you want to change style for only one particular p:outputLabel you can use like this

<div class="myLabel">
<p:outputLabel value="This is Demo" />
</div>

then the CSS would be like:

.myLabel .ui-outputlabel{
color:blue;
}

JSF dataTable as CSS table with clickable rows?

Thanks to the input provided, this is the complete answer (versus just in comments) tested in a Java EE/JSF container:

<div class="table">
<ui:repeat value="#{BackingBean.list}" var="item">
<h:outputLink value="url">
<f:param name="ID" value="#{item.ID}"/>
<span class="cell">#{item.ID}</span>
<span class="cell">#{item.Name}</span>
</h:outputLink>
</ui:repeat>
</div>

The above can then be styled using CSS/3 display:table, display:table-row and display:table-cell; respectively. Row is clickable and can be styled as desired.

Can't fix row borders using css in DataTables

You cant add border to tr, However you can add it to each td inside it and it'll look the same.

Edit Your css and make it:

.even td {
border-bottom: 1px solid red;
}

Working fiddle: https://jsfiddle.net/c50tj8fr/

How can I add class for tr in DataTables?

Using createdRow option is the correct way to do it.

For example:

$('#example').DataTable({
'createdRow': function( row, data, dataIndex ) {
$(row).addClass( 'bill-row' );
}
});

However you're retrieving rows incorrectly. Using $(".bill-row") will return rows on the current page only.

As an alternative use $() API method instead.

For example:

var row = $('#example').DataTable().$('.bill-row');

How to apply CSS to the table element through `DataTable` definition (to make its width be 100%)?

You can add a simple word to your class to have full width table for your application.

To this:

<div class="cell cell-1-1 dash-fixed-content">

Add this:

<div class="table table-bordered table-hover table-responsive cell cell-1-1 dash-fixed-content">

This will give you total width of 100% as well as it will be responsive in nature. How? Try resizing your browser and see the effect.

Hope this helps.



Related Topics



Leave a reply



Submit