Spring Controller class for jQuery grid

I have already posted an article of creating jQuery grid using struts 2 action class. This post explains, how to write spring controller class which supports to implement a jQuery grid. If you want to get through of crating a jQuery grid with spring controller class, you must first read my previous post which has shown bellow.

How to use jQuery grid with struts 2 without plugin ?

I am not going to repeat the same stuff which I have explained in my previous post here, because this post has only a few slight differences from my previous post. The previous post used a struts 2 action class as controller and this post uses a spring controller class instead of that. And also, previous post uses Province model class directly to represent the data. In this post, I am using a ProvinceDTO (Data Transfer Object) to bring data into controller level. Except above, the whole technique of implementing grid is exactly similar to previous post. So I am 100% sure that, if you go through the previous post first, you will definitely implement the same grid with spring controller class.

When creating jQuery grid with JSON response data, we need to properly synchronize some fields with client side to work grid properly. Those fields include,

• rows       -The number of rows for one page.
• page       -The page number requested.
• sord        -Sorting order.
• sidx         -Sorting index.
• total        -Total number of records.
• records   -The number of records returned for particular search criteria.
• _search   -Either 'true' or 'false' indicating a particular request is search or not.
• oper        -The type of operation, either 'add', 'del' or 'edit'

There are a few more fields like above which I have not mentioned here. You can refer jQuery documentation to know those. 

In my previous post, with struts 2 action class, I have placed these fields with in the action class itself. With spring controller class, I created separate generic Data Transfer Object to keep these properties and also 'gridModel' which is a collection of any type holding grid data. Every Data Transfer Object which carries data to create jQuery grid must be inherited from this grid support Data Transfer Object. 

The code for grid support Data Transfer Object is as follows.

 package com.blimp.dto;

 import java.util.List;

 public class GridSupportDTO<T> { 

 private List<T> gridModel = null;
 
 private Integer rows = 0;
 private Integer page = 0;
 private String sord;
 private String sidx;
 private Integer total = 0;
 private Integer records = 0;
 private Boolean _search;
 private String oper = null;
 
 public List<T> getGridModel() {
      return gridModel;
 }
 public void setGridModel(List<T> gridModel) {
      this.gridModel = gridModel;
 }
 public Integer getRows() {
      return rows;
 }
 public void setRows(Integer rows) {
      this.rows = rows;
 }
 public Integer getPage() {
      return page;
 }
 public void setPage(Integer page) {
      this.page = page;
 }
 public String getSord() {
      return sord;
 }
 public void setSord(String sord) {
  this.sord = sord;
 }
 public String getSidx() {
      return sidx;
 }
 public void setSidx(String sidx) {
      this.sidx = sidx;
 }
 public Integer getTotal() {
      return total;
 }
 public void setTotal(Integer total) {
      this.total = total;
 }
 public Integer getRecords() {
      return records;
 }
 public void setRecords(Integer records) {
      this.records = records;
 }
 public Boolean get_search() {
      return _search;
 }
 public void set_search(Boolean _search) {
      this._search = _search;
 }
 public String getOper() {
      return oper;
 }
 public void setOper(String oper) {
      this.oper = oper;
 } 
}

In above class, 'gridModel' is a generic collection which carries data for the grid. Let's see my ProvinceDTO.java class which represent data for each a single grid row. 

 package com.blimp.dto;

 import java.io.Serializable;

 public class ProvinceDTO extends GridSupportDTO<ProvinceDTO> implements Serializable {

 private static final long serialVersionUID = 8805507589278247940L;
 
 private Long id;
 
 private String name;
 
 private String provinceStatus;

 public Long getId() {
      return id;
 }

 public void setId(Long id) {
      this.id = id;
 }

 public String getName() {
      return name;
 }

 public void setName(String name) {
      this.name = name;
 }

 public String getProvinceStatus() {
      return provinceStatus;
 }

 public void setProvinceStatus(String provinceStatus) {
      this.provinceStatus = provinceStatus;
 }
}

I am going to implement the same grid with same fields as my previous post. In my previous post, I have used Provice.java entity class, but here, I am using ProvinceDTO.java class, since I don't want to clutter my entity classes with grid specific attributes or don't want to extends from a class which has grid specific attributes. Other thing is, I am using Data Transfer Object pattern with this project.

Next, we'll see our spring controller class which supports to implement jQuery grid.

package com.blimp.webapp.controller;

import java.security.Principal;
import java.util.List;
import java.util.Locale;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.blimp.dto.Page;
import com.blimp.dto.ProvinceDTO;
import com.blimp.model.Province;

@Controller
public class ProvinceController {

    @Autowired
    private ProvinceService provinceService;
 
    @RequestMapping(value = "*search*", method = RequestMethod.GET)
    public @ResponseBody
    ProvinceDTO searchProvince(Principal principal, ProvinceDTO provinceDTO, 
    Model model, Locale locale) {
  
    try {
   
         Page<Province, ProvinceDTO> requestedPage = new Page<Province, ProvinceDTO>(); 
         requestedPage.setPage(provinceDTO.getPage());
         requestedPage.setRows(10);
   
         Page<Province, ProvinceDTO> resultPage = provinceService.findByCriteria(provinceDTO, requestedPage);
         List<ProvinceDTO> provinceList = resultPage.getResultDtoList();
   
         provinceDTO.setGridModel(provinceList);
         provinceDTO.setRecords(resultPage.getRecords());
         provinceDTO.setTotal(resultPage.getTotals());
   
    } catch (Exception e) {
         e.printStackTrace();
    }
  
    return ProvinceDTO;
  }
}

Note that, I have passed 'provinceDTO' as a parameter for above controller method and also the method returns the same 'provinceDTO' and ultimately as a JSON response to the browser. I have annotated the method with '@ResponseBody' annotation which converts what ever the returning stuff from this method into JSON. I have updated 'gridModel', 'records' and 'totals' with appropriate data. The methods of service layer, DAO layer are exactly similar as in my previous post. Don't be lazy, have a look on my previous post, If you really need to implement jQuery grid with spring controller class. 

From the client side Javascript code, you need only to change the 'url' and 'editurl' attributes of the grid as follows.

url:CONTEXT_ROOT + '/search'
editurl:CONTEXT_ROOT + '/edit'

I haven't implement the controller method for edit function in above controller class. That's it for this post. I hope this will be a good start working with jQuery grid and spring controller. If you have problem of achieving this, feel free to contact me with a simple mail.