I want to hide the currentPageReportTemplate text when I clicked a button for print. I need only print the image of the datatable.
<p:outputPanel id="outImpresion">
<p:dataTable scrollable="false" scrollWidth="50%" styleClass="myTable"
var="r" value="#{indicePartidaController.listResulIndice}"
sortMode="multiple" rows ="10" paginator="true"
paginatorPosition="bottom" emptyMessage ="No Existe Ningún Dato para esta Consulta">
currentPageReportTemplate="Mostrando Partidas del {startRecord} al {endRecord} ">
</p:outputPanel>
<p:commandButton value="Imprimir" icon="ui-icon-print" ajax="false">
<p:printer target="outImpresion" />
You can achieve this with CSS #media rules. Just create a #media print rule wherein you put all CSS selectors which should achieve the necessary look'n'feel when the print media is used. The paginator is identified by the ui-paginator classname, so if you just set that to display: none, then it will be hidden in print.
Put this somewhere in a CSS file, generally the bottom is the best place.
#media print {
.ui-paginator {
display: none;
}
}
Alternatively, you can also use
<h:outputStylesheet name="print.css" media="print" />
with a separate print.css file containing just
.ui-paginator {
display: none;
}
Related
JSF 2.2; PrimeFaces 5.3
My goal is to capture user closing dialog by clicking X button, go back to parent page so data can be refreshed and update form.
I was able to get p:remoteCommand to call my confirmAndCloseDialog() method in DialogBean, but the onDialogReturn() method in ParentBean is never called. Why is onDialogReturn not called? Any way I can get it to work?
BTW if a user would exit out dialog the normal way, i.e. close the dialog by clicking p:commandButton (CLOSE DIALOG), then everythign is fine.
Here are my codes.
Thank you!
Parent page:
<h:form>
...
<p:commandButton value="Open dialog"
id="openDialogButton"
actionListener="#{parentBean.openDialog()}"
update="#form">
<p:ajax event="dialogReturn"
listener="#{parentBean.onDialogReturn}"
update="#form"/>
</p:commandButton>
...
</h:form>
Dialog page:
<body style="height: 80%;" onunload="userClickOnX();" >
<h:form id="aForm">
<p:remoteCommand id="userClickOnX"
name="userClickOnX"
actionListener="#{dailogBean.confirmAndCloseDialog}"/>
......
<p:commandButton id="closeDialog"
value="CLOSE DIALOG"
actionListener="#{dialogBean.confirmAndCloseDialog}"/>
</h:form>
</body>
ParentBean
public void openDialog() {
Map<String, Object> options = new HashMap<>();
options.put("modal", true);
options.put("draggable", true);
options.put("resizable", true);
options.put("closable", true);
options.put("contentWidth", "100%");
options.put("contentHeight", "100%");
options.put("width", 1000);
options.put("height", 800);
RequestContext.getCurrentInstance().openDialog("dialog", options, null);
}
public void onDialogReturn(SelectEvent event) {
refresh data ....
}
DialogBean:
public void confirmAndCloseDialog() {
RequestContext.getCurrentInstance().closeDialog(objectForParent);
}
4 years later, Primefaces' dialog framework default closable "X" button is still just a link and uses javascript to hide the dialog, that is why the dialogReturn event isn't fired on using said button. I don't know a way to "intercept" its action. So if you don't want to have a custom button closing your dialog, you're out of luck, BUT you can always reinvent the wheel, kind of:
Copy Primefaces's button and make it better :)
<h:body>
<h:form id="formToolbar">
<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" href="#"
role="button"
style="float: right; position: relative; top: -10px; left: -3px; color: #757575;"
onclick="close()">
<span class="ui-icon ui-icon-closethick"></span>
</a>
<p:remoteCommand id="close" name="close" action="#{dialogController.close()}">
</p:remoteCommand>
</h:form>
...
<h:body>
You can tweek the position and color to your liking
In the dialog bean:
public void close() {
PrimeFaces.current().dialog().closeDynamic(null);
}
Now you can expect the returnDialog event in the parent page and respective bean.
<p:commandButton action="#{parentBean.openDialog(param)}">
<p:ajax event="dialogReturn" listener="#{parentBean.handleReturn()}"/>
</p:commandButton>
Remember to set closable to false when opening the dialog otherwise you will have two "X" buttons:
Map<String,Object> options = new HashMap<String, Object>();
options.put("closable", false);
options.put("draggable", false);
PrimeFaces.current().dialog().openDynamic(
"dialog",
options,
null)
PS: I set draggable to false as well, you can still use draggable mode, but this creates a bar on top of the dialog that's not reachable inside the dialog's page, so your "X" button would be positioned a little more towards the bottom which isn't aesthetically pleasing. Hopefully dragging isn't a must.
Have you setup the Dialog Configurations?
As per: http://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf
faces-config.xml
<application>
<action-listener>
org.primefaces.application.DialogActionListener
</action-listener>
<navigation-handler>
org.primefaces.application.DialogNavigationHandler
</navigation-handler>
<view-handler>
org.primefaces.application.DialogViewHandler
</view-handler>
</application>
Also - your :
should be inside the dialog div/contruction, not inside the button you're selecting.
I want to set fixed width for cxolumns in datatable
I tried
different width for all columns.
But the width changes based on the size of data . If data has space it folds down else the table width get increased.
Thanks in advance.
You need to create a CSS definition for your datatable. Lets call this your p:datatable:
<p:dataTable id="myDataTable" .... var="something">
<p:column headerText="column1">
#{something.propertyA}
</p:column>
<p:column headerText="column2">
#{something.propertyB}
</p:column>
</p:dataTable>
Then your CSS definition must be:
#myDataTable.ui-datatable thead th,
#myDataTable.ui-datatable tbody td,
#myDataTable.ui-datatable tfoot td {
white-space: normal;
word-wrap: break-word;
}
Links explaining word-wrap: break-word
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Word-wrap in an HTML table
and white-space: normal:
http://www.w3schools.com/cssref/pr_text_white-space.asp
I need to have a separator/delimiter between <f:selectItems> for <p:selectManyMenu> this is JSF2 + Primeface3 web application. Please find the code below:
<p:selectManyMenu
id="venue" value="#{PstOfrBen.selectedVenues}"
required="true" style="width: 285px;height: 200px">
<f:selectItems value="#{BsnsDshbrdBen.business.venues}" var="venue"
itemLabel="#{venue.venueAsDisplayString}" itemValue="#{venue.seoURL}" />
</p:selectManyMenu>
Just adapt the class of the menuitems:
.ui-selectlistbox-item {
border-bottom: 1px solid black;
}
In my application I have a <p:dialog>, in the dialog I placed a h:selectBooleanCheckbox . If this is checked then one row below this will apear otherwise
this row will hidden.By default dialog's position is center of the page. Now Problem is when I checked this booleanCheckbox the height and width of dialog is
increased as new row's content is greater than previous dialog , then the position doesn't remain center of the page, I mean the dialog's size increases bottom and right side.
How I can display dialog at center after increasing its content? Any pointer will be very helpful to me . Thanks,
Sory for my bad English.
code of .xhtml is given below:
<p:dialog id="popUp" widgetVar="popUpWidget"
showEffect="fade" hideEffect="explode" resizable="false" modal="true">
<p:row>
<h:outputLabel value="#{adbBundle['addRemoveActivityManagers']}" />
<h:selectBooleanCheckbox value="#{activityListController.editActivityManager}" immediate="true">
<p:ajax event="click" update="adminPanel" listener="#{activityListController.updateActivityManager}"/>
</h:selectBooleanCheckbox>
</p:row>
<p:row rendered="#{activityListController.editActivityManager}">
<p:column>
<p:dataTable id="sourceManagerDataTable" value="#{activityListController.activitySourceUsers}" var="manager" liveScroll="true" scrollRows="5"
scrollHeight="125" selection="#{activityListController.selectedActivitySourceUsers}" selectionMode="multiple"
filteredValue="#{activityListController.filteredSourceUsers}" scrollable="true" styleClass="activityManager">
<f:facet name="header">
<h:outputText value="Available Managers" />
</f:facet>
<p:column headerText="Full Name" sortBy="#{manager.lastName}" filterBy="#{manager.fullName}" filterMatchMode="contains">
<h:outputText value="#{manager.lastName}, #{manager.firstName}" />
</p:column>
</p:dataTable>
</p:column>
</p:row></p:dialog>
So when you click to the checkbox or check it call a function which re-renders your dialog so add this onstart="setSize();" to you p:ajax:
And below is the JavaScript function:
function setSize () {
$(".ui-dialog").css ({
"width": 300,
"height": 200,
"left": "50%",
"top": "50%",
"margin-left": -150,
"margin-top": -100
});
}
Don't forget if you decide to change height or width values you should give the margin values as -1/2 times of them. The values that I gave are not certain you should chande them if it should be bigger or whatever.
If you want to detect unchecked checkbox and set height due to it's state our function can be sth. like that:
function setSize () {
var checkBox = $(document.getElementById('myCheckBox'));
$('.ui-dialog').css ({
'width' : 300,
'height': 200,
'left': "50%",
'top': "50%",
'margin-left': -150,
'margin-top': -100
});
if(!checkBox.checked) {//If it doesn't checked; it can be checkBox.attr('checked')
$(".ui-dialog").css ({
"height": 150, //New height value which is starting dialog height when it's unchecked
"margin-top": -75
});
}
}
}
You should give the correct clientID of your checkbox which you can see in your browser's developer options also maybe instead of this; height:auto; can work as well.
I am using jquery Mobile 1.0.
I have this html code.
<label for="slider" class="ui-hidden-accessible">
Input slider:
</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
Its rendering like this:
But I want to remove the red marked part. I want to show only slider part.
How can this be done?
If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
Or as Frederic Hamidi stated, you can just hide the element all together and only a slider will be visible.
Here is a demo of the above code: http://jsfiddle.net/EWQ6n/1/
Also you can hide the input element with CSS (which is nice because you don't have to time the execution of the CSS like you do with JS):
.ui-slider-input {
display : none !important;
}
Here is a demo using CSS: http://jsfiddle.net/EWQ6n/2/
Update
Instead of using the !important keyword, you can also make a more specific CSS rule so it is used over the jQuery Mobile classes. An example would be:
.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}
input.ui-slider-input {
display: none;
}
You could hide the input control manually:
$("#yourPage").live("pageinit", function() {
$(".ui-slider-input").hide();
});
If you only want to get rid of the up/down arrow use type="text" data-type="range"
<input type="text" data-type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
I wanted to do this too, but I also wanted the space to go away. I accomplished this this way (I'm using a range slider):
<div data-role="rangeslider" data-mini="true" class="no-number">
<input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439">
<input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>
Notice I added the .no-number to the div.
Then in css:
/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
display : none;
width: 0px;
}
/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
margin: 0 5px; !important
}
I'm doing this all as part of a bigger issue, which is that I'm trying to use a range slider for time instead of numbers, so I replaced those elements with a heading I can change with a function to display the time.
This may not be the perfect choice, but I didn't see where to get the space back anywhere, so I thought I would post it here.
When you do it using CSS approach, you may break the input filed of other. So adding the class="ui-hidden-accessible" class to the input to hide it.
Remove this class="ui-hidden-accessible" from label.
Your approach is correct. But you need to add class="ui-hidden-accessible" to input not on the label.
Your code should be like this:
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider"
value="25" min="0" max="100" class="ui-hidden-accessible"/>
Check this SAMPLE DEMO
<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" />
but look that anoy offset
.ui-slider-track {
margin: 0 15px 0 68px; ----> change to 10
}
You Can Remove Input Slider As Below :
input.ui-slider-input {
display: none;
width: 0;
}
.ui-slider-track {
margin: 0 15px 0 15px !important;
}