We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Moving rows

Thread ID:

Created:

Updated:

Platform:

Replies:

121316 Nov 30,2015 02:34 PM UTC Mar 2,2016 12:55 PM UTC ASP.NET Web Forms 7
loading
Tags: TreeGrid
Jorge Pampin
Asked On November 30, 2015 02:34 PM UTC

Hello,

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

Thanks!

Balaji Marimuthu [Syncfusion]
Replied On December 1, 2015 11:00 AM UTC

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
Replied On December 2, 2015 07:53 AM UTC

Hello,

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

Thanks!

Sunil Prabakar C [Syncfusion]
Replied On December 7, 2015 11:24 AM UTC

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
Replied On February 29, 2016 12:59 PM UTC

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 [Syncfusion]
Replied On March 1, 2016 11:07 AM UTC

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
Replied On March 1, 2016 11:31 AM UTC

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 [Syncfusion]
Replied On March 2, 2016 12:55 PM UTC

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;