disabling rendering of a particular column on rendering entire datatable - css

In the code below there is datatable with id discoObject. This id is render on selecting a drop down which changes color of the column according to the selection hence AJAX call.
There is another field call freeText of type inputTextArea. As soon as i select a drop down value what ever text is written in freeText area it vanishes. This is because on ajax call i am rendering whole datatable. But if i don't render whole datatable and only render column id for drop down, it will not change color of drop down. I want the color of drop down to be changed retaining whatever value i have entered in freetext.
Please help me in this.
Thanks is advance.
<p:dataTable styleClass="ui-datatable-scrollable-body list" var="discoViewObject" rowIndexVar="index" id="discoObject" rowKey="#{discoViewObject.uniqueId}" style="height:500px"
rowStyleClass="#{(index % 2) eq 0? 'tablerow' : 'tablerowAlter'}" selection="#{staffMsgingHccDiscoHandler.hccDiscoBean.discoViewObjectSelectionList}"
value="#{staffMsgingHccDiscoHandler.hccDiscoBean.discoViewObjectList}" >
<p:column id="decisionColor" headerText="#{message['CNS.fltDisruption.oneFlightMessae.hccDecision']}"
styleClass="#{(discoViewObject.disruptedPaxGroupType.decision) eq 'MISSED CONNECTION'? 'decisionRed' : '' }
#{(discoViewObject.disruptedPaxGroupType.decision) eq 'WILL WAIT'? 'decisionGreen' : '' }
#{(discoViewObject.disruptedPaxGroupType.decision) eq 'PENDING'? 'decisionYellow' : '' }">
<h:selectOneMenu value="#{discoViewObject.disruptedPaxGroupType.decision}">
<f:selectItem itemLabel="CONNECTION OK" itemValue="CONNECTION OK"></f:selectItem>
<f:selectItem itemLabel="WILL WAIT" itemValue="WILL WAIT"></f:selectItem>
<f:selectItem itemLabel="PENDING" itemValue="PENDING"></f:selectItem>
<f:selectItem itemLabel="MISSED CONNECTION" itemValue="MISSED CONNECTION"></f:selectItem>
<f:selectItem itemLabel="TO BE ANNOUNCED" itemValue="TO BE ANNOUNCED"></f:selectItem>
<f:ajax event="change" render="discoObject"></f:ajax>
</h:selectOneMenu>
</p:column>
<p:column headerText="Free Text" >
<h:inputTextarea cols="6" rows="4" style="width: 192px; height: 63px;" value="#{discoViewObject.freeTextOutBoundFlt}" ></h:inputTextarea>
</p:column>

Related

Is it possible to bold a text of a list item until you find a dash in CSS?

I am creating a list dynamically and would like to add some CSS that bold part of the text of the list-items. This would be possible to be delivered by bolding the text until you find a dash -.
The output I am aiming for is the above:
First Title - first element
Second Title - second element
<listbox hflex="1" style="text-align:left; border: none;" model="#load(model.validationWarnings)">
<template name="model">
<listitem disabled="true" style="background: #ffff !important;">
<listcell value="${each}" label="${each}" style="font-size: 12px; color: #E85252;"/>
</listitem>
</template>
</listbox>
A better option would be to put two labels in your listcell.
Instead of using ListModelList<String> or List<String> as model, you can use a pojo with msg1 and msg2 fields for example, or any other type that allow multiple entries per line (Map, Array, etc.)
Assuming Pojo option (ListModelList<MyPojo> instead of ListModelList<String>):
<style>
.msg1{
font-weight: bold;
}
</style>
...
<listcell value="${each}">
<label value="${each.msg1}" sclass="msg1" />
<label value="${each.msg2}" sclass="msg2" />
</listcell>

Black,white Color of datatable row hide the row data

