Drag&drop grid is limited to the grid

[Paul45Participant]

Hello,
I have a problem.
I can’t drag & drop object from a grid outside the grid

Example :
https://stackblitz.com/edit/angular-jqmyky

If you try to drag&drop an object, you will see that it’s limited to the grid…
I have follow example but can’t understand why doesn’t work in my case

[HristoParticipant]

Hello Paul45,

I would like to suggest you look at this demo:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-dragdrop.htm?light
It shows how to create a draggable cell of the jqxGrid.
Could you clarify your case if this does not help you?

Also, I would like to mention there is another section in our forum for Angular issues.
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Paul45Participant]

i m so sorry, i have sent the wrong stackblitz…

I resolved my problem with appendTo:’body’
But now i have an other problem…

When i want to drag and drop a cell of my grid, this grey column is displayed. an i need to refresh to hide it

HTML :

<div id="main" class= "main">
    <div class ="target">
            <jqxGrid #myGridPosition 
                [width]="510" [autoheight]="true" [columns]="gridColumns" [source]="source" [rowsheight] ="137" [rendered]='rendered'
                [selectionmode]="'singlecell'" [keyboardnavigation]="false" >
            </jqxGrid>

    </div>
</div>

TS :

import { Component, OnInit,ViewChild } from '@angular/core';
import { CompositionComponent } from '../composition.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component({
  providers:[CompositionComponent],
  selector: 'app-form-attributes',
  templateUrl: './form-attributes.component.html',
  styleUrls: ['./form-attributes.component.scss']
})
export class FormAttributesComponent {
  @ViewChild('myGridPosition') myGridPosition: jqxGridComponent;

source: any =
        {
            totalrecords: 1,
            unboundmode: true,
            datafields:
                [
                    { name: 'pos1' },
                    { name: 'pos2' },
                    { name: 'pos3' }
                ],
        };

        dataAdapter: any = new jqx.dataAdapter(this.source, {
          downloadComplete: function (data, status, xhr) { },
          loadComplete: function (data) { },
          loadError: function (xhr, status, error) { }
      });

      gridColumns: any[] = [
        { text: 'Position 1', dataField: 'pos1',align: 'center', width: 170 },
        { text: 'Position 2', dataField: 'pos2',align: 'center', width: 170 },
        { text: 'Position 3', dataField: 'pos3',align: 'center', width: 170 }
    ]

    rendered = (type: any): void => {

      let options = {
          revert: true,
          dropAction: 'none',
          appendTo:'body'
          
      };

      let uglyGridDragDropCells = jqwidgets.createInstance('.jqx-grid-cell', 'jqxDragDrop', options);
      

  }
}

I don’t understand why it’s bug, i have follow your demo…
do you understand ?

Thanks a lot !

[HristoParticipant]

Hello Paul45,

You could try to set height because now the cells take whole height (100%).
Please, take a look at this example:

export class AppComponent {
  @ViewChild('myGridPosition') myGridPosition: jqxGridComponent;

  source: any =
    {
      totalrecords: 1,
      unboundmode: true,
      datafields:
        [
          { name: 'pos1' },
          { name: 'pos2' },
          { name: 'pos3' }
        ],
        localdata: [{}]
    };

  dataAdapter: any = new jqx.dataAdapter(this.source, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
  });

  gridColumns: any[] = [
    { text: 'Position 1', dataField: 'pos1', align: 'center', width: 170 },
    { text: 'Position 2', dataField: 'pos2', align: 'center', width: 170 },
    { text: 'Position 3', dataField: 'pos3', align: 'center', width: 170 }
  ]

  rendered = (type: any): void => {
    let options = {
      revert: true,
      dropAction: 'none',
      // appendTo: 'body',
      appendTo: '#main'
    };

    let cells = $('.jqx-grid-cell');
    cells.css('max-height', 150);

    let uglyGridDragDropCells = jqwidgets.createInstance('.jqx-grid-cell', 'jqxDragDrop', options);

  }
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Paul45Participant]

it works perfectly !
Thanks a lot for your help
Have a good day !

[Author]

Posts