Moving rows

[Jorge Pampin]

Hello,

How to move rows (up and down) in Grid and TreeGrid control by javascript?

Thanks!

[Balaji Marimuthu]

Hi Jorge,

Thanks for contacting Syncfusion support.

Grid Control:

Your requirement is achieved by using the jQuery after and before methods. Refer to the sample and code example as below.

Jsplaygroundsample: http://jsplayground.syncfusion.com/sswyx2i2

$("#Grid").ejGrid({

                dataSource: data,

                . . .
           });

$("#Grid").on("keydown", function (e) {

            var obj = $("#Grid").ejGrid("instance");

            var index = obj.selectedRowsIndexes[0];

            if (e.keyCode == 38 && index != 0) {

                $(obj.getRows()).eq(index - 1).before(obj.getRowByIndex(index)); //move rows to up

                //refresh alternative row

                var prev = $(obj.getRows()).eq(index - 1).attr("class");

                var next = $(obj.getRows()).eq(index).attr("class")

                obj.getRowByIndex(index).removeClass('e-row e-alt_row').addClass(prev);

                obj.getRowByIndex(index - 1).removeClass('e-row e-alt_row').addClass(next);

            }

            if (e.keyCode == 40 && (obj.getRows().length - 1 != index)) {

                $(obj.getRows()).eq(index + 1).after(obj.getRowByIndex(index)); //move rows to down

                //refresh alternative row

                var prev = $(obj.getRows()).eq(index + 1).attr("class");

                var next = $(obj.getRows()).eq(index).attr("class")

                obj.getRowByIndex(index).removeClass('e-row e-alt_row').addClass(prev);

                obj.getRowByIndex(index + 1).removeClass('e-row e-alt_row').addClass(next);

            }
        });

In keydown event, we have move the rows to up and down based on the selected row element and you can get the selected row indexes by using the selectedRowsIndexes property in Grid.

$("#Grid").on("keydown", function (e) {

            var obj = $("#Grid").ejGrid("instance");

            var index = obj.selectedRowsIndexes[0];

            . . .

});
               

Based on the getRows and getRowByIndex method we can move the tr element to up and down. By using the getRows method, we can get the rows of grid which is displayed in current page and getRowByIndex method is used to get the row element by index value. Refer to the help document as follows,

getRows: http://help.syncfusion.com/js/api/ejgrid#methods:getrows
getRowByIndex: http://help.syncfusion.com/js/api/ejgrid#methods:getrowbyindex

$("#Grid").on("keydown", function (e) {

           

            if (e.keyCode == 38 && index != 0) {

                $(obj.getRows()).eq(index - 1).before(obj.getRowByIndex(index)); //move rows to up

                 . . . .

            }

            if (e.keyCode == 40 && (obj.getRows().length - 1 != index)) {

                $(obj.getRows()).eq(index + 1).after(obj.getRowByIndex(index)); //move rows to down

               . . .

            }
        });

We have refreshed the row and alternative row by using the addClass and removeClass method. If we misunderstood your requirement please provide more information about how you want to move the rows.

TreeGrid Control:

If your requirement is to replace the row position, at present we have row drag and drop feature in TreeGrid, where you can cut any row and paste it another position as sibling above, below or as a child corresponding to another row. Please refer the below code snippet to enable the row drag and drop in TreeGrid. 

 

<ej:TreeGrid ID="TreeGrid" runat="server" AllowSelection="True"

//...

AllowDragAndDrop="true">

<DragTooltip ShowTooltip="true" />

//...

</ej:treegrid>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridDragAndDrop1866440379

Regards,
Balaji Marimuthu

[Jorge Pampin]

Hello,

Is it possible use the Grid's method of moving rows with the TreeGrid?

Thanks!

[Sunil Prabakar C]

Hi Jorge,

Since TreeGrid control contains rows with hierarchy levels, it is not possible to use Grid’s workaround method for moving the rows up and down in TreeGrid control. So we request you to use “Row drag and drop” feature of TreeGrid control which has been suggested in the earlier update. Also please shre more details regarding your requirement to traverse the selected row across the TreeGrid though key press action, this will help up to provide a better solution.

Please let us know, if you require further assistance on this.

Regards,
Sunil Prabakar C

[Jorge Pampin]

Hello,

In the TreeGrid, how to configure the Drag&Drop to move rows only between nodes with the same parent node? I want to order by Drag&Drop the nodes.

Thanks!

[Mahalakshmi Karthikeyan]

Hi Jorge,

We can restrict the row dragging to be handled within the parent node with the help of RowDragStop and RowDragStart Client side event. Please refer the below code example for details.

<ej:TreeGrid ID="Treegrid" runat="server"

    //…

    RowDragStop="rowDragStop" RowDragStart="rowDragStart">

</ej:TreeGrid>

          <script type="text/javascript">

             

              function rowDragStart(args) {

                  dragRow = $.extend({}, args.draggedRow);

              }

              function rowDragStop(args) {

                  if (args.targetRow.parentItem != dragRow.parentItem)

                      args.cancel = true;

              }

    </script>

Here we have taken the dragged row in the RowDragStart event and compared that parent item with the dropped Record taken in the RowDragStop event.

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RowDragging1212042752

Regards,

Mahalakshmi K.

[Jorge Pampin]

Hello,
'
It works, but I want to order the nodes (move the nodes up/down) but not change the parent node. Is it that possible?

Thanks!

[Mahalakshmi Karthikeyan]

Hi Jorge,

As we said in our previous update, there is no support to move the rows using key up and down. Due to the hierarchy structure in TreeGrid there are some complexity in providing an exact workaround for this requirement. So we have logged a feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you require further assistance on this.

Regards,

Mahalakshmi K.