How to display jqxGrid in spring

Question

I have to implement the jqxGrid using spring.I don't know how to do it on spring.Below is my controller class AccountController.java:

@Controller
@RequestMapping(value="/account")
public class AccountsController {
@Autowired
private AccountService accountService;
@RequestMapping(value = "/list", method = RequestMethod.GET, headers = 
 "Accept=application/json")
public @ResponseBody ModelAndView listOfAccounts() {
    ModelAndView modelAndView = new ModelAndView();

    List<Accounts> accounts = accountService.getAccounts();
    modelAndView.addObject("accounts", accounts);

    return modelAndView;


}

 }

I think the json data retrieved from Accounts.java class is in the format :

[{"id":"1","PeriodName":2000-2001,"PeriodStartDate":"2000-01-01","PeriodEndDate":"2001-12-31"},{"id":"2","PeriodName":2001-2002,"PeriodStartDate":"2001-01-01","PeriodEndDate":"2002-12-31"}]

Below is jquery get request for the json response and code for getting the jqxGrid:

$.get('account/list',function(responseJson) {

             var data = responseJson;
             var source =
                {     
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'PeriodName' },
                        { name: 'PeriodStartDate' },
                        { name: 'PeriodEndDate' }
                    ],
                    id: 'id',
                    localdata: data
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
        {
            //columnsresize: true,
            width: 800,
            source: dataAdapter,
            pageable: true,
            //pagerButtonsCount: 10,
            autoheight: true,
           // editable: false,
            pagerrenderer: pagerrenderer,
            columns: [
              { text: 'Period Name', datafield: 'PeriodName', width: 200 },
              { text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
              { text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
            ]
        });
 });

But i didn't get the grid on here.I don't know where is the problem in the above code.I have imported all js files for jqxGrid.Please help me to solve this

Answer 1

*I looked on your problem here is the same code (little modified). comment that pagerenderer code .You have not defined the pagerenderer function anywhere. It will work. here is the working code http://jsfiddle.net/qwm3z/ .

     responseJson = <c:out value="${accounts}" />;

     var data = responseJson;

      var source =
                {     
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'PeriodName' },
                        { name: 'PeriodStartDate' },
                        { name: 'PeriodEndDate' }
                    ],
                    id: 'id',
                    localdata: data
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
        {
            //columnsresize: true,
            width: 800,
            source: dataAdapter,
            pageable: true,
            //pagerButtonsCount: 10,
            autoheight: true,
           // editable: false,
           // pagerrenderer: pagerrenderer,
            columns: [
              { text: 'Period Name', datafield: 'PeriodName', width: 200 },
              { text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
              { text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
            ]
        });

and why are you making grid in each response? you can make one time and update it for every get request.*