Move roweditor in the same column with other buttons

Question

I have a datatable in which I use roweditor. Everything works fine, but I need to add a few more buttons in the column in which I have a pencil button for editing. This "other" button is always under the pencil. I tried <p:panelgrid columns="3"... but when I did this row editing, it was not possible. I believe the problem is with the other two buttons that come with line editing ( ui-icon-check and ui-icon-close ). Can anyone give me an idea? Here is my datatable:

  <p:dataTable id="sifarnikTable" rowIndexVar="rowIndex" value="#{attrsBean.listOfDataBeans}" editable="true" selectionMode="multiple" selection="#{attrsBean.selektovani}" widgetVar="datatableWidget" var="row" rowKey="#{row.primaryKey}" paginator="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" currentPageReportTemplate="{startRecord} - {endRecord} / {totalRecords}" emptyMessage="#{messages['datatable.emptymessage']}" rows="15" sortMode="multiple" paginatorAlwaysVisible="false" filteredValue="#{attrsBean.filteredDatatableList}"> <f:facet name="header"> #{resources['db_parametri.title']} </f:facet> <p:ajax event="rowSelect" /> <p:ajax event="rowUnselect" /> <p:ajax event="rowEdit" listener="#{attrsBean.onEdit}" update=":aswdatatable:form:messages, :aswdatatable:form:sifarnikTable, :aswdatatable:form:noviBtn" /> <p:ajax event="rowEditCancel" listener="#{attrsBean.onCancel}" update=":aswdatatable:form:messages" /> <p:columns id="columns" var="column" value="#{attrsBean.columns}" style="#{column.css}" width="#{column.width}" sortBy="#{row[column.property]}" filterStyle="#{attrsBean.columnCSS}" filterBy="#{attrsBean.showFilter==false ? null : row[column.property]}"> <f:facet name="header"> <h:outputText value="#{column.header}" /> </f:facet> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{row[column.property]}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{row[column.property]}" style="width:96%"></p:inputText> </f:facet> </p:cellEditor> </p:columns> <p:column style="width:6px" exportable="false" > <p:rowEditor /> <div onclick="datatableWidget.unselectAllRows();datatableWidget.selectRow(#{rowIndex}, false);"> <h:panelGroup layout="block"> <p:cellEditor> <f:facet name="output"> <p:commandLink id="deleteBtn" onclick="datatableWidget.unselectAllRows();datatableWidget.selectRow(#{rowIndex}, false);brisanjeWidget.show()" process="@this" update=":aswdatatable:form:brisanjeDisplay, :aswdatatable:form:sifarnikTable" styleClass="ui-icon ui-icon-trash"> <f:setPropertyActionListener target="#{attrsBean.modelForDelete}" value="#{row}" /> </p:commandLink> </f:facet> <f:facet name="input"> <h:outputText value="" /> </f:facet> </p:cellEditor> </h:panelGroup> </div> </p:column> </p:dataTable> 

Answer 1

Set the style="width: 100%" <p:column/> attribute. The column will resize to suit any additional components. A column span can be limited only by the size of any container container. for instance

  <h:panelGrid id="theGrid" style="width:200px"> <p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true"> <p:column id="controlColumn" style="width:100%"> <p:rowEditor /> <p:commandButton value="Testing"/> </p:column> </p:dataTable> </h:panelGrid> 

In the above snippet, the controlColumn range controlColumn limited by theGrid width

Answer 2

In Primefaces 5.x:

 .ui-row-editor:after { clear: none !important; } 

Answer 3

I solved this by overriding css:

.ui-row-editor{ display: inline; }

Answer 4

Another solution:

 .ui-row-editor { float: left; }