Row rendering on extendedDataTable doesnt work - jsf-2

Question (short version)
I have an issue with richfaces(4.3.2-final).
I'm trying to rerender a row/cells inside a rich:extendedDataTable. I can't get it to work.
The only thing that works is to rerender the whole table.
All examples/tutorials i can find are for version 3.3. Those solutions dont work for me.
I hope you can help me with a solution or a 4.2+ example/tutorial.
Long version of the question
Not selected row cells:
<a4j:outputPanel layout="block" rendered="#{inactive}">
<h:outputText
value="#{cc.attrs.rowItem.getValue(cc.attrs.id)}"
styleClass="outputField"
style="#{cc.attrs.style}">
</h:outputText>
</a4j:outputPanel>
Selected Row cells:
<a4j:outputPanel layout="block" rendered="#{active and field.echoed}">
<h:inputText
value="#{field.value}"
id="#{cc.attrs.id}ID"
disabled="#{field.disabled}"
readonly="#{field.readonly}"
rendered="true"
title="#{field.title}"/>
....
</a4j:outputPanel>
On selection of other rows:
<a4j:ajax event="selectionchange"
listener="#{crudBean.actionForm.selectionListener}"
render="messages,saveButton,deleteButton,multiOccurenceTable"
/>
HTML code, not selected row cell:
<td class="rf-edt-td-j_idt230">
<div class="rf-edt-c rf-edt-c-j_idt230">
<div class="rf-edt-c-cnt">
<div id="multiOccurenceTable:0:soort:soort">
<div id="multiOccurenceTable:0:soort:j_idt140">
<span class=" outputField" style="">VO</span>
</div>
</div>
</div>
</div>
</td>
Selected row cell HTML:
<td class="rf-edt-td-j_idt230">
<div class="rf-edt-c rf-edt-c-j_idt230">
<div class="rf-edt-c-cnt">
<div id="multiOccurenceTable:1:soort:soort">
<div id="multiOccurenceTable:1:soort:j_idt240">
<input id="multiOccurenceTable:1:soort:soortID" name="multiOccurenceTable:1:soort:soortID" value="VO" type="text">
</div>
</div>
</div>
</div>
</td>
My attempts:
The on selectionchange rerender is now put on the table:"multiOccurenceTable".
This works, on every selection change the whole table gets rerendered.
For performance i try to update the table on row or cell level. I can't get get this to work. I tried simple and more complex solutions, none worked. What am i doing wrong?
(most examples/tutorials are for richfaces 3.3 on the internet which could be a reason)
Try 1, manually updating the rows/cells:
all 3 rows: nothing happened when i pressed the 'save' button
<a4j:commandLink actionListener="#{crudBean.actionForm.save}"
render="multiOccurenceTable:0,multiOccurenceTable:1,multiOccurenceTable:2"
reRender="multiOccurenceTable:0,multiOccurenceTable:1,multiOccurenceTable:2">Save
</a4j:commandLink>
One cell: nothing happened when i pressed the 'save1' button
<a4j:commandLink actionListener="#{crudBean.actionForm.save}"
render="multiOccurenceTable:#rows(crudBean.actionForm.rowsToUpdate):soort"
reRender="multiOccurenceTable:#rows(crudBean.actionForm.rowsToUpdate):soort">Save1
</a4j:commandLink>
I've also tried with ajaxKeys with no succes according to this tutorial rich 3.x and this example (rich 3.3)
If you got any possible solutions, please let me know.
My error is fixed. The error was not the rendering. but that the condition for rendering was set outside the component that was rendered. This resulted in rerendering the component with not updated values, which led to no change on the screen.
Lessons learned: If you have render conditions make sure the condition values are inside the rerendered component.

I'm not familiar enough with richfaces 4 to know the details of the extendedDatatable. A quick search led me to believe that it is not possible to automagically render a row since a row isn't a component.
So you seems to be stuck having to render the individual cells.
Rendering works based on the clientId's of the components. You can find the exact ID's in your html code. Because it works on those clientId's the component you want to render already needs to be rendered.
In other words, you need to wrap your components with a panel that has an id and is rendered per default:
<h:outputPanel layout="block" id="soortPanel">
<h:outputText
value="#{cc.attrs.rowItem.getValue(cc.attrs.id)}"
rendered="#{inactive}">
</h:outputText>
<h:inputText
value="#{field.value}"
rendered="#{active}"/>
</h:outputPanel>
The outputpanel should get an id like: multiOccurenceTable:1:soortPanel and you should be able to render that id.

Related

How to disable field's auoifilling in Chrome with Vaadin?

