angular2 drag and drop grid's row to map

[NajmeParticipant]

Hello,
I need to add to my angular 2 project’s, functionality that I can drag and drop grid’s row/rows(which are points and routes data) to the map(three component in a page split by spliter) , I did not have any problem to work with it in jquery framework but it seems harder in the angular2, top and left of drag drop object is top and left of the component, and it can not leave its component area , even I set restricter and append to body:
here is my example what I added to my component(in real I need to add this plugin to each row of the grid)
<jqxDragDrop #DragDropRef
[restricter]='”body”‘
[appendTo]='”body”‘
[dragZIndex]= “‘99999′”
(ondragstart)=”onDragStart($event)” (ondragend)=”onDragEnd($event)”
>
<div class=”label”><p>Dragg it everywhere</p></div>
</jqxDragDrop>
here you have a screenshot:

image of screenshot

is it possible to do this with angular2 jqwidget, could you please give any hint or example?

thank you

[Ivo ZhulevParticipant]

Hi Najme,

Try making lets say a div element(make it parent to the element you want the dragDrop to appendTo) and give it some id. Then append the dragDrop to that div.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[NajmeParticipant]

Hi Ivo,
Thank you for answering me, I guess I can do this with this property [dropAction]= “‘none'”, in the case of grid’s row.
now I want to try to initialize dragdrop plugin in each cell or row of my grid, here is my grid template:
<jqxGrid #routeDashboard_Main_unassignedStopsGrid
[height]=”‘100%'” [width]=”‘100%'” [source]=’dataAdapter’
[rowdetails]=’true’ [rowsheight]=’35’ [rendered]=’renderedDragandDrop’
[ready]=’ready’ [columns]=’columns’ [rowdetailstemplate]=’rowdetailstemplate’>
</jqxGrid>
I did not find any example for angular two , could you please help me for the “rendered” function to initilize dragable rows?
although I am not sure even if it should be done like jquery in rendered function or in angular 2 there should be diferent solution.

thank you,
Najme

[NajmeParticipant]

Please,
could somebody answer this question?
how can we initialize a jqx functionality into the rows in angular 2?
how we can customize grid in grid ready or rendered ?!
this is not working in the angular 2:
*all the time I have this err:core.es5.js:1084 ERROR TypeError: gridCells.jqxDragDrop is not a function
rendered: function(type)
{
// select all grid cells.
var gridCells = $(‘#grid1’).find(‘.jqx-grid-cell’);

// initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
gridCells.jqxDragDrop({
appendTo: ‘body’, dragZIndex: 99999,
dropAction: ‘none’,
initFeedback: function (feedback) {
feedback.height(25);
},
dropTarget: $(‘#grid2’), revert: true
});
gridCells.off(‘dragStart’);
gridCells.off(‘dragEnd’);
gridCells.off(‘dropTargetEnter’);
gridCells.off(‘dropTargetLeave’);

// disable revert when the dragged cell is over the second Grid.
gridCells.on(‘dropTargetEnter’, function () {
gridCells.jqxDragDrop({ revert: false });
});
// enable revert when the dragged cell is outside the second Grid.
gridCells.on(‘dropTargetLeave’, function () {
gridCells.jqxDragDrop({ revert: true });
});
// initialize the dragged object.
gridCells.on(‘dragStart’, function (event) {
var value = $(this).text();
var position = $.jqx.position(event.args);
var cell = $(“#grid1”).jqxGrid(‘getcellatposition’, position.left, position.top);
$(this).jqxDragDrop(‘data’, {
value: value
});
});
// set the new cell value when the dragged cell is dropped over the second Grid.
gridCells.on(‘dragEnd’, function (event) {
var value = $(this).text();
var position = $.jqx.position(event.args);
var cell = $(“#grid2”).jqxGrid(‘getcellatposition’, position.left, position.top);
if (cell != null) {
$(“#grid2”).jqxGrid(‘setcellvalue’, cell.row, cell.column, value);
}
});
},
selectionmode: ‘singlecell’,
columns: [
{ text: ‘First Name’, dataField: ‘firstname’, width: 300 },
{ text: ‘Last Name’, dataField: ‘lastname’, width: 300 },
{ text: ‘Product’, dataField: ‘productname’ }
]
});

[Ivo ZhulevParticipant]

Hi Najme,

If it says ‘gridCells.jqxDragDrop is not a function’ maybe you havent imported the jqxDragDrop files(javascript and angular one)?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts