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

Drag Move Background Image missing

6 Answers 222 Views

ListView

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

Henry asked on 04 Apr 2010, 04:02 AM

Hi,
I'm trying to implement the dragging feature of the ListView as so:

    
                                    <telerik:RadPane ID="RadPane2" runat="server" Height="100%" Width="300px" Scrolling="None">  
        
                                        <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="EntityDataSource1" EnableEmbeddedSkins="false" 
        
                                            AllowPaging="true" ItemPlaceholderID="ListViewContainer">  
        
                                            <ClientSettings AllowItemsDragDrop="true">  
        
                                            </ClientSettings> 
        
                                            <LayoutTemplate> 
        
                                                <div class="RadListView RadListView_<%# Container.Skin %>">  
        
                                                    <asp:PlaceHolder runat="server" id="ListViewContainer" /> 
        
                                                </div> 
        
                                            </LayoutTemplate> 
        
                                            <ItemTemplate> 
        
                                                <div class="rlvI">  
        
                                                    <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server" ToolTip="Drag to the Sample Editor" /> 
        
                                                    <asp:Panel ID="uxSampleEditorItemContainer" runat="server" ondragstart="OnClientNodeDragStart(this)" ondrag="OnClientNodeDragging()" ondragend="OnClientNodeDropping(this)">  
        
                                                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ImageUrl='<%# Eval("FileSystemName", "~/Contents/UploadedFiles/UserFiles/{0}") + ".jpg" %>' 
        
                                                            AutoAdjustImageControlSize="true" ResizeMode="Fit" Width="90px" Height="110px" ToolTip='<%# Eval("FileTitle") %>' 
        
                                                            AlternateText='<%# Eval("FileDescription") %>' dataSrc='<%# Eval("FileSystemName", "~/Contents/UploadedFiles/UserFiles/{0}") + ".jpg" %>' /> 
        
                                                    </asp:Panel> 
        
                                                </div> 
        
                                            </ItemTemplate> 
        
                                        </telerik:RadListView> 
        
                                        <asp:EntityDataSource ID="EntityDataSource1" runat="server" AutoPage="true" AutoSort="true" 
        
                                            ConnectionString="name=SampleEntities" DefaultContainerName="SampleEntities" EntitySetName="Files">  
        
                                        </asp:EntityDataSource>          
        
                                    </telerik:RadPane>

I noticed that after rendering, the "move" input button has the following properties and css properties:
I also notice that the "move" image is missing.

<input title="Drag to the Sample Editor" class="rlvDrag" id="ctl00_ctl00_ctl00_uxSiteContentContainerContentPlaceHolder_uxSiteLayoutContentContainerContentPlaceHolder_uxContentLayoutContentContainerContentPlaceHolder_RadListView1_ctrl0_RadListViewItemDragHandle1" onmousedown="$find('ctl00_ctl00_ctl00_uxSiteContentContainerContentPlaceHolder_uxSiteLayoutContentContainerContentPlaceHolder_uxContentLayoutContentContainerContentPlaceHolder_RadListView1')._itemDrag._dragHandleMouseDown(event, 0)" type="button"/>

cursor: url('<%=WebResource("Telerik.Web.UI.Skins.Common.grab.cur")%>'), move

So, I checked the online example again and I see that I'm missing the following "move" image.
Kindly help me check what I missed to have this image show up.

background-image : url(/aspnet-ajax/WebResource.axd?d=yWIF5pzOIByI0lZ3Ioc3RX00-hPm5-dDpfPnWxbo1HjTmuSiaDuh4WTkFN0XLWntfcvIeN2RxnMevUu3xdO7PA2&t=634037268960000000); BACKGROUND-POSITION: center center

Many Thanks,
Henry Wu

6 Answers, 1 is accepted

answered on 05 Apr 2010, 04:05 PM

grab-cur.zip

Hi Henry,

If I understand you correctly, you are not seeingthe drag handle cursor image, which looks like a hand and appears when you hover the drag handle. However, its styles are defined in the RadListView base stylesheet, so you should be seeing this image even when using a custom skin.

I am sending you the image attached to this message. Add the following CSS rule to your custom skin CSS:

div.RadListView_SkinName .rlvDrag
{
cursor:url('_some_path_here_/grab.cur'), move;
}

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 06 Apr 2010, 04:59 PM

Hi Dimo,
Thanks for the info. However, I thought by following the instructions located in this URL: http://www.telerik.com/help/aspnet-ajax/listview-itemdrop.html the drag image will automatically be rendered - given the Telerik Theme you've set.

In other words, as per instructions, by adding a div with the class="rlvI", plus adding the RadListViewItemDragHandle, both inside the ItemTemplate tags, then the drag image and the drag cursor will show up automatically - rendered depending on the Telerik Theme chosen.

The issue I'm facing is that the drag cursor shows up, but the drage image does not. Should I set the drag image manually? Or by design, it should show up automatically.

Currently I'm using the Windows7 theme.

    
               <ItemTemplate> 
        
                   <div class="track rlvI">  
        
                       <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server" 
        
                           ToolTip="Drag to organize" /> 
        
                       <div class="info">  
        
                           <h3> 
        
                               <%# Eval("Track") %> <%# Eval("Title") %> 
        
                           </h3> 
        
                           <div class="artist">  
        
                               <%# Eval("Artist") %> 
        
                           </div> 
        
                           <div class="album">  
        
                               <%# Eval("Album") %> 
        
                               <%# Eval("Year").ToString() != "" ? "(" + Eval("Year").ToString() + ")" : "" %> 
        
                           </div> 
        
                       </div> 
        
                   </div> 
        
               </ItemTemplate>

Many Thanks,
Henry Wu

Accepted

answered on 07 Apr 2010, 02:46 PM

Hello Henry,

In order to see the drag handle image, the following prerequisites must be met:

1. The LayoutTemplate must contain an element with a RadListView_SkinName CSS class. The SkinName must match the value of the control's Skin property ("Default" by default).

2. If you have set EnableEmbeddedSkins="false" (and I see that you have done so), you need to register a custom skin manually.

3. The custom skin must define a background image for the rlvDrag CSS class.

So my questions for you are:

1. Do you have the correct CSS class in the LayoutTemplate?
2. If you intend to use the embedded Windows7 skin, have you removed the EnableEmbeddedSkins="false" setting?
3. If you are using a custom skin, do you have the required background style in the CSS file and is the CSS file registered on the page?

Regards,
Dimo
the Telerik team