ItemTemplate on Second Level Items for Hover Menu

6 posts, 0 answers
  1. kfrancis
    kfrancis avatar
    69 posts
    Member since:
    Dec 2008

    Posted 21 Aug 2009 Link to this post

    Okay,

    What I'm trying to do is this ... I'm trying to create a radpanel dynamically depending on the data, but when the user hovers on the second level items, I'm trying to show some imagebuttons that allow the user to quickly perform operations on that item.

    So, here's the panel before the user hovers:

    Category A (open)
    - Item 1
    - Item 2
    - Item 3
    Category B (closed until clicked 'FullExpandItem')

    When a user hovers over Item 1 - show this:

    Category A (still open)
    - Item 1        +  X
    - Item 2
    - Item 3
    Category B (still closed)

    An item template that I'll need is something like this:
    <ItemTemplate> 
    <div class="floatbox" onmouseout="onMouseOut(this)" onmouseover="onMouseOver(this)"
       <%# Eval("Text") %> 
       <asp:ImageButton ID="addImgBtn" runat="server" OnPreRender="addImgBtn_PreRender" title='<%# Eval("ID") %>' ImageUrl="~/Images/Add.png" style="display:none; visibility: hidden;" /> 
       <asp:ImageButton ID="openImgBtn" runat="server" OnPreRender="openImgBtn_PreRender" title='<%# Eval("ID") %>' ImageUrl="~/Images/Open.png" style="display:none; visibility: hidden;" /> 
    </div> 
    <ItemTemplate> 

    the code for one of the image buttons does this: (right now, i'm just alerting what the ID is and the command, but I will be opening a radwindow to a page and set the ID=whatever in the querystring so I can dynamically show the data for that specific item.
    Protected Sub addItemBtn_PreRender(ByVal sender As ObjectByVal e As EventArgs) 
            Dim addItemBtn As ImageButton = CType(sender, ImageButton) 
            If addItemBtn IsNot Nothing Then 
                addItemBtn.Attributes("onclick") = "alert('add: " & addItemBtn.Attributes("title") & "'); return false;" 
            End If 
        End Sub 

    with the following javascript:
    function onMouseOut(lblCtrl) { 
                if (lblCtrl !== null) { 
                    if (lblCtrl.children.length > 2) { 
                        for (i = 1; i < lblCtrl.children.length; i++) 
                        { 
                            var imgCtrl = lblCtrl.children[i]; 
                            if (imgCtrl !== null) { 
                                imgCtrl.style.display = 'none'
                                imgCtrl.style.visibility = 'hidden'
                            } 
                        } 
                    } 
                } 
            } 
            function onMouseOver(lblCtrl) { 
                if (lblCtrl !== null) { 
                    if (lblCtrl.children.length > 2) { 
                        for (i = 1; i < lblCtrl.children.length; i++) 
                        { 
                            var imgCtrl = lblCtrl.children[i]; 
                            if (imgCtrl !== null) { 
                                imgCtrl.style.display = 'block'
                                imgCtrl.style.visibility = ''
                            } 
                        } 
                    } 
                } 
            } 

    Curious thing happens if I set that to the item template though - my items (the ones that have that inline hover menu) appear for every item (obviously, since there is no checking for which level (level = 1)) but that the regular databound items ALSO get put there.

    What's a potentially correct way to go about this? I simply want to be able to specify what is in the second level items so I can put my inline hover menu there.

    Help!
    Kori
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 27 Aug 2009 Link to this post

    Hello Kori,

    I suggest you try to add the template dynamically only to the items from second level, please check this help article which shows how to do that.

    Greetings,
    Yana
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. kfrancis
    kfrancis avatar
    69 posts
    Member since:
    Dec 2008

    Posted 28 Aug 2009 Link to this post

    I'm not quite sure how that article really helps, other than the fact that I can do the following:

    For Each item As RadPanelItem In RadPanelBar1.GetAllItems() 
                If item.Level = 1 Then 
                    template.InstantiateIn(item) 
                End If 
            Next 

    but that still gives me:

    Catagory A
    - Item 1
    Item 1

    Where the "- Item 1" is selectable and normal, and the "Item 1" isn't selectable, and is literally only the label. Why can't I control how the "- Item 1" is displayed? Isn't that the purpose of an ItemTemplate?
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Sep 2009 Link to this post

    Hello Kori,

    The ItemTemplate of the panelitem defines its content. However it is rendered by default below the item's text. Please check this online example which shows how to move the content next to the item's text.

    Regards,
    Albert,
    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.
  6. kfrancis
    kfrancis avatar
    69 posts
    Member since:
    Dec 2008

    Posted 08 Sep 2009 Link to this post

    Yes, it does. But that sample doesn't do any databinding .. any clues about how to do this in conjunction with databinding?
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Sep 2009 Link to this post

    Hi Kori,

    Please check this help article which explains data-binding expressions in templates.

    All the best,
    Yana
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017