Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Drag-and-Drop items in Menu question

    SmartClient Version: v9.1p_2015-09-16/Pro Development Only (built 2015-09-16)

    Google Chrome version 46


    I am working with isc.Menu component and would like re-ordering capabilities using the drag-and-drop feature.

    The example code below consists of a menu with “Sticky” menu items that are not draggable. I would like so that the moveable items cannot move the current first or second-last/last menu item. (i.e., No menu item can drop above “Sticky 1” or below/above “Sticky 2”. Using “canAcceptDrop” property works well for “Sticky 1” menu item. However, using the same property for the last item on the list does not allow the same functionality. The moveable menu items are still able to be dropped below “Sticky 2”, hence, the last menu item has changed. Is this a bug with canAcceptDrop for the last menu item on a isc.Menu?

    If there is no solution for the above question, is there a way to prevent the component from dropping if the target drop index is at a specific position? This would ensure that items do not lose their position when re-ordering.

    Code:
      isc.MenuButton.create({
          menu: isc.Menu.create({
              canReorderRecords : true,
              selectionType: "single",
              dragDataAction: "move",
              data: [{title: "Sticky 1", canDrag: false, canAcceptDrop: false},{title: "Moveable 1"}, {title: "Moveable 2"},{isSeparator: true, canAcceptDrop: false}, {title: "Sticky 2", canDrag: false, canAcceptDrop: false}]
          })
      });

    #2
    This is not a bug.
    When performing drag reorder of rows in a grid, there's a level of ambiguity in what it means to disallow dropping over some particular record -- should dropping below the record be disallowed, or above the record, or both? What about dropping over the top half of the *next* record, or the bottom half of the *previous* record? In that case the end result would be the same as dropping over the target record itself - you'd still be moving something adjacent to it.

    In your particular usage the intent is obvious as long (as the records sit at the top and bottom of the grid), but the default "canAcceptDrop" behavior simply disallows drop before the record. This is documented on the property.

    Anyway - the best way to deal with this would be a simple override to 'willAcceptDrop'.
    Something like this would work for this case:

    Code:
    willAcceptDrop:function () {
        if (!this.Super("willAcceptDrop", arguments)) return false;
        var dropRecord = this.getRecord(this.getEventRow());
        if (dropRecord && dropRecord.canAcceptDrop == false) return false;
        return true;
    },
    Regards
    Isomorphic Software

    Comment

    Working...
    X