In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437

Umbraco - Add more than one RTE in Custom Grid Editor

I am creating custom grid editor and I would like to have more than one RTE inside of it. Currently, I am initializing RTE like this
<div unique-id="control.$uniqueId"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
This works fine for one instance of RTE. However, when I try to add 2nd or 3rd RTE in this manner, they are not initialized, instead I am getting multiline textbox.
So, how to add more than one RTE, and, is this best way to add RTE?
I had the same problem. I have solved the problem by adding $index. Like so:
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte">
</div>
<div unique-id="control.$uniqueId + $index"
value="control.text1"
grid-rte configuration="control.config.rte"> </div>
The previous answer works when the control is inside the ng-repeat directive, ie
<tr ng-repeat="rowData in control.tabelsData">
<td>
<div
unique-id="control.$uniqueId + $index"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
</td>
</tr>
Otherwise yes, manually modifying the unique-id would be the answer for a known amount of multiple amount of Rich Text Editors in the editor
<div
unique-id="control.$uniqueId+1"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>
<div
unique-id="control.$uniqueId+2"
value="rowData.content"
grid-rte configuration="rteconfig" style="border:4px solid #EB4F1C;">
</div>

Richfaces tooltip not working with h:selectOneRadio

I would like to "bind" a tooltip to a h:selectOneRadio.
Following the example found here, I tried with
<td>
<h:selectOneRadio id="subscriptionType" value="#bean.subscriptionType}">
<f:selectItems value="#{beanModel.subscriptionTypeValues}" />
<rich:tooltip id="tt1" for="subscriptionType" layout="block" >
<span style="white-space: nowrap">
Data is for laptop, modem, ...<br />
Voice is for smartphone, ...
</span>
</rich:tooltip>
</h:selectOneRadio>
<h:messages for="subscriptionType" style="color:red; font-size:12px;" />
</td>
but the tooltip doesn't appear...
Do I miss something or it is not possible to use tooltips with radio buttons?
Problem solved.
I didn't see an error message at the bottom of the page saying
One or more resources have the target of 'body', but no 'body'
component has been defined within the view
So, after having googled for the error message I came to the solution posted here:
use h:body tag, instead of body
and now it works!

Refreshing jQueryMobile styling on radio buttons on the fly

I'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.
My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.
<div data-role="content">
...
<fieldset data-role="controlgroup" id="showChooser">
<legend><h3>Which show are you attending?</h3></legend>
<input type="radio" name="activeShow" id="activeShow1" value="1" />
<label for="activeShow1">
<h2>Choice 1</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow2" value="2" />
<label for="activeShow2">
<h2>Choice 2</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow3" value="3" />
<label for="activeShow3">
<h2>Choice 3</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
...
</fieldset>
...
</div>
This results in the following list being displayed:
(source: skitch.com)
So, on-click of one of them, I'm running this code:
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c');
$(this).next().attr('data-theme','e');
$("#settings").page();
});
The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.
Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.
The first time you click one, it has the desired effect:
But subsequent clicks don't appear to un-highlight any previously selected rows:
I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?
I had the exact same problem.
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
$(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});
See this jQuery forum post.

Primefaces conditional logic within <p:dataGrid>

I have a data table which has two images per column, one that is displayed and also a hidden image that is not. The idea is to dislpay the hidden image on top of the other image if an attribute #{person.isLocked} result set is set to 'T'. My code has a div and within that div has two div's, one for the main image and then one for the image that will be overlayed. (Code below) The image that is to be overlayed has a style attribute display: none; . I need somehow to check to see if the #{person.isLocked} equals 'T', if so then I need to change the css to display:block; else leave it be.
<p:dataGrid var="person" value="myBean.people">
<p:column>
<h:panelGird style="margin-left:auto; margin-right:auto;">
<div>
<div style="position:absolute; z-index:1;">
<p:graphicImage value="image?id=#{person.id}" cache="false"/>
</div>
<div style="position:absolute; z-index:100; display: none;">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
</div>
</h:panelGrad>
</p:column>
</p:dataGrid>
The only solution I have come up with is instead of storing 'T' or 'F' in the database as #{person.isLocked}, store the css attribute instead, so I would store 'block' or 'none' and then call the person attribute in the style like so.
<div style="position:absolute: z-index:100; display: #{person.isLocked}">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
This seems like a bad design though. I don't want to manipulate the data in my database just for display purposes. Has anyone found a different way of doing this?
I've never used Primefaces, but you could try
<ui:fragment rendered="#{person.isLocked}">
<!-- your div here -->
</ui fragment>

Resources