setting a different DragAppearance for column header reposition and resize

[gedri]

Hello,

I'm trying to set a custom drag tracker for column dragging (reposition) and I noticed it is forcefully applied to column resizing as well.

In the following example, I'm setting dragAppearance to "tracker" and dragResizeAppearance to "target", but the tracker still appears also when I'm resizing columns.

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    canResizeFields: true,
    headerButtonProperties: {
      dragResizeAppearance: "target",
      dragAppearance: "tracker"
    }
})

I am on "v12.1p_2020-06-09"

Thanks for looking into this.
Gil

[Isomorphic]

We’re not sure what you’re expecting - there are two types of drags here, so if you set dragAppearance statically, it’s going to affect both drags..

You would need to add event handling logic here to set these properties dynamically based on the type of the drag.

[gedri]

---

dragResizeAppearance [IRW] [Advanced]

type:DragAppearance, defaultValue: null

If canDragResize is true, this attributes specifies the visual appearance to show during drag resize. If unset dragAppearance will be used

---

As I understand from that documentation, the drag appearance for resizing should be affected by the dragAppearance property only when dragResizeAppearance is not set, but although I am setting dragResizeAppearance to "target" I am still seeing the drag tracker as if I did not set it.

I am expecting to see the drag tracker only when I'm repositioning columns and not when I'm resizing them.
If there is different way to achieve that, I'll appreciate an explanation or an example.

Thanks
Gil

[Isomorphic]

dragResizeAppearance applies to standard resize drags, and this is not a standard resize drag, but a custom drag, because there is much more going on here that just a standard resize (to give just one example: you can initiate a resize of the header to the left from the left edge of the header to its right). Which type of drag is going to happen is actually determined on the fly, and the dragTarget is set to the header as a whole, not the button.

If you want a tracker, you could implement mouseDown or setDragTracker and set it there.

[gedri]

OK,

In that case, in my implementation of setDragTracker, is there a way I could determine whether it was called because the user is repositioning or resizing the column header?
Otherwise, how can I achieve the desired result (showing a custom tracker, only for reposition and not for resize)?

Thanks

[Isomorphic]

There's a bunch of ways to do it:

1. you could look at the coordinates

2. you could look at the cursor

3. you could look at EH.dragOperation (this isn't documented however)

By the way, what are you going to show in that tracker? We are wondering what could possibly be pertinent information during a resize. Whatever you're up to, perhaps you've started down an unnecessarily difficult path..

[gedri]

Thanks!
EH.dragOperation was the key to success :-)

What I was trying to do is show the specific column header (or something which closely resembles it) as a drag tracker while repositioning columns.
I don't want to affect the drag behavior while resizing columns - only for repositioning!
This is actually what I would have expected to happen is I set the dragAppearance to "target", but because that didn't work, I reverted to implementing a custom tracker.

For reference here is an example which demonstrates my solution:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    canResizeFields: true,
    headerButtonProperties: {
      dragAppearance: "tracker",
      setDragTracker: function() {
        if (isc.EH.dragOperation == "dragReorder")
          isc.EventHandler.setDragTracker(
            `<div class="${this.baseStyle}" style="width:${this.width}px; height:${this.height}px; line-height:${this.height}px;">${this.title}</div>`
            );
        else 
          isc.EventHandler.setDragTracker("");
        return false;
      }
    }
})

Thanks again for your help.
Gil