Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.11.7.  < rich:inplaceSelect > available since 3.2.0

The <rich:inplaceSelect> is used for the creation of select based inputs: it shows the value as a text in one state and enables editing the value, providing a list of options in another state


The "value" attribute is a value-binding expression for the current value of the component.

The <rich:inplaceSelect> component has three functional states:

You can form the list of the options using <f:selectItem/> and <f:selectItems/> JSF components.

Please, see the example below.

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="click to edit">
    <f:selectItems  value="#{bean.selectItems}"/>
    <f:selectItem itemValue="1" itemLabel="factory"/>
    <f:selectItem itemValue="2" itemLabel="newspaper"/>
</rich:inplaceSelect>
...

In the example above the value of the selected item is available via "value" attribute.

The "editEvent" attribute provides an option to assign a JavaScript action that initiates the change of the state from view to edit. The default value is "onclick".

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="Double Click to edit" editEvent="ondblclick">
    <f:selectItems value="#{demo.selectItems}" />
</rich:inplaceSelect>
...

The <rich:inplaceSelect> component provides specific event attributes:

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}">
    <f:selectItems value="#{demo.selectItems}" />
</rich:inplaceSelect>
... 

The given code illustrates how "oneditactivation" attribute works, namely when the state is being changed from view to edit, a confirmation window with a message "Are you sure you want to change value?" comes up.

To prevent opening the drop-down list by default, once edit state is activated, set the "openOnEdit" attribute to "false". The default value is "true".

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true" openOnEdit="false">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...

This is the result:


Nowever, if you want to confirm the data saving explicitly you can use the "showControls" attribute, which makes "Save" and "Cancel" buttons (displayed as icons) appear next to the input field. Edit state can be deactivated by pressing "Esc" key. An option in the drop-drown list can be also selected by pressing "Enter".

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...

This is the result:


You can also position the controls relatively to the input field, by means of

  • the "controlsHorizontalPosition" attribute with "left", "right" and "center" definitions

  • the "controlsVerticalPosition " attribute with "bottom" and "top" definitions

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" controlsHorizontalPosition="left" controlsVerticalPosition="center" showControls="true">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
... 

This is the result:


It is also possible to use "controls" facet in order to replace the default controls with facets content. See the example below.

Example:


...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true">
    <f:facet name="controls">
        <button onclick="#{rich:component('inplaceSelect')}.save();" type="button">Save</button>
        <button onclick="#{rich:component('inplaceSelect')}.cancel();" type="button">Cancel</button> 
    </f:facet>  
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
... 

This is the result:


Note:

The "controls" facet also implies using "showControls" attribute and it has to be defined as "true".

The <rich:inplaceSelect> component could be rendered with <span> or <div> elements to display its value. In order to change default <span> output, use the "layout" attribute with "block" value.

The <rich:inplaceSelect> component supports the standard "tabindex" attribute. When the component gets focus the edit mode is activated and drop-down list is opened.

The "selectWidth" , "minSelectWidth" and "maxSelectWidth" attributes are provided to specify the width, minimal width and maximal width for the input element respectively.

In order to specify the height and width parameters for the list items of the component, you can use "listHeight" and " listWidth" attributes.

Table of <rich:inplaceSelect> attributes.






You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

On the component Live Demo page you can see the example of <rich:inplaceSelect> usage and sources for the given example.