jQWidgets Forums

jQuery UI Widgets Forums Grid Drag&drop grid is limited to the grid

This topic contains 4 replies, has 2 voices, and was last updated by  Paul45 6 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Drag&drop grid is limited to the grid #103340

    Paul45
    Participant

    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

    Drag&drop grid is limited to the grid #103361

    Hristo
    Participant

    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

    Drag&drop grid is limited to the grid #103367

    Paul45
    Participant

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

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

    bug

    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 !

    Drag&drop grid is limited to the grid #103384

    Hristo
    Participant

    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

    Drag&drop grid is limited to the grid #103386

    Paul45
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.