How to perform drag and drop on the grid

[TaeWook Kang]

hi

When i try to select a row by turning on the allowRowDragAndDrop= "true" option in the grid settings.

As shown in the picture below, I want to turn off the row selection when dragging.

Grid's settings are as follows.

<ejs-grid id="EDWPGrid" gridLines="Both"  dataSource="@ViewBag.EDWPData" toolbar=@toolbarItems height="100%" rowDrop="rowDrop"  queryCellInfo="queryCellInfo"
                                         allowResizing="true" allowRowDragAndDrop="true" >
                                    <e-grid-selectionsettings checkboxOnly="false" ></e-grid-selectionsettings>
                                    <e-grid-rowdropsettings targetID="MappGrid" ></e-grid-rowdropsettings>
                                    <e-grid-columns>
                                        <e-grid-column headerText="EDWP" textAlign="Center"
                                                       columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {
                                                                        new Syncfusion.EJ2.Grids.GridColumn { Field = "CKB", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Width="20",Type="checkbox"},
                                                                        new Syncfusion.EJ2.Grids.GridColumn { Field = "E_ITEM_NO", HeaderText = "ITEM NO", HeaderTextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="130" },
                                                                        new Syncfusion.EJ2.Grids.GridColumn { Field = "E_DOC_NO", HeaderText = "DOC NO", HeaderTextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="140" },
                                                                        new Syncfusion.EJ2.Grids.GridColumn { Field = "E_DOC_TITLE", HeaderText = "DOC TITLE", HeaderTextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="200" }});">
                                        </e-grid-column>
                                    </e-grid-columns>
                                </ejs-grid>

Attachment: 20231128_13_33_47_67eca81f.zip

[Dineshnarasimman Muthu]

Hi TaeWook Kang,

We have reviewed your query about clearing the selected rows while dragging the row from the grid. The rowDragAndDrop is based on the selectedRecords from the grid. So, clearing the selected records will affect during the drop of the rows.

To achieve your requirement to clear the selected rows, we implemented grid.clearSelection() method in the rowDragStart event of the grid and in the rowDrop event deleted the records of the grid from where it is dragged using deleteRecord() method and added it to target grid using addRecord() method by cancelling the default action of the event.

The code snippet of the implementation has been attached for your reference.

<script>

    function rowDragStart(args) {

        var grid=document.getElementById('Grid').ej2_instances[0];

        grid.clearSelection();

    }

  function rowDrop(args) {

    var grid=document.getElementById('Grid').ej2_instances[0];

    var destGrid=document.getElementById('DestGrid').ej2_instances[0]

    if (args.target.closest('.e-grid').id==='DestGrid') {

      for (var i = 0; i < args.data.length; i++) {

       grid.deleteRecord('OrderID', args.data[i]);

       destGrid.addRecord(args.data[i], args.dropIndex);

    }

    args.cancel = true;

  }

}

</script>

 

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

Attachment: DragAndDropSelection_10094e5d.zip

[TaeWook Kang]

Hi Dineshnarasimman, 

Like the picture below

I don't want to drag the mouse and make a choice. I just want to use the click method

The drop function is required, but the drag function is not required.

Regards,

TaeWook Kang

[Dineshnarasimman Muthu]

Hi TaeWook Kang,

In the previous update you have mentioned that the row selection should be cleared upon dragging the rows. Based on that we have suggested to use deleteRecord() and addRecord() method in the rowDrop event and clearSelection() method in the rowDragStart event by implementing editSettings and primaryKey in both grids.

As now you have mentioned the click event, can you please ensure whether you expect to clear the selected row upon the mouse click of the rows or while the drag begins. Can you please elaborate your requirement step-by-step so that we can understand better and provide better solution.

Regards,

Dineshnarasimman M

[TaeWook Kang]

hi.

Dineshnarasimman M.

Please check the video in the attached file.

When the grid is in the allowRowDragAndDrop="true" state, 

I don't want the row to be selected by dragging, as in the case of allowRow Drag And Drop="false".

i will send you source samples and videos. Please confirm.

thank you

Attachment: DragAndDrop_35812bd6.zip

[Pavithra Subramaniyam]

TaeWook Kang,

By default, while enabling the RowDragAndDrop feature, Grid will select the rows present in the dragged range. This is the default behavior. If you want to override this behavior, we suggest overriding the default mouseMoveHandler function of the Grid selection module as a workaround for your scenario.

<script>

  var originalFn = ej.grids.Selection.prototype.mouseMoveHandler;

  ej.grids.Selection.prototype.mouseMoveHandler = function (args) {

  if (!this.parent.allowRowDragAndDrop) {

    originalFn.call(this, args);

  }

};

</script>

 

[TaeWook Kang]

hi.

Dineshnarasimman M.

Thanks to you, it was resolved.

Regards,

TaeWook Kang