Single Article

Drag & Drop tabular form rows

Category APEX and jQuery

Here is how drag & Drop tabular form rows to order records how you like.

This solution works for tabular forms where you do not use pagination on APEX 4.1.

Your table need have column that store display sequence id. If your table do not have column that can be used for this, alter your table and add column.

ALTER TABLE your_table ADD (display_seq NUMBER);

Go into the report attributes of your tabular form. On the right hand side of the page you will see Tasks. In there click Add Derived Column.

Edit derived column attributes and chnage Display As to Standard Report Column. Add to Column Formatting HTML Expression:

Add to Column Formatting HTML Expression:

<img class="sort-row" src="#IMAGE_PREFIX#ws/sort.gif" alt="" />

Next uncheck all Sort checkboxes from report attributes and add order by to your report query:

ORDER BY display_seq

Create dynamic Action. Select Advanced

  • Name: Set Form Ordering
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
    $(this.triggeringElement).find(".report-standard").sortable({
     cursor: "move",
     handle: "img.sort-row",
     items: "tr:not(:first)",
     containment: ".report-standard",
     axis: "y",
     opacity: 0.9,
     revert: true,
     helper: function(e,u){
     u.children().each(function(){
      $(this).width($(this).width());
     });
     return u;
     }
    }).find("img.sort-row").css({"cursor":"move"}).disableSelection();
    
  • Selection Type: None

Create PL/SQL process On Submit - After Computations and Validations:

FOR i IN 1 .. APEX_APPLICATION.G_FROWID.COUNT
LOOP
  UPDATE emp SET sort_order = i WHERE rowid = APEX_APPLICATION.G_FROWID(i);
END LOOP;

Add to page HTML Header:

<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/ui/minified/jquery.ui.sortable.min.js"></script>

NOTE ! If you are on APEX 5:
Instead of adding jQuery UI library to HTML header, place below to page JavaScript file URLs

#JQUERYUI_DIRECTORY#ui/#MIN_DIRECTORY#jquery.ui.sortable#MIN#.js

See working example.

Social Buttons

Comments

  • Vedant 28 Jan 2017  

    Hi Jari!

    It is working now. Thanks for your time and patience.

    Appreciated.

        
  • Vedant 28 Jan 2017  

    Where we have to use j query selector? Can you help me with that

        
  • Vedant 28 Jan 2017  

    Hi Jari!

    I am not able to do it as I am new to apex. Could you please suggest what should I do?

        
  • Jari Laine 28 Jan 2017  

    Hi Vedant,

    You don't need add any css/styles.
    Report css classes may be different depending theme you use. So check that you use correct jQuery selectors in dynamic action javascript.

    Regards,
    Jari

        
  • Vedant 28 Jan 2017  

    Hi Jari!

    I am facing some issue even after implementing the steps. Do we need to add any css as well? I don't know where I am going wrong.

        
  • Udit Nagpal 27 Jan 2017  

    Please help me with it when u get time. Thank you in advance!

        
  • Jari Laine 27 Jan 2017  

    Hi Udit Nagpal,

    I have my own urgent things to do. Hire consultant do job for you if it's urgent

    Regards,
    Jari

        
  • Udit Nagpal 27 Jan 2017  

    *PASSWORD : ADMIN

        
  • Udit Nagpal 27 Jan 2017  

    can u please create on example on my instance

    username :- uditn@tiinfotech.com

    password-admin

    application no :-36814.

    please need to urgent.Thanks for your time.

        
  • Jari Laine 27 Jan 2017  

    Hi Udit Nagpal,

    Nothing I guess. At least my example still works on APEX 5.1 at apex.oracle.com.

    Regards,
    Jari

        

Global Right Column

Search

Archives

Subscribe in a Reader