DragDrop is not working after deleting few rows in Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: deleterow, dragdrop, grid, unselect

This topic contains 2 replies, has 2 voices, and was last updated by chradha 10 years, 2 months ago.

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

Author

DragDrop is not working after deleting few rows in Grid Posts

June 24, 2014 at 8:30 am DragDrop is not working after deleting few rows in Grid #56278

Participant

I have two jqx grids, a source grid and a target grid. Multiple rows can be selected from source grid and dropped into the target grid.

When selected rows are dropped into the target grid, we should “Unselect and delete these rows” from the source grid.

I am able to delete the rows but NOT able to unselect these multiple rows (from source grid).

I am getting selected rows using: $(“#grid”).jqxGrid(‘getselectedrowindexes’).

In the for loop, i am using: $(‘#grid’).jqxGrid(‘unselectrow’, rowIndexes[i] );

For some reason the “unselect” option does not work after after unselecting one row or few rows. Atleast one more more rows remain selected.

Ignoring unselect activity, i went ahead deleting rows from source grid.

It works with: $(“#grid”).jqxGrid(“deleterow”, rowIndexes[i] );

The dragged rows were deleted but some other rows in the source grid are selected. Unless these rows are deselected, the user cannot select new set of rows. So, this is a blocker!!

After the rows are deleted, the drag and drop on source grid does not work anymore!!

My changes are (commented as “added by me”):

1. Changed dropPanel as jqxGrid

2. Updated gridCells.on(‘dragEnd’ method for adding rows to dropPanel (target grid) and deleting rows from grid (source grid)

Below is the complete code i am using (modified version of /demos/jqxgrid/dragdropmultiplerecords.htm)

———————-

<!DOCTYPE html>
   <html lang="en">
<head>
    <title id='Description'>This example shows how to setup a one way drag and drop of multiple Grid rows to another HTML element.</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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                localdata: generatedata(10),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname' }
                ];

            // create data grids.
            $("#grid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,
                ready: function()
                {
                    $("#grid").jqxGrid('selectrow', 0);
                    $("#grid").jqxGrid('selectrow', 2);
                    $("#grid").jqxGrid('selectrow', 6);
                },
                selectionmode: 'multiplerows',
                autoheight: true,
                columns: columns
            });
            var data_dropPanel = {};
            var source_dropPanel =
            {
                localdata: data_dropPanel,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter_dropPanel = new $.jqx.dataAdapter(source_dropPanel);
         // FOR dropPanel -- create data grids.-- added by me
            $("#dropPanel").jqxGrid(
            {
                width: 400,
                source: data_dropPanel,
                ready: function()
                {
                   // $("#grid").jqxGrid('selectrow', 0);
                    //$("#grid").jqxGrid('selectrow', 2);
                   // $("#grid").jqxGrid('selectrow', 6);
                },
                selectionmode: 'multiplerows',
                autoheight: true,
                columns: columns
            });
            // select all grid cells.
            var gridCells = $('#grid').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) {
                    var rowsindexes = $("#grid").jqxGrid('getselectedrowindexes');
                    feedback.height(25);
                    feedback.width( $("#grid").width());
                    feedback.css('background', '#aaa');
                }
            });

            // initialize the dragged object.
            gridCells.on('dragStart', function (event) {
                var value = $(this).text();
                var position = $.jqx.position(event.args);
                var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                var rowsindexes = $("#grid").jqxGrid('getselectedrowindexes');

                var rows = [];
                var clickedrow = cell.row;
                var isselected = false;
                for (var i = 0; i < rowsindexes.length; i++) {
                    if (rowsindexes[i] == clickedrow) {
                        isselected = true;
                    }

                    rows[rows.length] = $("#grid").jqxGrid('getrowdata', rowsindexes[i]);
                }
                if (!isselected) {
                    $("#grid").jqxGrid('selectrow', cell.row);
                    rows[rows.length] = $("#grid").jqxGrid('getrowdata', cell.row);
                }

                if (rows.length > 0) {                 
                    // update feedback's display value.
                    var feedback = $(this).jqxDragDrop('feedback');
                    if (feedback) {
                        feedback.height(rows.length * 25 + 25);
                        var table = '<table>';
                        table += '<tr>';
                        $.each(columns, function (index) {
                            table += '<td style="width:' + this.width + 'px;">';
                            table += this.text;
                            table += '</td>';
                        });
                        table += '</tr>';
                        $.each(rows, function () {
                            table += '<tr>';
                            table += '<td>';
                            table += this.firstname;
                            table += '</td>';
                            table += '<td>';
                            table += this.lastname;
                            table += '</td>';
                            table += '<td>';
                            table += this.productname;
                            table += '</td>';
                            table += '</tr>';
                        });
                        table += '</table>';
                        feedback.html(table);
                    }
                    // set the dragged records as data
                    $(this).jqxDragDrop({ data: rows })
                }
            });

            gridCells.on('dragEnd', function (event) {
                var value = $(this).jqxDragDrop('data');
                var position = $.jqx.position(event.args);
                var pageX = position.left;
                var pageY = position.top;
                var $form = $("#form");

                var targetX = $form.offset().left;
                var targetY = $form.offset().top;
                var width = $form.width();
                var height = $form.height();

                // fill the element with rows if the user dropped the dragged items over it.
                if (pageX >= targetX && pageX <= targetX + width) {
                    if (pageY >= targetY && pageY <= targetY + height) {
                        if (value != null) {
                            // added by me
                            *var selected_rowIndexes = $("#grid").jqxGrid("getselectedrowindexes");
                            //selected_rowIndexes = selected_rowIndexes.split(",");
                            for (var i = 0; i < value.length; i++) {
                                var thisRowOfSrcGrid = $("#grid").jqxGrid("getrowdata", selected_rowIndexes[i] );
                                var isAdded = $("#dropPanel").jqxGrid("addrow", selected_rowIndexes[i], thisRowOfSrcGrid);
                                //alert( "is added? "+ isAdded);
                                var commit_deleteFromSrcGrid = $("#grid").jqxGrid('deleterow', selected_rowIndexes[i] );*
                            }
                        }
                    }
                }
            });

            $("#form").jqxExpander({  width: 400, toggleMode: 'none', showArrow: false });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
        <div style="margin-top: 20px;" id="form">
            <div>
                 Records
            </div>
            <div style="min-height: 100px;" id="dropPanel">
                <span style="position: relative; left: 50%; margin-left: -50px; top: 40px;">Drop Here</span>
            </div>
        </div>
    </div>
</body>
</html>

——————————————————————————-

June 24, 2014 at 9:19 am DragDrop is not working after deleting few rows in Grid #56282

Peter Stoev

Keymaster

Hi chradha,

It will not work after you delete rows due to the reason that the DragDrop selectors will be invalid after that. You have to initialize the DropDrop plugin in the rendered callback of the Grid or initialize it after your add/delete/update operations, too.

Best Regards,
Peter Stoev

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

June 24, 2014 at 5:31 pm DragDrop is not working after deleting few rows in Grid #56309

chradha

Participant

Hi Peter Stoev

Thanks for your reply. Can you share any code snippet or example?

…….
Radha

Author

Posts

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

You must be logged in to reply to this topic.