Using a drop-down list in an editable grid column using Struts2-jQuery-grid plugin

Question

I'm trying to populate a drop down list in a grid column using the Struts2-jQuery-grid-3.7.0 plugin as follows.

<s:url id="dataURL" action="CategoryList" namespace="/admin_side"/>

<sjg:gridColumn name="subCategory.category.catName" 
                index="subCategory.category.catName" 
                edittype="select"
                searchtype="select" 
                formoptions="{label:'Select'}" 
                surl="%{dataURL}" 
                editoptions="{dataUrl : '%{dataURL}'}"
                editrules="{required: true}" 
                title="Category" width="200" 
                sortable="true" search="true" 
                editable="true" sorttype="text"/>

And the action where the CategoryList action is mapped is as follows.

@Namespace("/admin_side")
@ResultPath("/WEB-INF/content")
@ParentPackage(value="struts-default")
public final class CategoryList extends ActionSupport implements Serializable {
    @Autowired
    private final transient Service service = null;
    private List<Category>categories = new ArrayList<Category>();

    private static final long serialVersionUID = 1L;

    public List<Category> getCategories() {
        return categories;
    }

    @Action(value = "CategoryList",
            results = {
                @Result(name = ActionSupport.SUCCESS, location = "Product.jsp"),
                @Result(name = ActionSupport.INPUT, location = "Product.jsp")},
            interceptorRefs = {
                @InterceptorRef(value = "defaultStack", params = {"validation.validateAnnotatedMethodOnly", "true", "validation.excludeMethods", "load"})})
    public String load() throws Exception {
        System.out.println("load called...");
        categories = service.getCatgeoryList();
        return ActionSupport.SUCCESS;
    }
}

When a given edit link on the grid is clicked, the load() method is executed where a list of categories is loaded from the database.

The list in the grid however, displays nothing in edit mode (when the edit link is clicked). I cannot find relative examples that may demonstrate this kind of thing.

How to populate this drop down list especially, how to give this drop down labels using the catName property and values using the catId (of Long type) property separately (while category in the list has many other attributes)?

I don't find relevant examples to map a java.util.List<E> to <sjg:grid>.

---

_{subCategory.category.catName is a nested property of Product entity.}

_{In this case, even after populating the list, it should also be noted that the display value of this column is catName (category name of type String). The value of the selected item however, to be set to an instance of Product should be catId (category id of type Long) which doesn't seem possible as the name of this column is subCategory.category.catName.}

_{Intuitively, catId (subCategory.category.catId) would be mapped to catName (subCategory.category.catName) which would be wrong, if I could envision correctly as if the list were already populated.}

Answer 1

In Struts 2, the HTML drop down list can be rendered via <s:select> tag. To auto select a default value for a drop down list, just declared a “value” attribute in the tag, and set the default value accordingly.

Example:

A Java list to generate the select options for the drop down box.

//...
public class SelectAction extends ActionSupport {

    private List<String> searchEngine;
    private String yourSearchEngine;

    //set default value
    public String getDefaultSearchEngine() {
        return "yahoo.com";
    }

    public SelectAction() { 
        searchEngine = new ArrayList<String>();
        searchEngine.add("google.com");
        searchEngine.add("bing.com");
        searchEngine.add("yahoo.com");
        searchEngine.add("baidu.com");
    }
    //...
}

tag to render the HTML drop down box. The value=”defaultSearchEngine” will call the corresponds Action class getDefaultSearchEngine() method to return a default search engine value.

Many Actions share common concerns. Some Actions need input validated. Other Actions may need a file upload to be pre-processed. Another Action might need protection from a double submit. Many Actions need drop-down lists and other controls pre-populated before the page displays.

<s:select label="What's your favor search engine" 
    headerKey="-1" headerValue="Select Search Engines"
    list="searchEngine" 
    name="yourSearchEngine" 
    value="defaultSearchEngine" />

In this example, the drop down box will auto select the “yahoo.com” as the default option.

Add Struts2 jQuery Plugin Tag lib to your JSP

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

Enable jQuery Grid Plugin in your Head Tag

<sj:head jqueryui="true" jquerytheme="redmond" />

update:

Specify an Edit Url in your JSP

<s:url var="editurl" action="edit-grid-entry"/>

And enable Edit by setting following attributes in your JSP

 <sjg:grid ... editurl="%{editurl}" ...>

then define which Column should be editable

<sjg:gridColumn ...
  editable="true" 
  edittype="<type>" 
  editoptions="{<options>}"
  editrules="{<rules>}"
... />

Example for an Edit Options:

<sjg:gridColumn 
name="country" 
index="country" 
title="Country" 
editable="true" 
edittype="select" 
editoptions="{value:'France:France;USA:USA;Australia:Australia;Norway:Norway;Spain:Spain'}"/>

Example for an Edit Rules:

<sjg:gridColumn name="creditLimit"
              index="creditLimit"
              title="Credit Limit" 
              editable="true"
              editrules="{
                             number: true,
                             required: true,
                             minValue : 100.0,
                             maxValue : 10000.0
                         }"
              formatter="currency"/>

update:1

<select name="catid" size="15" id="dataURL" multiple="multiple">    
    <option value="1 - One ">1 - One </option> 
    <option value="2 - Two">2 - Two</option> 
    <option value="3 - Three">3 - Three</option> 
    <option value="4 - Four">4 - Four</option> 
    <option value="5 - Five">5 - Five</option> 
</select>