title: Primefaces. Multiple row selection in datatable which is in modal dialog, ui:composition, layout
body: <p>How can I perform multiple row selection in p:dataTable which is in dialog which has modal="true" and that dialog is in ui:composition element, and that ui composition element is placed in layout.</p>
  
  <p>1 problem: (let's assume that for now p:dialog is not placed in layout)
  you cannot perform multiple selection in p:dataTable which is wrapped by p:dialog element unless you remove appendToBody="true" and add transient="true". So now we have modal dialog which has p:dataTable with working multiple selection and everything is placed in ui:composition.
  How does the form look like:</p>
  
  <pre><code>&lt;ui:composition xmlns="http://www.w3c.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:pe="http://primefaces.org/ui/extensions"
  xmlns:c="http://java.sun.com/jsp/jstl/core"
  template="/layout/layout.xhtml"&gt;
  &lt;ui:define&gt;
  &lt;h:form&gt;
      &lt;p:commandButton id="multiViewButton" value="View" 
      update=":form:multiCars" onclick="dlg2.show();" type="button"/&gt; 
  &lt;/h:form&gt;
  
  &lt;h:form id="form"&gt;   
    &lt;p:dialog id="modalDialog" header="Pasirinkimas" widgetVar="dlg2" 
  modal="true" height="300" transient="true" resizable="false" selectionMode="multiple"&gt;  
    &lt;p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}"&gt;
  
      &lt;p:column headerText="Model" style="width:25%"&gt;  
          #{car.model}  
      &lt;/p:column&gt;  
  
      &lt;p:column headerText="Year" style="width:25%"&gt;  
          #{car.year}  
      &lt;/p:column&gt;  
  
      &lt;p:column headerText="Manufacturer" style="width:24%"&gt;  
          #{car.manufacturer}  
      &lt;/p:column&gt;  
  
      &lt;p:column headerText="Color" style="width:24%"&gt;  
          #{car.color}  
      &lt;/p:column&gt;  
  
  &lt;/p:dataTable&gt;  
  
  &lt;p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"  
      update=":form:displayMulti" oncomplete="multiCarDialog.show()" process="multiCars"/&gt; 
    &lt;/p:dialog&gt;
      &lt;p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"  
          height="300" showEffect="fade" hideEffect="explode"&gt;  
  
              &lt;p:dataList id="displayMulti" value="#{tableBean.selectedCars}" var="selectedCar"&gt;  
              Model: #{selectedCar.model}, Year: #{selectedCar.year}  
          &lt;/p:dataList&gt;  
      &lt;/p:dialog&gt;  
  &lt;/h:form&gt; 
  &lt;/ui:define&gt; 
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>2 problem.
  The interesting part starts then this ui:composition is placed in layout. Then the shield of p:dialog goes in front of the dialog itself. The solution would be to add appendToBody="true", but then multiple selection stops working and it's not OK. Another solution would be to place dialog outside the layout element, but we are in ui:composition element, so that won't work. My final solution was just to disable p:dialog modal attribute by setting modal="false" but I'm not happy with it. </p>
  
  <p>Is there any way how can one achieve multiple row selection in datatable which is placed in dialog, ui:composition and layout with turned p:dialog modal attribute on?</p>