Drag and Drop Columns not rows?? in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Drag and Drop Columns not rows??

8 Answers 102 Views

Grid

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

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

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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.