Reorder Single Column with Drag and Drop

3 posts, 0 answers
  1. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 22 Nov 2017 Link to this post

    Is it possible to reorder vertically a single column within a grid?  I don't want to move the whole row, just one column in it.  I am rewriting a page written with AngularJS and I don't want to try and replicate it, even if it will work.  The cells in the first column in the grid needs to move freely up and down the rows.

    here's the code I need to replace:

    $(".table-active").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function (table, row) {
            var count = 1;
            $("#loadingIcon").show();
            try {
                $.ajax({
                    type: "POST",
                    url: "../Ajax.ashx/UpdateVirtualRosterRank",
                    cache: false,
                    dataType: "json",
                    data: ({ stringOfIds: $.tableDnD.serialize(), changeId: row.id }),
                    success: function (data) {
                        $.each($("#" + row.id).parent().children(), function (i, v) {
                            $("#" + v.id).children().first().html(count);
                            count++;
                        });
                        $("#loadingIcon").hide();
                    }
                });
            } catch (e) {
                alert(e.message);
            }
        },
  2. Chris
    Chris avatar
    23 posts
    Member since:
    Mar 2012

    Posted 22 Nov 2017 Link to this post

    I am actually Marianne - and talked to Chris to clarify how the current grid works.  it rearranges the entire row (whew!) but only within a certain value of a certain column.  I need to stop it from going past - do I cancel the event on the RowDropping or the RowDropped?
  3. Rumen
    Admin
    Rumen avatar
    14034 posts

    Posted 24 Nov 2017 Link to this post

    Hi Marianne,

    I would propose two examples which may help you to implement your scenario:
    - Currently RadGrid supports only drag-and-dropping of the whole rows between Grids having one and the same column structure. Optionally you can simulate the desired behavior by combining the drag-and-drop and the batching edit functionality of the Grid, but this will be a custom implementation which is not among the built-in supported features of the Grid. I am attaching a very simple page as a demonstration of the described approach and consider using it as a base for your custom implementation.
    Cancel row drag and drop when ESC key is pressed - This project demonstrates how to handle the client side RowDragging event of RadGrid to modify the appearance of the dragged row. It also displays the current position of the dragged item and provides an approach to cancel item dragging upon pressing the ESC key.  

    Best Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top