CODEWITHSUNDEEP
jsfbootsfaces
sascha_lamp
sascha_lamp

Reputation: 179

Bootsfaces modalbox filled with data from a dataTable column

I am working with JSF 2.0 and Bootsfaces 0.9.1. I have a dataTable based on user data from the database. Each column also contains of a couple of buttons to modify the data.

enter image description here

When I click on the pencil (edit user), a modalbox is displayed, in which I want to modify the respective data.

enter image description here

Since I want to edit the data, I want the current information filled into the text boxes automatically. How can I do that?

Here's the xhtml source:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
    <b:dataTable value="#{membersController.users}"
                 var="user"
                 id="users-table"
                 page-length="25"
                 row-highlight="true">
        <b:dataTableColumn label="Id" value="#{user.userId}"/>
        <b:dataTableColumn label="User name" value="#{user.userName}"/>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Operations"/>
            </f:facet>
            <b:button style="padding: 0 4px;" iconAwesome="pencil" look="link" p:data-target="#userEditModal" p:data-toggle="modal"
                      onclick="return false;"/>
            <b:button style="padding: 0 4px;" iconAwesome="trash" look="link" p:data-target="#userEditModal" p:data-toggle="modal"
                      onclick="return false;"/>
        </h:column>
    </b:dataTable>
    <b:modal id="userEditModal" title="Modal Example" styleClass="modalPseudoClass">
        <h:panelGrid columns="2" cellpadding="5">
            <h:outputText value="User name:"/>
            <b:inputText>
            </b:inputText>
        </h:panelGrid>
        <f:facet name="footer">
            <b:button value="close" dismiss="modal" onclick="return false;"/>
            <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
        </f:facet>
    </b:modal>
</h:body>
</html>

Upvotes: 1

Views: 1714

Answers (1)

Stephan Rauh
Stephan Rauh

Reputation: 3120

That's a bug in BootsFaces 0.9.1 and below. I've solved it in BootsFaces-0.9.2-SNAPSHOT. Note that this is not a production-ready version, but a developer snapshot. See this entry on how to get the snapshot.

I've documented how to use buttons in a data table in our developer showcase. Scroll down to the latest example. The example uses a kind of in-cell-editing instead of the modal dialog, but I'm sure you'll be able to adapt the example. If not, don't hesitate to ask.

The original bug was reported here. If you feel our bugfix is still incomplete, feel free to report the bug on our bug tracker. Thanks in advance!

Upvotes: 2

Related Questions