Hi
I am using a Telerik Rad Grid with Drag and drop functionality for rows. but when I select multiple rows and drag out of the grid, it shows a large empty box dragging additionally to the selected rows.
Anybody came across this issue before? Any solution to overcome this issue would be very helpful.
Thanks
Malinda
I am using a Telerik Rad Grid with Drag and drop functionality for rows. but when I select multiple rows and drag out of the grid, it shows a large empty box dragging additionally to the selected rows.
Anybody came across this issue before? Any solution to overcome this issue would be very helpful.
Thanks
Malinda
9 Answers, 1 is accepted
0
Hi Malinda,
It's hard to guess what might be the problem in this case. Can you please provide a simple demo, which exhibits the unexpected behavior? Thank you.
All the best,
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.
It's hard to guess what might be the problem in this case. Can you please provide a simple demo, which exhibits the unexpected behavior? Thank you.
All the best,
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
Malinda
Top achievements
Rank 1
Rank 1
answered on 27 Dec 2009, 08:49 AM
Hi
As you requested I am attaching below the attributes I have used for the rad grid so that you could reproduce the issue.
Used version : 2009.2.826.35
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" PageSize="40"
Width="50%" Height="100%" Style="border: 0; outline: none" VirtualItemCount="1000"
AllowSorting="True" AllowMultiRowSelection="True">
<MasterTableView TableLayout="Fixed" />
<MasterTableView>
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true" EnableRowHoverStyle="true"
AllowKeyboardNavigation="True" AllowRowsDragDrop="True" EnablePostBackOnRowClick="true"
AllowExpandCollapse="true">
<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" ScrollHeight="335"
UseStaticHeaders="false" SaveScrollPosition="true" />
<Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
</ClientSettings>
</telerik:RadGrid>
Sample XML node
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> </students>
Thanks
Malinda
aspnetajax.aspx
As you requested I am attaching below the attributes I have used for the rad grid so that you could reproduce the issue.
Used version : 2009.2.826.35
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" PageSize="40"
Width="50%" Height="100%" Style="border: 0; outline: none" VirtualItemCount="1000"
AllowSorting="True" AllowMultiRowSelection="True">
<MasterTableView TableLayout="Fixed" />
<MasterTableView>
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true" EnableRowHoverStyle="true"
AllowKeyboardNavigation="True" AllowRowsDragDrop="True" EnablePostBackOnRowClick="true"
AllowExpandCollapse="true">
<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" ScrollHeight="335"
UseStaticHeaders="false" SaveScrollPosition="true" />
<Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
</ClientSettings>
</telerik:RadGrid>
Sample XML node
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> </students>
Thanks
Malinda
aspnetajax.aspx
0
Hello Malinda,
I am afraid I still can't reproduce the problem. My test page is below.
Do you have some global height or padding styles for <div> elements? The dragged rows' wrapper is a <div>, so it could inherit and apply those styles. If this is the case, please use the following CSS rule to prevent the issue:
body>.RadGrid
{
height:auto;
padding:0;
}
The above will not work in IE6, so if you have to support that browser as well, you will need the following:
#RadGrid1_DraggedRows
{
height:auto;
padding:0;
}
RadGrid1 is the ClientID of the RadGrid control.
Here is my test page, which works as expected:
Kind 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.
I am afraid I still can't reproduce the problem. My test page is below.
Do you have some global height or padding styles for <div> elements? The dragged rows' wrapper is a <div>, so it could inherit and apply those styles. If this is the case, please use the following CSS rule to prevent the issue:
body>.RadGrid
{
height:auto;
padding:0;
}
The above will not work in IE6, so if you have to support that browser as well, you will need the following:
#RadGrid1_DraggedRows
{
height:auto;
padding:0;
}
RadGrid1 is the ClientID of the RadGrid control.
Here is my test page, which works as expected:
<%@ Page Language="C#" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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><style type="text/css">html{overflow:auto}html,body,form{height:100%;margin:0;padding:0;background:yellow}</style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /><telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" PageSize="40" Width="50%" Height="100%" Style="border: 0; outline: none" VirtualItemCount="1000" AllowSorting="True" AllowMultiRowSelection="True"> <MasterTableView TableLayout="Fixed" /> <MasterTableView> <Columns> <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" /> </Columns> </MasterTableView> <ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true" EnableRowHoverStyle="true" AllowKeyboardNavigation="True" AllowRowsDragDrop="True" EnablePostBackOnRowClick="true" AllowExpandCollapse="true"> <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="false" SaveScrollPosition="true" /> <Resizing AllowColumnResize="true" EnableRealTimeResize="true" /> <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" /> </ClientSettings> </telerik:RadGrid><asp:XmlDataSource ID="XmlDataSource1" runat="server"><Data><students> <student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="2" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="3" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="4" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="5" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="6" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="7" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="8" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /> <student id="9" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" /></students></Data></asp:XmlDataSource></form></body></html>Kind 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.
0
Edwin
Top achievements
Rank 1
Rank 1
answered on 22 Jun 2012, 09:09 AM
Although this is an ancient issue, I can confirm the issue Melinda describes. As a mather of fact I can confirm the issue with the example provided by Dimo.
I am using version 2011.3.1305.40 of the controls (and wil not be able to upgrade to the latest version of the controls)
To prove the issue I have attached a screenshot displaying the issue and a part of the IE developertools with, what I suspect, is causing this issue. The dragged row (which is in fact a trimmed down copy of the grid) has an inline margin-bottom style. This inline style can be quite large with virtual scrolling. There is no easy way to target a dragged row because there is no possibility to add a custom class or id to it. I can try to use RadGridID_DraggedRows, but this is not the sollution I am looking for.
Is there another way to remove the 'margin-bottom' inline style? Or did you fix this issue in a newer release (which might change my upgrade schedule).
I am using version 2011.3.1305.40 of the controls (and wil not be able to upgrade to the latest version of the controls)
To prove the issue I have attached a screenshot displaying the issue and a part of the IE developertools with, what I suspect, is causing this issue. The dragged row (which is in fact a trimmed down copy of the grid) has an inline margin-bottom style. This inline style can be quite large with virtual scrolling. There is no easy way to target a dragged row because there is no possibility to add a custom class or id to it. I can try to use RadGridID_DraggedRows, but this is not the sollution I am looking for.
Is there another way to remove the 'margin-bottom' inline style? Or did you fix this issue in a newer release (which might change my upgrade schedule).
0
Hi Edwin,
I am afraid, I am not able to replicate the described issue with the markup provided by Dimo. However, you can remove the margin with the following CSS rule
Additionally, could you please give us more details on what you are trying to achieve and what steps to follow, so that we can observe the issue too?
Looking forward to your reply.
All the best,
Galin
the Telerik team
I am afraid, I am not able to replicate the described issue with the markup provided by Dimo. However, you can remove the margin with the following CSS rule
.GridDraggedRows .rgMasterTable { margin-bottom: 0 !important;}Additionally, could you please give us more details on what you are trying to achieve and what steps to follow, so that we can observe the issue too?
Looking forward to your reply.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Edwin
Top achievements
Rank 1
Rank 1
answered on 27 Jun 2012, 03:53 PM
The issue is observable in IE7 and IE9 (in either IE7 mode or IE9 mode)
IE8 apparently does not suffer from this issue.
The provided solution does not work as the .GridDraggedRows css class does not exist in version 2011.3.1305.40 of the controls.
If you have the following properties enabled, the issue wil be visible
-EnableVirtualScrollPaging
-AllowRowsDragDrop
The margin-bottom style of the main table wlil be large to enable a user to scroll through the records. Because of this style any dragged row will have the same properties and styling.
Short description of our use-case:
- The page we are creating will allow a user to drag an item from one grid to another. Both grids are binding clientside through webservices. The grid that allows dragging of items also has the option EnableVirtualScrollPaging enabled. If I disable that option the visual issue goes away.
0
Hello Edwin,
I tested with Q3 2011 and there is a class assigned to the dragged item, but it also includes the skin name, e.g.: GridDraggedRows_Vista. You can see this in the following video:
http://screencast.com/t/zJx0F6RDxx
So, my suggestion is to try the following modification of the below CSS:
where you replace [SkinName] with the name of the skin used.
All the best,
Tsvetina
the Telerik team
I tested with Q3 2011 and there is a class assigned to the dragged item, but it also includes the skin name, e.g.: GridDraggedRows_Vista. You can see this in the following video:
http://screencast.com/t/zJx0F6RDxx
So, my suggestion is to try the following modification of the below CSS:
.GridDraggedRows_[SkinName] .rgMasterTable { margin-bottom: 0 !important;}where you replace [SkinName] with the name of the skin used.
All the best,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Edwin
Top achievements
Rank 1
Rank 1
answered on 02 Jul 2012, 10:05 PM
I have also noticed that class, even before my post. You can however understand that this is not an ideal sollution.
It would have been nice if you had just said "this is a bug" or "this is an unforseen issue we will adres in an upcomming version".
To conclude:
-besides the obvious CSS workaround with themed class names, there is currently no known fix.
-this issue is visible in 2011 Q3
Does this issue also appear in the 2012 version of the controls, or is there perhaps a theme free css class available to target draggedrows?
It would have been nice if you had just said "this is a bug" or "this is an unforseen issue we will adres in an upcomming version".
To conclude:
-besides the obvious CSS workaround with themed class names, there is currently no known fix.
-this issue is visible in 2011 Q3
Does this issue also appear in the 2012 version of the controls, or is there perhaps a theme free css class available to target draggedrows?
0
Hi Edwin,
We have already forwarded this problem to our developement team and they will inspect whether it is a bug a or a limitation of using the two features together.
As for making the work around more flexible - you could use a code block to evaluate the name of the grid skin, so that you do not need to hard code it in selectors:
Regards,
Tsvetina
the Telerik team
We have already forwarded this problem to our developement team and they will inspect whether it is a bug a or a limitation of using the two features together.
As for making the work around more flexible - you could use a code block to evaluate the name of the grid skin, so that you do not need to hard code it in selectors:
.GridDraggedRows_<%= RadGrid1.Skin %> .rgMasterTable { margin-bottom: 0 !important;}Regards,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.