jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Drag&drop grid is limited to the grid
Tagged: angular grid, grid, typescript grid
This topic contains 4 replies, has 2 voices, and was last updated by Paul45 6 years, 5 months ago.
-
Author
-
Hello,
I have a problem.
I can’t drag & drop object from a grid outside the gridExample :
https://stackblitz.com/edit/angular-jqmykyIf 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 caseHello 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 HristovjQWidgets team
http://www.jqwidgets.comi 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 !
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 HristovjQWidgets team
http://www.jqwidgets.comit works perfectly !
Thanks a lot for your help
Have a good day ! -
AuthorPosts
You must be logged in to reply to this topic.