How to have editable fields through liferay search container? - liferay

Question

I am new to liferay development.
I have done good work to display the liferay grid by using liferay search container.
But now the requirement is that some of the fields in the grid should have provision to be modified by user.
Is it possible through liferay search container or do I need to follow any other approach to achieve editable liferay grid?

Answer 1

You can use <liferay-ui:search-container-column-jsp tag or directly use <aui-input /> inside the <liferay-ui:search-container-column-text tag.
Example (I have included code comments with the code sample for your understanding):
<liferay-ui:search-container
emptyResultsMessage="no-assets-selected"
iteratorURL="<%= configurationRenderURL %>"
total="<%= assetEntries.size() %>"
>
<liferay-ui:search-container-results
results="<%= assetEntries.subList(searchContainer.getStart(), searchContainer.getResultEnd()) %>"
/>
<liferay-ui:search-container-row
className="com.liferay.portlet.asset.model.AssetEntry"
escapedModel="<%= true %>"
keyProperty="entryId"
modelVar="assetEntry"
>
<aui:form action="doesThisWork?">
<%-- this is the normal way --%>
<liferay-ui:search-container-column-text
name="type"
value="<%= assetRendererFactory.getTypeName(locale, false) %>"
/>
<liferay-ui:search-container-column-date
name="modified-date"
value="<%= assetEntry.getModifiedDate() %>"
/>
<%--
this is the JSP way
You can include anything in the JSP like <input /> fields, textarea, select drop-down etc.
--%>
<liferay-ui:search-container-column-jsp
align="right"
path="/html/portlet/asset_publisher/asset_selection_action.jsp"
/>
<%--
Here is including <input /> field inside the column text field.
Notice I am not using the "value" attribute of this tag, instead I am
writing HTML inside the body of this tag.
--%>
<liferay-ui:search-container-column-text
name="type"
>
<aui:input type="text" name="enterSomething" value="I can enter input here" />
<aui:input type="text" name="enterSomething" value="<%=assetEntry.getTitle %>" />
<aui:input type="hidden" name="enterSomething" value="this is a hidden field of the form" />
</liferay-ui:search-container-column-text>
</aui:form>
</liferay-ui:search-container-row>
<liferay-ui:search-iterator paginate="<%= total > SearchContainer.DEFAULT_DELTA %>" />
</liferay-ui:search-container>
In the above example, there would be a <form> for each row, so you can have a submit button at the end of each row to submit the data for that row.
But you can do it in other ways as well:
You can write the <form> outside the Search-container tag so that you just have one form and can submit all the row data togather
Or else you can have a <form> somewhere down the page and through javascript populate the value in the form and then submit.
Or else you can use ajax and other stuff to accomplish this. Or a combination of several approaches.
I leave this upto you to figure out.
Disclaimer: I have not test this code. But as per my understanding this should work. :-)