Switching from jqGrid to jQuery UI Grid - Proof-of-Concept Dataview extension

One of projects I'm working on is in very early design stage. Initially we have proposed jqGrid as a client-side grid widget, but because the project will be using jQuery UI the requirement was made that jqGrid can be changed to jQuery UI Grid when it will be ready. I have made a suggestion that this can be achieved without changes on server-side, thanks to custom Dataview extension which would make the requests in the same why as jqGrid does. Whenever there is an idea, there should be a proof-of-concept for it.

This implementation is just a proof-of-concept as the jQuery UI Grid plugin is in a pre-release version. Specific technical details may change in future.

I have described general aspects of Dataview extension in my previous post so I will focus on the jqGrid specific aspects of implementation. First the values for nd, rows and page parameters should be set based on the current time and request.paging properties.

var data = {
  "nd": new Date().getTime(),
  "rows": request.paging.limit,
  "page": (request.paging.offset / request.paging.limit) + 1
};

Sorting is supported in jqGrid through sidx and sord parameters - those need to be extracted from request.sort option.

if (request.sort.length === 1) {
  if (request.sort[0].slice(0, 1) === "-") {
    data["sidx"] = request.sort[0].slice(1);
    data["sord"] = "desc";
  } else {
    data["sidx"] = request.sort[0];
    data["sord"] = "asc";
  }
}

For filtering I've decided to go with implementation which would send filters in the same way as jqGrid advanced searching does.

if (request.filter) {
  var filters = [];
  $.each(request.filter, function (property, filter) {
    if (!filter.operator) {
      filter.operator = isNaN(filter.value) ? "like" : "==";
    }

    var operators = {
      "<": "lt",
      "<=": "le",
      ">": "gt",
      ">=": "ge",
      "==": "eq",
      "!=": "ne",
      "like": "bw"
    };

    filters[filters.length] = "{\"field\":\"" + property + "\",\"op\":\"" + operators[filter.operator] + "\",\"data\":\"" + filter.value + "\"}";
  });

  data["_search"] = true;
  data["filters"] = "{\"groupOp\":\"AND\",\"rules\":[" + filters.join(",") + "]}";
} else {
  data["_search"] = false;
}

Now the parameters can be send to server and the response processed. I've added an additional methodType option for request control.

$.ajax({
  url: request.resource,
  type: request.methodType,
  dataType: "json",
  data: data,
  success: function (data) {
    response(data.rows, data.records);
  }
});

I'm going to keep working on this project at GitHub in order to add support for some more jqGrid options and keep it up to date with changes in jQuery UI Grid.