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

ItemTemplate on Second Level Items for Hover Menu

5 Answers 100 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kori
Top achievements
Rank 2
Kori asked on 21 Aug 2009, 08:56 PM
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

5 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 27 Aug 2009, 06:35 AM
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.
0
Kori
Top achievements
Rank 2
answered on 28 Aug 2009, 03:56 PM
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?
0
Atanas Korchev
Telerik team
answered on 03 Sep 2009, 07:16 AM
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.
0
Kori
Top achievements
Rank 2
answered on 08 Sep 2009, 03:25 PM
Yes, it does. But that sample doesn't do any databinding .. any clues about how to do this in conjunction with databinding?
0
Yana
Telerik team
answered on 10 Sep 2009, 01:58 PM
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.
Tags
Menu
Asked by
Kori
Top achievements
Rank 2
Answers by
Yana
Telerik team
Kori
Top achievements
Rank 2
Atanas Korchev
Telerik team
Share this question
or