This discussion is archived
9 Replies Latest reply: Feb 13, 2013 12:55 PM by TexasApexDeveloper RSS

Data Grid Recommendation

MarkWagoner Newbie
Currently Being Moderated
We are looking to add data grid functionality to our Apex app and am looking for any suggestions. Ideally it should be able to sort, resize, re-arrange and hide/show columns as well as load data asynchronously using the results of an AJAX request. Being able to resize the entire grid would also be nice.

I have seen references to integrating ExtJS into Apex but also have seen comments that it is written for an older version. Does anyone know if this is still correct?

I have also been looking at stand-alone jQuery plugins but am not sure how much work will be involved integrating this with Apex. Does anyone have experience with this?

Any help, pointers, suggestions, gotchas, etc would be appreciated.

Thanks,
Mark
  • 1. Re: Data Grid Recommendation
    TexasApexDeveloper Guru
    Currently Being Moderated
    You could look at this project: http://code.google.com/p/jqgrid-for-plsql/

    Thank you,

    Tony Miller
    Ruckersville, VA
  • 2. Re: Data Grid Recommendation
    MarkWagoner Newbie
    Currently Being Moderated
    Thanks, Tony. I had looked at that package before but the thought of storing all of the grid configurations in a special table seems a little odd. It seems to me that if this is the "easier" way to do it then just how complicated is it?
  • 3. Re: Data Grid Recommendation
    mobra Journeyer
    Currently Being Moderated
    the thought of storing all of the grid configurations in a special table seems a little odd.
    Where else would you store it? In an Apex process (CLOB) ? Or somehow encoded "on top" of the regular Apex metadata?

    Apex plugins were not yet invented when the jQGrid Integration Kit was developed...

    - Morten

    http://ora-00001.blogspot.com
  • 4. Re: Data Grid Recommendation
    MarkWagoner Newbie
    Currently Being Moderated
    Since it is a JavaScript object you would typically construct it using JavaScript. That is the approach jQuery, ExtJS, etc. all take.

    I could see where, if you were going to reuse the same grid across multiple pages then a central configuration may make sense. But since a grid's definition is usually page specific then I would think it should be stored with that page.
  • 5. Re: Data Grid Recommendation
    TexasApexDeveloper Guru
    Currently Being Moderated
    How would you store it with the page definition? Since it is NOT a part of the standard APEX page definition? Storing it in a table would seem to be the logical solution...

    Unless, some how you want to volunteer to build a plugin to handle doing this in APEX 4.x?

    Thank you,

    Tony Miller
    Ruckersville, VA
  • 6. Re: Data Grid Recommendation
    MarkWagoner Newbie
    Currently Being Moderated
    In case anybody else ever has this same question, this was fairly easy to do with jqGrid (and I would imagine it would also be with other jQuery based libraries such as FlexiGrid).

    All you do is import a js and a css file, then reference them using JavaScript in the HTML header. You can then create the table using about 20 lines of JavaScript code, also in the HTML header.

    Much easier, and more standard, than messing with database tables. All of the sample and demo code works the same as if you were using a regular web server, which makes it even easier.
  • 7. Re: Data Grid Recommendation
    mobra Journeyer
    Currently Being Moderated
    You can then create the table using about 20 lines of JavaScript code, also in the HTML header.
    Please share those 20 lines of code with us.

    In particular, I'm interested to see how you:

    * Populate the grid with data from the database
    * Handle grid edits (inserts, updates, deletes)
    * Handle dropdown lists / LOVs

    - Morten

    http://ora-00001.blogspot.com
  • 8. Re: Data Grid Recommendation
    MarkWagoner Newbie
    Currently Being Moderated
    Below is all of the JavaScript code. I found that, because Apex does not follow the standard method for passing parameters (sounds more like something Microsoft would do) you have to override the method used to send the data to the server. Also, since there is no way to change the content-type response header from 'text/html' (as far as I can find) you must also parse the resulting JSON string. Both of these actions are performed within the getPromoData function.

    I haven't done more than get the table to display with pagination working so there may be other issues I run into along the way. I shouild also note that we are using Apex 4.0 and I understand there have been improvements in AJAX processing in Apex 4.2, so that may change things (hopefully for the better).
    <link rel="stylesheet" type="text/css" media="screen" href="&WORKSPACE_IMAGES.ui.jqgrid.css" />
    
    <script src="&WORKSPACE_IMAGES.grid.locale-en.js" type="text/javascript"></script>
    <script src="&WORKSPACE_IMAGES.jquery.jqGrid.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    /*
     * Manually retrieve JSON data due to Apex parameter handling
     */
    function getPromoData(pdata) {
      $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: 'f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:APPLICATION_PROCESS=Promo_Item_Query:::P70027_TABLE_PAGE,P70027_TABLE_ROWS,P70027_TABLE_SORT_INDEX,P70027_TABLE_SORT_DIR:' + pdata.page + ',' + pdata.rows + ',' + pdata.sidx + ',' + pdata.sord,
        success: function(data, textStatus) {
          try {
            var json = eval('(' + data + ')');
            $('#promoTable')[0].addJSONData(json);
          }
          catch(e) {
            alert('Error parsing data.\n' + e);
          }
        },
        error: function(data, textStatus) {
          alert('Error retrieving data.\n' + textStatus);
        }
      });
    }
    /*
     * Initialize the grid
     */
    jQuery(document).ready(function(){
      jQuery("#promoTable").jqGrid({
        datatype: function(pdata) {
          getPromoData(pdata);
        },
        mtype: 'POST',
        colNames: ['Id', 'Create Date', 'Promotion Name', 'Description', 'PH Promo Ranking'],
        colModel: [
          {name: 'id', index: 'id', width: 55, align: 'right'},
          {name: 'createDate', index: 'creation_date', formatter: 'date', align: 'right', width: 90},
          {name: 'name', index: 'name', width: 200},
          {name: 'description', index: 'description', width: 500},
          {name: 'ranking', index: 'ranking', width: 110, align: 'right'}
        ],
        pager: '#promoPager',
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true,
        caption: 'General Promotion Setup'
      });
    });
    </script>
  • 9. Re: Data Grid Recommendation
    TexasApexDeveloper Guru
    Currently Being Moderated
    And that line count seems HIGHER than 20 lines of code and it doesn't come close to performing what the OTHER solution provides....

    Just an observation..

    Thank you,

    Tony Miller
    Ruckersville, VA

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points