10 Replies Latest reply on Feb 25, 2013 9:18 AM by Tom Petrus

    Sumneva drag drop plugin - auto refresh?

    Scott Wesley
      Hi all,

      I'm quite happy with the functionality of the following plug-in

      However I was wondering if it might be possible to refresh the region after each drag/drop action?

      I am experimenting with updating other columns under certain conditions, and it would be helpful to see the results after each movement. At the moment the page needs to be refreshed.

      I've tried adding this to the end of the update event, but I realise there may be a limiting factor within APEX
      ajaxCall = null;      
      apex.jQuery('#!'||p_region.static_id||q'!_sortable').trigger("apexrefresh"); // my code

        • 1. Re: Sumneva drag drop plugin - auto refresh?
          Tom Petrus
          You want to refresh the region but it doesn't? I think that to handle a refresh, the plugin will have to provide this. For example, the IR binds to the "apexrefresh" event, fires the "beforeapexrefresh" and "afterrefresh" events, and performs a "search" when triggered. Same for classic reports/tabular forms: they bind to the event and provide handling for this.
          • 2. Re: Sumneva drag drop plugin - auto refresh?
            Joni Vandenberghe
            Yeah I agree, it can't be done with a simple line of code.
            You will need to code the ajax call to get new plug-in values and write them to the page all manually.
            • 3. Re: Sumneva drag drop plugin - auto refresh?
              Scott Wesley
              Well that blows.

              What would be ideal is a drag/drop tree plugin, but the only one out there I found uses ExtJS

              I would like the re-order only to allow users to drag children between parents.

              Not convinced investment to write the plug-in is worth it, since I can read jQuery ok but still learning to write effectively.

              Will think of other screen design solutions...
              • 4. Re: Sumneva drag drop plugin - auto refresh?
                Tom Petrus
                The jsTree + CRRM + DND plugins looks like it could suit your needs without too much problems. The hardest part would probably be the check on whether the move is valid or not.
                1 person found this helpful
                • 5. Re: Sumneva drag drop plugin - auto refresh?
                  Joni Vandenberghe
                  I actually have experimented with different jQuery trees, and jstree has come out on top, so I can recommend using it. I print the tree from PL/SQL using HTP.P into a div and when I need a refresh I just do an AJAX call and replace the old tree with the new one.
                  I have been wanting to put this in a plug-in but did not found the time so far. The advantage of using this tree is that you can customize it any way you want. For example you can print any Apex item to the tree, something you can't do with the normal APEX tree.
                  1 person found this helpful
                  • 6. Re: Sumneva drag drop plugin - auto refresh?
                    Scott Wesley
                    I realise the re-order only is not what I'm after. I would like to have two levels where the user can drag children between parents - but parents stay parents and children stay children. Essentially reordering and regrouping.

                    @Tom - why do you think checking the move is valid would be difficult? Are you talking about the jQuery required, which seems like the examples do already; or interacting with the database first?

                    @Joni - I've been doing some further reading and I wonder why you rendered the tree using htp, since APEX utilises jsTree for it's tree component. Is it because it uses an earlier version?
                    I also thought it could be rendered using a List with a custom template.

                    I wonder because I tried adapting an coding sample to see how it would interact
                    $(function () {
                      $("#my_tree div.tree")
                        .jstree({ "plugins" : ["themes","html_data","ui"] })
                        // 1) if using the UI plugin bind to select_node
                        .bind("select_node.jstree", function (event, data) { 
                          // data.rslt.obj is the jquery extended node that was clicked
                        // 2) if not using the UI plugin - the Anchor tags work as expected
                        //    so if the anchor has a HREF attirbute - the page will be changed
                        //    you can actually prevent the default, etc (normal jquery usage)
                        .delegate("a", "click", function (event, data) { event.preventDefault(); })
                    but I received
                    Uncaught TypeError: Object [object Object] has no method 'jstree' this error
                    • 7. Re: Sumneva drag drop plugin - auto refresh?
                      Joni Vandenberghe
                      I just used HTP.P to print the HTML. I then used the HTML_DATA plug-in of jstree to convert this html to a tree. This last part was ofc not printed with HTP.P but done in the javascript part of my page. I also enjoy the complete freedom during the print. I decide the ids, the classes, the images all in PL/SQL. And I can call the procedure any time I need to refresh the tree, or when I want to use the tree on a different page.

                      Did you attach the javascript files in your page? Even if APEX uses jstree then it's safe to assume APEX will only attach the files when you create an APEX tree.

                      I never thought about using lists for my tree, it's definitely an interesting approach.

                      Edited by: Joni Vandenberghe on 24-feb-2013 23:35
                      1 person found this helpful
                      • 8. Re: Sumneva drag drop plugin - auto refresh?
                        Scott Wesley
                        I've used list templates in the past to implement jQuery plug-ins
                        I think it allows the flexibility that htp offers, but in a structured, reusable manner. Although I think there are a few APEX bugs with the way some template attributes are implemented.

                        I defined an APEX tree, and added that JS to my page. APEX includes the following libraries that had "tree" in the name
                        and the related HTML looked the same as the examples found in the jsTree site.
                        • 9. Re: Sumneva drag drop plugin - auto refresh?
                          Joni Vandenberghe
                          Your code is correct, so the error must be elsewhere, can you recreate it on apex.oracle.com?

                          I also attached the jstree file from the site called jstree_pre1.0_fix_1/jquery.jstree.js and the style sheet from the classic theme jstree_pre1.0_fix_1/themes/classic/style.css.

                          Did you attach those?
                          I wouldn't count on APEX attaching those files, because its undocumented, so there is no guarantee APEX sticks with jstree.

                          Edited by: Joni Vandenberghe on 25-feb-2013 0:52
                          • 10. Re: Sumneva drag drop plugin - auto refresh?
                            Tom Petrus
                            Apex indeed still comes with version 0.9.9a2. You could tap into the dragging by using the "jQuery.tree.drag_start" and "jQuery.tree.drag_end" events. But as you can see from the docs of jstree, the implementation is a lot different. In its current release (1.0 stable) you can customize the tree a whole lot better, and can do that by calling those plugins (crrm, dnd), while 0.9.9a2 does not do that. Sure, there are some plugins, but not on the scale as they are used in 1.0. The bundled plugins with 0.9.9a2 are nothing like that.
                            Not that it can't be done, just something to be aware of I suppose. Personally, I'd be more tempted to use the 1.0 tree because of its improved customizability.

                            And what I meant by " The hardest part would probably be the check on whether the move is valid or not." is not that it is difficult, but could perhaps be the most difficult. It depends on how restricted you want the movement to be, like for example if you would only want child nodes to be dragged to parents on the same level as their parent. Also of note is how useless the automatically assigned css-classes are in this case, example: the "isleaf" class is also assigned to nodes which have children but are collapsed. I consider that annoying. Then again, i suppose it is easy enough to find out if there are child nodes or not. But would a node without children, on the same level as a node which is parent to several nodes, always be eligible as a drop container? How do you differentiate that node with any other child node that has no children?
                            I just mean to say: beware of pitfalls :)
                            1 person found this helpful