Am using Primefaces Datatable on this way:
each object of datatable has attribute color saved in database depends on this color it will be the color of its row.
in the case of row black color without selecting this row,data are not readable as font is black.
in case of row white color and i selected the row,data also are not readable because in case of selection font changed to white color.
1-Any advice on how to solve this issue by putting in consideration the first case will apply on all dark colors and second case will apply for all light colors?
2-Also any solution for coloring the whole row depending on the color attribute in one statement without getting this color in each column (style="background-color: #{lottiBean.getColor(lotto)}">)
<p:dataTable id="lottiTable" widgetVar="lottiTable" var="lotto"
resizableColumns="true" selectionMode="single"
selection="#{lottiBean.selectedLotto}" rowKey="#{lotto.idLotti}"
value="#{lottiBean.allLottis}" rowsPerPageTemplate="5,10,25,50" rows="10"
style="padding-top:10px;padding-bottom:10px"
sortBy="#{lotto.dataLotto.time}" sortOrder="DESCENDING"
paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}">
<f:facet name="{Exporters}">
<p:commandLink id="excel" ajax="false">
<p:graphicImage library="images" name="excel.png" width="24" />
<p:dataExporter type="xls" target="lottiTable" fileName="Lotti" />
</p:commandLink>
<p:commandLink id="pdf" ajax="false" immediate="true">
<p:graphicImage library="images" name="pdf.png" width="24" />
<p:dataExporter type="pdf" target="lottiTable" fileName="Lotti" />
</p:commandLink>
</f:facet>
<p:column headerText="#{messages.label_unita_operativa}" filterBy="" style="background-color: #{lottiBean.getColor(lotto)}" >
<h:outputText value="#{lottiBean.getUoCode(lotto)}" />
</p:column>
<p:column headerText="#{messages.label_codiceLotti}" filterBy="#{lotto.codiceLotti}"
sortBy="#{lotto.codiceLotti}" style="background-color: #{lottiBean.getColor(lotto)}">
<h:outputText value="#{lotto.codiceLotti}" />
</p:column>
AND HERE IS MY GETTING COLOR METHOD:
public String getColor(Lotti lotti) {
String colorValue=null;
try {
if (lotti != null) {
if (lotti.getCrLottiuos() != null && lotti.getCrLottiuos().iterator().hasNext())
colorValue = lotti.getCrLottiuos().iterator().next().getIdUo().getIdColore().getCodiceColore();//GET COLOR FROM DATABASE AS HEXA VALUE EX:#FFFFF0
}
} catch (Exception ex) {
colorValue = null;
System.out.println(ex.getMessage());
}
return colorValue;
}
Your needs are not really clear, but here is a solution to how to add a column in p:databale, to display a color saved on the database, this may help you :
<p:column headerText="coulor" >
<div style="display: compact;" >
<span class="ui-button-text">
<span
style="overflow:hidden;
width:1em;height:1em;display:block;
border:solid 1px #000;text-indent:1em;
white-space:nowrap;
background-color:##{lotti.color}">
</span>
</span>
</div>
</p:column>
When it comes to coloring a row of a datatable, you can use rowStyleClass to restyle a row :
rowStyleClass="#{ lotti.color == 'ff3d3d' ? 'redClass' : lotti.color == '3D46FF' ? 'bleuClass' : null }
Visit primefaces showcase for more information about how to condition row styling: http://www.primefaces.org/showcase/ui/data/datatable/rowColor.xhtml

<br> &#10 &#xa inside <h:commandButton value> not interpreted as linebreak

