Drag and Drop Columns not rows??

9 posts, 0 answers
  1. Caroline
    Caroline avatar
    21 posts
    Member since:
    May 2009

    Posted 02 Jun 2009 Link to this post

    Hello
    I have a RadGrid and have enabled drag and drop but see it drags the whole row, what i am after is making 2 columns draggable within one row...is this possible? or can you only drag the whole row?
    I have tried looking but couldnt find anything to help, so if anyone could point me at a demo or just let me know if it can be done that would be fantastic.
    many thanks
    Caroline
  2. Dimo
    Admin
    Dimo avatar
    8443 posts

    Posted 02 Jun 2009 Link to this post

    Hi Caroline,

    You can drag whole rows or whole columns (when using the columns reorder feature).

    I am afraid you cannot drag cells (actually, this is what you are trying to do).

    However, what you can do, is obtain a reference to the table cells inside the dragged rows and get only the cell values that you need. Afterwards you can apply some custom actions. The relevant client events that you can use are:

    OnRowDragStarted

    OnRowDropping

    OnRowDropped


    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Tyler
    Tyler avatar
    6 posts
    Member since:
    Oct 2009

    Posted 26 Oct 2009 Link to this post

    Dimo

    Is there a way that upon "OnRowDragStarted" to change the visual appearance so that I am dragging an icon instead of an entire row.  I will still be using the data from the entire row, but I don't visually want to see a row being dragged.

    Also, if I have a scrollable RadGrid and I choose a row from the top and drag to a RadTree (which is located towards the bottom left of the RadGrid), I notice that the RadGrid scrolls.  Is there a way that upon "OnRowDragStarted", I can "lock" the ability for the RadGrid to scroll and then upon "OnRowDropping" to "unlock" the ability for the RadGrid to scroll?

    Any thoughts?

    Thanks
    Tyler
  4. Dimo
    Admin
    Dimo avatar
    8443 posts

    Posted 29 Oct 2009 Link to this post

    Hi Tyler,

    You can modify the appearance of the dragged RadGrid rows as in the example below.

    As for the "scroll lock" question, you have to set AllowAutoScrollOnDragDrop="false" in ClientSettings.



    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <script runat="server">
     
        protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr;
            int colsNum = 4;
            int rowsNum = 5;
            string colName = "Column";
     
            for (int j = 1; j <= colsNum; j++)
            {
                dt.Columns.Add(String.Format("{0}{1}", colName, j));
            }
     
            for (int i = 1; i <= rowsNum; i++)
            {
                dr = dt.NewRow();
     
                for (int k = 1; k <= colsNum; k++)
                {
                    dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
                }
                dt.Rows.Add(dr);
            }
     
            (sender as RadGrid).DataSource = dt;
        }
         
    </script>
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls for ASP.NET AJAX</title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <style type="text/css">
     
    #<%= RadGrid1.ClientID %>_DraggedRows
    {
        width:24px !important;
        height:24px !important;
        background:none red;
        border:0;
    }
     
    #<%= RadGrid1.ClientID %>_DraggedRows *
    {
        display:none;
    }
     
    </style>
    </telerik:RadCodeBlock>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        OnNeedDataSource="RadGrid_NeedDataSource">
        <ClientSettings AllowRowsDragDrop="true" AllowAutoScrollOnDragDrop="false">
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
     
    </form>
    </body>
    </html>



    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Tyler
    Tyler avatar
    6 posts
    Member since:
    Oct 2009

    Posted 29 Oct 2009 Link to this post

    Thank you very much...this works great!
  6. Mike
    Mike avatar
    20 posts
    Member since:
    Feb 2017

    Posted 07 Mar 2017 Link to this post

    Hi,

    in Razor MVC i had to use this:

              .Scrollable(scrollable => scrollable.Virtual(false))

  7. Mike
    Mike avatar
    20 posts
    Member since:
    Feb 2017

    Posted 07 Mar 2017 in reply to Mike Link to this post

    i mean:

    .Reorderable(d=>d.Columns(true))

  8. Suruli
    Suruli avatar
    2 posts
    Member since:
    Sep 2018

    Posted 06 Sep 2018 in reply to Dimo Link to this post

    Dear Team,

    We have requirements on column drag drop. user should be able to remove the specific column by drag and drop the column outside the grid. 

    I have tried this row drag and drop event.. but did not get the reference of column drag..

    This is the critical. please help and let me know if you need more information. 

     

    Regards,

    Suruli

     

     

     

  9. Eyup
    Admin
    Eyup avatar
    3647 posts

    Posted 11 Sep 2018 Link to this post

    Hi Suruli,

    Generally, dragging columns is enabled using the following property:
    <ClientSettings AllowDragToGroup="true">

    I'm afraid this requirement is not supported built-in but can be achieved if you use the keyup dropping event handler of the dragged element and determine whether it is outside or inside the grid.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top