Question

i am using spring 3 with jqgrid Everything is working fine except load data into select option from controller i am try to load into jsion Array object and send to jsp page but i am unable to load value to select option using

(editoptions: {dataUrl:"location/role.do")

please see my code which and help me out

my controller class is

@Controller
@RequestMapping("/location")
public class AddCenterLocation {

    @Autowired
    private RecoupService recoupService;

    @RequestMapping(method = RequestMethod.GET)
    public @ResponseBody
    CustomCenterLocationResponse getAll() {
        List<? extends CenterLocation> users = recoupService.getCenter();
        response.setRows(users);
        response.setRecords(String.valueOf(users.size()));
        response.setPage("1");
        response.setTotal("10");
        return response;
    }

    @RequestMapping(value = "/role", method = RequestMethod.GET)
    public @ResponseBody
    CustomGenericResponse role(HttpServletRequest request, HttpServletResponse response) {
        JSONObject jsonArray = new JSONObject();
        try {
            List<CenterLocation> users = recoupService.getCenter();
            for (CenterLocation harbour : users) {
                jsonArray.put(harbour.getCenterId(), harbour.getCenterAddress());
            }
            response.getWriter().write(jsonArray.toString());
        } catch (Exception exception) {
            System.out.println("error is " + exception);
        }
        return null;

    }

this is my jsp page

jq(function() {
    jq("#grid").jqGrid({
        url:'location.do',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Id', 'Center Name', 'Address','Country','State','City','Pin Code','Land Line No','Mobile No','Role'],
        colModel:[
            {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
            {name:'centerName',index:'centerName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerAddress',index:'centerAddress', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerCountry',index:'centerCountry', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerState',index:'centerState', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerCity',index:'centerCity', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'centerPinCode',index:'centerPinCode', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'landLineNo',index:'landLineNo', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'mobileNo',index:'mobileNo', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            { name: 'Slger', index: 'Slger', editable: true, edittype: "select",
                editoptions: {dataUrl:"location/role.do",
                    buildSelect: function (data) {
                        var response = jQuery.parseJSON(data.responseText);
                        var s = '<select>';
                        if (response && response.length) {
                            for (var i = 0, l = response.length; i < l; i++) {
                                var ri = response[i];
                                s += '<option value="' + ri + '">' + ri + '</option>';
                            }
                        }
                        return s + "</select>";
                    }
                }
            }

        ],
        postData: { 

        },
        rowNum:20,
        rowList:[20,40,60],
        height: 400,
        autowidth: true,
        rownumbers: true,
        pager: '#pager',
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc",
        caption:"Users",
        emptyrecords: "Empty records",
        loadonce: false,
        loadComplete: function() {
        },
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id"
        }
    });
    jq("#grid").jqGrid('navGrid','#pager',
    {edit:false,add:false,del:false,search:true},
    { },
    { },
    { }, 
    { 
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
        closeOnEscape: true, 
        multipleSearch: true, 
        closeAfterSearch: true }
);



    jq("#grid").navButtonAdd('#pager',
    {   caption:"Add", 
        buttonicon:"ui-icon-plus", 
        onClickButton: addRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#grid").navButtonAdd('#pager',
    {   caption:"Edit", 
        buttonicon:"ui-icon-pencil", 
        onClickButton: editRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#grid").navButtonAdd('#pager',
    {   caption:"Delete", 
        buttonicon:"ui-icon-trash", 
        onClickButton: deleteRow,
        position: "last", 
        title:"", 
        cursor: "pointer"
    } 
);

    jq("#btnFilter").click(function(){
        jq("#grid").jqGrid('searchGrid',
        {multipleSearch: false, 
            sopt:['eq']}
    );
    });

    // Toolbar Search
    jq("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});

});

Answer 1

first jackson lib is import into lib folder for send json data to jsp page.
then
create two pojo class this is only for demo you can change as your requirement

public class Location {

List role;

 //setter getter

}

public class Role
{

private String id;
private String name;

//setter getter

}

this is the controller request

@RequestMapping(value = “/role”, method = RequestMethod.GET)

public @ResponseBody
Location role(HttpServletResponse response) {

    System.out.println("name");
    Location shop = new Location();
    List<Role> list = new ArrayList<Role>();
    Role role = new Role();
    role.setId("abc");
    role.setName("abc");
    list.add(role);
    Role role1 = new Role();
    role1.setId("abc1");
    role1.setName("abc1");
    list.add(role1);
    shop.setRole(list);
    return shop;

}

jsp page

modify select portion of jqgrid

{ name: 'name', index: 'name', editable: true, edittype: "select",
 editoptions: {dataUrl:"location/role.do", 
buildSelect: function (role) 
{ 
var data = jQuery.parseJSON(role); 
var s = '<select>'; 
for (var i = 0; i < data.role.length; i++) {
 s += '<option value="' + data.role[i].id + '">' + data.role[i].name + '</option>'; 
} 
return s + "</select>"; 
} 
} 
}

it will run fine