Keivan Kechmiri
Top achievements
Rank 1
Rank 1
Keivan Kechmiri
asked on 03 Sep 2009, 06:26 PM
Hi
When dragging a Grid row I would like to change the visual of the dragged item either to an icon or to exclude some rows from the visual (I'm dragging a very long row and it extends outside the window). Is this possible, and how?
/Keivan
When dragging a Grid row I would like to change the visual of the dragged item either to an icon or to exclude some rows from the visual (I'm dragging a very long row and it extends outside the window). Is this possible, and how?
/Keivan
1 Answer, 1 is accepted
0
Hello Keivan,
When you post a forum thread and a support ticket about the same thing, please notify about this in the support thread. Otherwise you may end up receiving two answers from different support officers, which is an overhead for us.
Now tyo your question:
By default, the dragged rows look like the original ones on the page, but you can easily change that by using some CSS styles. For example, here is how to limit the size of the dragged zone to 100px width and 10px height. Note that the sample page includes two approaches - pick the one that suits your requirements and remove the other.
If you prefer to use some image instead, please try this:
CSS
Regards,
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.
When you post a forum thread and a support ticket about the same thing, please notify about this in the support thread. Otherwise you may end up receiving two answers from different support officers, which is an overhead for us.
Now tyo your question:
By default, the dragged rows look like the original ones on the page, but you can easily change that by using some CSS styles. For example, here is how to limit the size of the dragged zone to 100px width and 10px height. Note that the sample page includes two approaches - pick the one that suits your requirements and remove the other.
| <%@ Page Language="VB" %> |
| <%@ 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 Sub RadGrid_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs) |
| Dim dt As New DataTable() |
| Dim dr As DataRow |
| Dim cols As Integer = 4 |
| Dim rows As Integer = 10 |
| Dim colName As String = "Column" |
| For c As Integer = 1 To cols |
| dt.Columns.Add(String.Format("{0}{1}", colName, c)) |
| Next |
| For r As Integer = 1 To rows |
| dr = dt.NewRow() |
| For rc As Integer = 1 To cols |
| dr(String.Format("{0}{1}", colName, rc)) = String.Format("{0}{1} Row{2}", colName, rc, r) |
| Next rc |
| dt.Rows.Add(dr) |
| Next r |
| TryCast(sender, RadGrid).DataSource = dt |
| End Sub |
| </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"> |
| /*works in all browsers, except IE6*/ |
| body>.RadGrid |
| { |
| width:100px !important; |
| height:10px; |
| overflow:hidden; |
| } |
| /*works in all browsers*/ |
| #<%= RadGrid1.ClientID %>_DraggedRows |
| { |
| width:100px !important; |
| height:10px; |
| overflow:hidden; |
| } |
| </style> |
| </telerik:RadCodeBlock> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadGrid |
| ID="RadGrid1" |
| runat="server" |
| Skin="Office2007" |
| OnNeedDataSource="RadGrid_NeedDataSource"> |
| <ClientSettings AllowRowsDragDrop="true"> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </form> |
| </body> |
| </html> |
If you prefer to use some image instead, please try this:
CSS
| #<%= RadGrid1.ClientID %>_DraggedRows |
| { |
| border:0 !important; |
| width:92px !important; |
| height:31px; |
| overflow:hidden; |
| background:transparent url(http://demos.telerik.com/aspnet-ajax/Common/Img/certAspNet.gif) center center no-repeat; |
| } |
| #<%= RadGrid1.ClientID %>_DraggedRows * |
| { |
| visibility:hidden !important; |
| } |
Regards,
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.