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

Row indicator line not displaying in DragDrop

5 Answers 161 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 15 Nov 2010, 07:54 PM
Hi everyone,

I have implemented Rows Drag/Drop in a Radgrid. But when i move my row, i donot get the small dashed line to indicate which row position i am currently at. Someone please suggest me what i am doing wrong?? here is my code


    <telerik:RadGrid ID="grdSearches" runat="server" OnRowDrop="grdSearches_RowDrop"
                        AllowSorting="false" GridLines="None" ShowFooter="false" Skin="Vista"
                        Width="585px" Style="margin-top: 0px" AutoGenerateColumns="False"
                        AllowFilteringByColumn="false" 
                        EnableNoRecordsTemplate="true" OnNeedDataSource="grdSearches_NeedDataSource" >
                        <ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="false" EnableRowHoverStyle="true" AllowRowsDragDrop="true" >
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                            <Scrolling AllowScroll="true" ScrollHeight="136px" UseStaticHeaders="true" />
                        </ClientSettings>
                  
                        <MasterTableView DataKeyNames="SearchID" TableLayout="Auto" AutoGenerateColumns="False" Width="100%" AlternatingItemStyle-Wrap="True">
                        <Columns>
                                <telerik:GridDragDropColumn  HeaderStyle-Width="30px"></telerik:GridDragDropColumn>
                                <telerik:GridTemplateColumn Visible="true" AllowFiltering="false" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="120px" ItemStyle-Width="125px" HeaderText="Actions" >
                                <ItemTemplate>
                                        <asp:ImageButton ID="ImageButton10" CommandName="Update" ImageAlign="Middle" runat="server" Width="15" Height="15" ImageUrl="/_LAYOUTS/Images/edit_active.png"
                                            />
                                        <asp:ImageButton ID="ImageButton40" CommandName="Delete" ImageAlign="Middle" runat="server" Width="15" Height="15" ImageUrl="/_LAYOUTS/Images/delete_available.png"
                                            />
                                 </ItemTemplate>
                                 <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn UniqueName="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="255px" ItemStyle-Width="255px" HeaderText="Saved Searches" DataField="SearchName"></telerik:GridBoundColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px" ItemStyle-Width="80px" HeaderText="Move Up" ImageUrl="/_layouts/images/arrGreen.JPG" CommandName="MoveUp" Text="Move Up"></telerik:GridButtonColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px" ItemStyle-Width="80px" HeaderText="Move Down" ImageUrl="/_layouts/images//arrRed.jpg" CommandName="MoveDown" Text="Move Down"></telerik:GridButtonColumn>
                            </Columns>
                        </MasterTableView>
                        <HeaderStyle BackColor="#99FFCC" Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
                            Font-Overline="False" Font-Size="X-Small" Font-Strikeout="False" Font-Underline="False"
                            ForeColor="#009999" Wrap="True" />
                    </telerik:RadGrid>

5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 17 Nov 2010, 12:36 PM
Hello Paul,

I suggest that you examine the following online example and see what is the difference in your case:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

Best wishes,
Pavlina
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Chris G.
Top achievements
Rank 1
answered on 22 Oct 2011, 01:23 AM
I am having the same problem.  Drag and drop in RadGrid does not show the dashed line between items which helps the user understand when to release the mouse button.  I isolated the issue to having the RadGrid in either an ModalPopupExtender or a RadWindow.  In either case, the dashed lines do not appear.  As soon as the control is moved outside the ModalPopupExtender or RadWindow, the dashed lines work again.

I am using version 2011.2.915.40

I would like to use RadGrid drag and drop in a popup window so please put this on the bug list for a future release.
0
Pavlina
Telerik team
answered on 26 Oct 2011, 12:21 PM
Hello Chris G.,

Can you please open a formal support ticket and send us some test page we can debug locally?

Greetings,
Pavlina
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
July
Top achievements
Rank 2
answered on 13 Sep 2012, 01:53 PM
I' ve the same problem
I am using thie version
Telerik.Web.UI_2012_2_724_Dev_hotfix
0
Pavlina
Telerik team
answered on 18 Sep 2012, 04:51 PM
Hello,

The problem you are facing could be caused in case you use a custom CSS and you do not correctly style the GridItemDropIndicator. Also it is possible the problem to become from z-index on one of the HTML elements. I recommend you to take advantage of web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them it is very easy to inspect the elements and see the styles that they have. After inspecting the element styles you can add or edit their rules. 

In case the grid is placed in window the drop indicator has a lower z-index than the RadWindow control which is with z-index: 3000. To change this behaviour you should set larger z-index of the indicator line as shown below and see if it helps:
.GridItemDropIndicator_[SkinName]
{  
    z-index: 3005 !important;  
}

All the best,
Pavlina
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.
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Chris G.
Top achievements
Rank 1
July
Top achievements
Rank 2
Share this question
or