Drag Move Background Image missing

7 posts, 1 answers
  1. Henry
    Henry avatar
    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
  2. Dimo
    Admin
    Dimo avatar
    8330 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    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
  5. Dimo
    Admin
    Dimo avatar
    8330 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.
  6. Henry
    Henry avatar
    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
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8330 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.
  8. Henry
    Henry avatar
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017