jQWidgets Forums

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

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

Author

2 way move on grid Posts

November 5, 2013 at 8:31 am 2 way move on grid #31920

JohnD

Member

Hi,

We are trying to move items from the left to the right and back.
But if we want to go back the grid wil not set the item back.

How can we make it posible to move from grid 1 to grid 2 and move from grid 2 to grid 1.
Also can the item that is being moved be removed from the source grid ?
And the item being added to the other grid and not replace?

Our SRC:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to setup a one way drag and drop from a Grid to another Grid.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var source =
            {
                localdata: generatedata(100),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create data grids.
            $("#grid1").jqxGrid(
            {
                width: 450,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                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', theme: theme, 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);
                        }
                    });
                },
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
            });
            $("#grid2").jqxGrid(
            {
                width: 450,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
				  rendered: function(type)
                {
                    // select all grid cells.
                    var gridCells = $('#grid2').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid1'), 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 = $("#grid2").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 = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid1").jqxGrid('setcellvalue', cell.row, cell.column, value);
                        }
                    });
                },
                source: { totalrecords: 10, unboundmode: true, datafields:
                [
                    { name: 'firstname' },
                    { name: 'lastname' },
                    { name: 'productname' }
                ]
                },
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
 
            });       
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid1"></div>
        <div style="margin-top: 20px; float: left;" id="grid2"></div>
    </div>
</body>
</html>

November 7, 2013 at 7:45 am 2 way move on grid #32133

Dimitar

Participant

Hello JohnD,

Here is an updated version of your example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to setup a one way drag and drop from
        a Grid to another Grid.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var source =
            {
                localdata: generatedata(100),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create data grids.
            var draggedCellFirstGrid = new Object();
            var draggedCellSecondGrid = new Object();
            $("#grid1").jqxGrid(
            {
                width: 450,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                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', theme: theme, 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);
                        draggedCellFirstGrid = { row: cell.row, column: cell.column };
                        $(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);
                            $("#grid1").jqxGrid('setcellvalue', draggedCellFirstGrid.row, draggedCellFirstGrid.column, "");
                        }
                    });
                },
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
            });
            $("#grid2").jqxGrid(
            {
                width: 450,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                rendered: function (type) {
                    // select all grid cells.
                    var gridCells = $('#grid2').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid1'), 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 = $("#grid2").jqxGrid('getcellatposition', position.left, position.top);
                        draggedCellSecondGrid = { row: cell.row, column: cell.column };
                        $(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 = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid1").jqxGrid('setcellvalue', cell.row, cell.column, value);
                            $("#grid2").jqxGrid('setcellvalue', draggedCellSecondGrid.row, draggedCellSecondGrid.column, "");
                        }
                    });
                },
                source: { totalrecords: 10, unboundmode: true, datafields:
                [
                    { name: 'firstname' },
                    { name: 'lastname' },
                    { name: 'productname' }
                ]
                },
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid1">
        </div>
        <div style="margin-top: 20px; float: left;" id="grid2">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 7, 2013 at 8:42 am 2 way move on grid #32134

JohnD

Member

First Tnx for the fix!

When i move the items it is getting a strange overlay.
Can this be fixed ?

November 7, 2013 at 8:42 am 2 way move on grid #32135

JohnD

Member

http://imageshack.us/photo/my-images/33/vxz1.png/

November 8, 2013 at 6:02 am 2 way move on grid #32222

Dimitar

Participant

Hi JohnD,

Does the image show the cell during drag or after drop? We do not experience any erroneous behaviour with the example we provided you. Please make sure you are using the latest version of jQWidgets (3.0.4).

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.