I have the following problem, i have a JSF command button:
<h:commandButton value="#{o.foo}" actionListener="#{someAction}" styleClass="#{row.buttonCssStyle} buttonMenu ">
<f:attribute name="smthing" value="#{o.smthing}" />
</h:commandButton>
This renders as expected
(Sorry for text removal)
But the commandButtons which have ( as last char on a line do NOT linebreak and i dont know how to solve it. We are talking about IE 9
Command buttons generated css:
Any help is highly appreciated, thanks
edit:
from ie debugger:
<input name="formId:we:_idJsp112:_idJsp113:3:_idJsp115" class="missingDatesButtonState buttonMenu " id="formId:afterSales:_idJsp112:_idJsp113:3:_idJsp115" onclick="..." type="submit" _nodup="30804" value="TESTST(RL, EBO und SLP) ( <br/>( ( ( ( ( ( ( asda #### # # # ### # ( asda"/>
Edit #BalusC:
This is the result with line feed:
I consider it is a failure of the IE9 on parsing of the value , when generating the element... since it works for text but not for symbols... I think it is directly related to that....
HTML code inside HTML attributes isn't interpeted as HTML. This isn't a JSF problem.
Just insert a real linefeed character either via
or
in (X)HTML or i18n bundle file,
<h:commandButton ... value="top line
bottom line" />
... or via \n in Java.
<h:commandButton ... value="#{bean.value}" />
value = "top line \n bottom line";

openui5 grid layout formatting

I have a openui5 dialog with a grid layout in it. dialog is constructed with an xml view, a couple of buttons and the call
//
// Create view
//
var view = sap.ui.view({
type:sap.ui.core.mvc.ViewType.XML,
viewName:"some.viewname"
});
blahDialog = new sap.ui.commons.Dialog({
modal : true,
title: "Create New Blah",
buttons : [ btnSave, btnCancel ],
content : [ view ]
});
in the xml view I have a grid. One column for the label, one column for the UI element the user enters her data. This element can be a textfield, datepicker, dropdown, whatever. I have planned 2 columns for the label, 6 for the UI elements. Works fine so far.
But now I have a new requirement. In the first row, I want 2 small buttons right to the text field. So I gave the text field only 4 cols and the remaining 2 for the new buttons, 1 for each. The buttons only contain an icon so they are not very large.
This is how the dialog looks like:
https://dl.dropboxusercontent.com/u/25030606/pic.png
Here is the XML:
<mvc:View xmlns:c="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.ui.commons"
controllerName="exporgui5.expensedialog"
xmlns:html="http://www.w3.org/1999/xhtml"
width="360px">
<l:Grid>
<l:content>
<Label text="Trip">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<TextField width="100%" value="Some value" editable="false">
<layoutData>
<l:GridData span="L4"/>
</layoutData>
</TextField>
<Button icon="icons/luggage--plus.png"><layoutData>
<l:GridData span="L1"/>
</layoutData>
</Button>
<Button icon="icons/bin-metal-full.png"><layoutData>
<l:GridData span="L1"/>
</layoutData>
</Button>
<Label text="Expense Type">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<DropdownBox id="drpExpenseType"
items="{expTypes>/k}"
displaySecondaryValues="true"
change="onExpTypeChange" width="100%">
<layoutData>
<l:GridData span="L6"/>
</layoutData>
<c:ListItem text="{expTypes>shortName}" additionalText="{expTypes>description}" key="{expTypes>id}"/>
</DropdownBox>
<Label text="Date">
<layoutData>
<l:GridData span="L2" />
</layoutData>
</Label>
<DatePicker locale="DE" id="date" yyyymmdd="{svModel>/dateValue}" change="onDateChange" width="100%">
<layoutData>
<l:GridData span="L6" />
</layoutData>
</DatePicker>
</l:content>
</l:Grid>
</mvc:View>
I thought in one row I can put elements whose width sums up to some total number of columns, in my case this is 8. And as long as I don't do this button thingy it works that way. Why does the "Expense Type" label show up in the first row? What do I have to do so that the text field for trip spans over 4 columns and the 2 button come right next to it?
Any help is appreciated.
Thanks
Kai
According to the documentation of the Grid, the sum per row is 12. If you want to have the text field and the two buttons in one row you can assign the following spans:
TextField: 8
Button 1: 2
Button 2: 2
SUM: 12
I don't know about the grid layout but I'd try using a matrix layout. You'll have more control over your rows and still have a grid like layout.
As I'm not experienced in XML views I unfortunately can't help you with the code but here's the associated documentation: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/commons/demokit/MatrixLayout.html
You should add a defaultSpan attribute to your View:
<l:Grid
...
defaultSpan="L3 M5 S12"
>
According to API-doc this specifies the number of "cols" an element in the grid can use. L, M and S are the screen-resolutions. Max number of cols are 12 in Grid-Layout.

Issues with changing RadioButtonList to individual RadioButtons

I inherited a form that includes a RadioButtonList structure that's similar to this (names changed to protect the innocent):
<asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
<asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
<asp:ListItem Value="Evers" Text="Evers (Second Base)" />
<asp:ListItem Value="Chance" Text="Chance (First Base)" />
</asp:RadioButtonList>
When it renders in a browser, of course, it looks something like this:
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
</table>
Here's my problem: I need it to look like this (note the difference in table cell rendering):
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
</table>
In other words, I need the name and (position) separated out into separate columns, but they still need to align by row. Is this possible in a RadioButtonList?
I've tried making them into individual RadioButton objects, but after doing so, I started getting the following:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
I tried messing around with validation (including setting the CausesValidation property to "False"), all to no avail.
Note: I am not as concerned about the validation error as much as I am about the table rendering; that is more important (unless, that is, fixing the validation error helps fix the rendering issue).
What would be the best way to tackle this?
Thanks in advance . . .
Edit: I was able to recreate what I wanted by using straight client-side <input> tags, but this is not ideal. I would much prefer using server-side <asp:RadioButton>.
I've been doing some digging, and it appears that the reason why my RadioButton tags are failing validation is because of the ct100 prefixes that are concatenated to the beginning of the ID/Name tags. When the page is working (with the RadioButtonList) the IDs for each ListItem seems to have a "ct100_Content_" prefix, but the name has a "ct100$Content$" prefix.
The error I'm getting (when trying to use individual RadioButtons) is:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
From what I'm seeing, I think the control is looking for "ctl00_Content_ChicagoCubsInfield_0" (note the "_" instead of the "$").
How do I force the ID to use the underscores instead of dollar signs? I need to keep it local to these tags, as I believe settings are used elsewhere (again, this is not my form), and I don't want to break anything else.
Edit: So much for that theory. I came across the "ClientIDMode" attribute, set it to "Static", and explicitly set my IDs. No dice. The digging continues . . .
This may be answer what you are looking for:
$( document ).ready(function() {
$('label[for^="ChicagoCubsInfield"]' ).each(function() {
var data = $(this).text();
var arr = data.split('(');
$(this).text(data.substring(0, data.indexOf("(")));
$(this).parent().parent().append("<td>(" + arr[1] + "</td>");
// alert(arr[0] + " : " + arr[1]);
});
//alert( $('#ctl00_Content_ChicagoCubsInfield').html());
});
See Demo:
Demo Here
When all was said and done, here's what I ended up doing . . .
I added this to my <script>:
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);
This did exactly what I wanted. Now I can format the table at my leisure.

Resources