This is a migrated thread and some comments may be shown as answers.
Drag and Drop Columns not rows??
8 Answers 102 Views
This is a migrated thread and some comments may be shown as answers.
Caroline
Top achievements
Rank 1
Caroline asked on 02 Jun 2009, 08:15 AM
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

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Jun 2009, 12:56 PM
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.
0
Tyler
Top achievements
Rank 1
answered on 26 Oct 2009, 08:29 PM
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
0
Dimo
Telerik team
answered on 29 Oct 2009, 01:57 PM
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.
0
Tyler
Top achievements
Rank 1
answered on 29 Oct 2009, 04:12 PM
Thank you very much...this works great!
0
Mike
Top achievements
Rank 1
answered on 07 Mar 2017, 04:20 PM

Hi,

in Razor MVC i had to use this:

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

0
Mike
Top achievements
Rank 1
answered on 07 Mar 2017, 04:21 PM

i mean:

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

0
Suruli
Top achievements
Rank 1
answered on 06 Sep 2018, 06:09 AM

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

 

 

 

0
Eyup
Telerik team
answered on 11 Sep 2018, 06:05 AM
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.
Tags
Grid
Asked by
Caroline
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tyler
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Suruli
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or