Telerik Forums / UI for ASP.NET AJAX Forum / ListView /

Drag Move Background Image missing

Telerik UI for ASP.NET AJAX
Resources Buy Try

7 posts, 1 answers

Henry

35 posts

Member since:
Mar 2009

Posted 03 Apr 2010 Link to this post

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

Dimo
Admin

8485 posts
Posted 05 Apr 2010 Link to this post

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.

grab-cur.zip
Henry

35 posts

Member since:
Mar 2009

Posted 05 Apr 2010 Link to this post

Hi Dimo,
I'm seeing the hand cursor. But I'm not seeing the cross-arrow image where you place the mouse over to move list-item.

Many Thanks,
Henry Wu
Dimo
Admin

8485 posts

Posted 06 Apr 2010 Link to this post

Hi Henry,

This image is called drag.gif and can be found in

/ Skins / SkinName / ListView / drag.gif

The /Skins/ folder is located inside the RadControls installation folder or ZIP. Take an image from whatever skin you prefer.

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.

Henry

35 posts

Member since:
Mar 2009

Posted 06 Apr 2010 Link to this post

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

Answer
Dimo
Admin

8485 posts

Posted 07 Apr 2010 Link to this post

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

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

35 posts

Member since:
Mar 2009

Posted 07 Apr 2010 Link to this post

Hi Dimo,
I changed the setting EnableEmbeddedSkins to true and it worked. Thanks a lot.
I believe I copied the settings from the example: http://www.telerik.com/help/aspnet-ajax/listview-itemdrop.html which I didn't really notice it was there. Thanks again!

Henry Wu