Primeng: Double click based transfer on PickList

[nmobregon]

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Expected behavior
Move to right/left on item double click

What is the motivation / use case for changing the behavior?
Would be great to avoid user from clicking different places (item and button), and have the possibility to double click an item from one list in order to move it to the other list

• PrimeNG version: 4.1.0-rc.2

Thanks in advance and keep up the good work

[SIlver--]

For now, if wrap your items in a ng-template block, you can assign the ondblclick event to a div and go about running the logic this way.

Like so:

<ng-template let-car pTemplate="item">
        <div (ondblclick)="myFunction()" class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
</ng-template>

[nmobregon]

Thanks @SIlver--, that seems like a good approach. I'm going to try it right now.
Would be nice to have it natively though.

UPDATE AFTER SUCCESSFULLY TRYING @SIlver--'s approach

_For fully understanding the case
"Productos Disponibles" means "Available Products"
"Productos Contratados" means "Contracted Products"
"Codigo" means "Code"
"Descripcion" means "Description"_

_HTML_

<p-pickList [source]="productosDisponibles" [target]="productosContratados"
                  [responsive]="true" [showSourceControls]="false" [showTargetControls]="false"
                  targetHeader="Productos Contratados" sourceHeader="Productos Disponibles"
                  filterBy="descripcion" >

             <ng-template let-prod pTemplate="item">
                  <div (dblclick)="moveItem($event, prod)" class="ui-helper-clearfix">
                      {{prod.descripcion}}
                  </div>
             </ng-template>
</p-pickList>

_TS_

public moveItem(event, prod){
    if (event.path[2].className.indexOf("ui-picklist-source")>-1){
        this.productosContratados.push(prod);
        this.productosDisponibles.splice(this.productosDisponibles.findIndex(pp=>pp.codigo == prod.codigo), 1);
    }else{
        this.productosDisponibles.push(prod);
        this.productosContratados.splice(this.productosContratados.findIndex(pp=>pp.codigo == prod.codigo), 1);
    }

}   

In this case event.path[2].className.indexOf("ui-picklist-source")>-1 helps me to easily know in which list the product actually is, in order to move it to the other one. Yes, if I change the ng-template contents it will most probably stop working because of the hardcoded index for event.path but it's not that hard to find once it stops working.

Hope this example helps anyone visiting this issue. Nevertheless, I insist that it would be a great feature for the component!

[VinyP]

@cagataycivici any way to disable the double click on p-picklist?

[Aeptitude]

There isn't a way to disable it. There should be!
A workaround I figured out;

<p-pickList [source]="sourceItems"
(onMoveToTarget)="manageItems()">

So in the manageItems method, check the list and if an item has been moved over that you didn't want, remove it manually.