jQuery UI Widgets Forums Angular angular2 drag and drop grid's row to map

This topic contains 4 replies, has 2 voices, and was last updated by  Ivo Zhulev 7 years, 2 months ago.

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

  • Najme
    Participant

    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:
    null
    image of screenshot

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

    thank you


    Ivo Zhulev
    Participant

    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/


    Najme
    Participant

    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


    Najme
    Participant

    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 Zhulev
    Participant

    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/

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

You must be logged in to reply to this topic.