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
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
0
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.
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
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
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.
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.
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
>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
Hi Suruli,
Generally, dragging columns is enabled using the following property:
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
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.