I've started to implement the editing capability of jqGrid in APEX. After looking at the documentation briefly, I struggled to understand how I could change the POST parameters when rows were saved, as by default I was getting this:

And what I actually needed, was them in the form of x01, x02 etc. So after a bit of searching, looking at the actual code and then back at the wiki, everything was pointing at a non-existent function called "serializeRowData". I then realized that when we create our jqGrid we can pass this function as one of the config parameters just like we do for "onSelectRow".

For simplicity and the fact that APEX onDemnad processes only cater for 10 variables I decided to pass the data back in an actual JSON object, well a string representation of it to be precise, as I'll post process it server side with PLJSON. All I needed to do was convert my postdata object into a string and convert it back to a JSON object and I got a little help from json2.js for that. Here's the solution:

jQuery("#tableid").jqGrid({
 ....
 serializeRowData: function(postdata){
    return { x01: JSON.stringify(postdata) };
 }
 ....
});

Which results in the following:

The next step was to add a new member function to the JSON type in PLJSON to extract the column names to use in the query, i.e. as they are the keys. There's no existing functionality that provides this, but it was simple as the following:

  member function get_keys return json_list as
    keys json_list;
    indx pls_integer;
  begin
    keys := json_list();
    indx := json_data.first;
    loop
      exit when indx is null;
      keys.add_elem(json_data(indx).member_name);
      indx := json_data.next(indx);
    end loop;
    return keys;
  end;

It's the start of a new decade and I've got a long list of New Years resolutions, one is to start a personal blog ( I normally write for the e-DBA blog ) and another is to do some jQuery moonlighting. I'm an Ext JS man, but with APEX 4.0 due out sometime soon and jQuery being a big part of it I thought I'd cover a my bases by gaining a little knowledge.


So my first task is to integrate jqGrid using a template based approach, luckily I'm able apply most the knowledge I've learned from integrating an Ext grid into APEX which has made it fairly straight forward. I guess you might be wondering why I'm going to integrate the jqGrid and not look to create a plugin?

Well the reason purely is that I want to use the APEX IDE to customize it. If you think about the work that went into the "Report Wizard" there's no way I want to look at duplicating it, so I'd rather reuse it, as essentially editing the report definition provides us everything we need e.g. authorizations, conditions, sort order, column names, column formatting, column ordering, page size, max rows, links etc. in order to customize our jqGrid. But what I might look to create is a plugin to manage some extra metadata for it as there's a long list of config parameters for the widget.


Anyway the first step has been to download the source and familiarize myself with the API, and there's a lot of similarities with Ext. So far I've been able to get the jqgrid rendering using a JSON reader, as my report template outputs a JSON object. I'm currently supporting sorting, pagination, filtering and reloading. Which is not much better than your standard PPR report, but it's early days. I've got my eye on subgrids, scrolling rows, and of course an editable version. So watch this space as I'll be offering the integration for download very soon!