problem: Hierachical image menu show text and images

[Cdc]

Hi, I have a problem with a hierarchical RadMenu generated with a datatable when using custom images for each menu option and that requires some extra radmenuitems manually defined.

The problem is that when I set the images, the "text" defined is shown to the right of the png file representing the menu option. If I don't set the text value or even if I set string.empty to it, then the name of a class "System.data.datarowview" is shown to the right of each menu item image.


I defined a RadMenu in the following way in the aspx file:

<telerik:RadMenu ID="TelerikRadMenu" runat="server" Skin="WebBlue" AppendDataBoundItems="True" />


I have a sql server table with the following structure:

IdMenu int
IdMenuParent int
Description varchar(100)
Tooltip varchar(200)
ImageBaseName varchar(50)
TargetUrl varchar(max)
OpenInTopFrame boolean

Then I generate the menu in the vb like this:

private useimagesinradmenu as boolean = false
private basethemepath as string = "~/App_Themes/Default/Images/Menu/"

Private Sub GeneraMenuTelerik()
'Get the menu for this particular logged user from a user object defined outside. 
'It works fine.
Dim dt As DataTable = CurentUser.Menu.GetFullMenuAsDataTable()

basethemepath = String.Format("~/App_Themes/{0}/Images/Menu/", CurrentUser.Theme)
useimagesmenu as boolean = ValidateAllImgExist(basethemepath, dt)

useimagesinradmenu = useimagesmenu

Dim btninit As New RadMenuItem()

'for simplicity I only show how I generate a single databounditem, but there are more depending
'certain conditions.
With btninit
.EnableImageSprite = useimagesmenu
.HoveredImageUrl = String.Format(basethemepath + "/{0}_hover.png", "init")
.ImageUrl = String.Format(basethemepath + "/{0}_normal.png", "init")
.Target = "_Top"
.NavigateUrl = "~/Home.aspx"
.Text = "Home"
.ToolTip = "Go to system's home page"
End With
 
With TelerikRadMenu
With .Items
.Add(btninit)
End With

.DataSource = dt
.DataFieldID = "IdMenu"
.DataFieldParentID = "IdMenuParent"
.DataTextField = "Description" 'If I comment this line or set string.empty as value I get the text  "System.data.datarowview" else 
.DataNavigateUrlField = "TargetUrl"
.EnableEmbeddedSkins = Not useimagesmenu
.EnableImageSprites = useimagesmenu
.DataBind()
End With
End Sub

Protected Sub TelerikRadMenu_ItemDataBound(sender As Object, e As RadMenuEventArgs) Handles TelerikRadMenu.ItemDataBound
e.Item.ToolTip = CStr(DataBinder.Eval(e.Item.DataItem, "Tooltip"))
If CBool(DataBinder.Eval(e.Item.DataItem, "OpenInTopFrame")) Then
e.Item.Target = "_top"
Else
e.Item.Target = "mainFrame"
End If

if useimagesinradmenu Then
Dim imgbasename As String = DataBinder.Eval(e.Item.DataItem, "ImageBaseName ").ToString()
Dim imgnormal As String = String.Format("{0}{1}_normal.png", basethemepath, imgbasename)
Dim imghover As String = String.Format("{0}{1}_hover.png", basethemepath, imgbasename)

e.Item.ImageUrl = imgnormal
e.Item.HoveredImageUrl = imghover
End If
End Sub

How can I hide the right text?

Thanks
Sergio E.
Cdc DevTeam

[Kate]

Hi Sergio,

Thank you for contacting us.

I tested a very similar scenario to the one that you describe but i was not able to get the issue that you describe. Attached to this post you can find my simplified runnable page that works as expected from my side. Can you please modify it in a way that it demonstrates the issue that you are getting and send it back to me for further investigation?

Thank you in advance for your cooperation.

Regards,
Kate
the Telerik team

[Cdc]

I'll check it and modify it. Thank you for your response.

[Cdc]

I've modified the project so it show the error I'm getting.

I only have to comment the line:
  'TelerikRadMenu.DataTextField = "Text"

But also, I notice that the image is used as an icon for the menu option, and it is not what I need to achieve; my requirement is to show a images only menu.

I'm unable to attach the zip file  with the modified project.

There is the code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
       If Not IsPostBack Then
           TelerikRadMenu.DataSource = CreateTestTable()
           'Establish hierarchy:
           TelerikRadMenu.DataFieldID = "ID"
           TelerikRadMenu.DataFieldParentID = "ParentID"
           'Set Text, Value, and NavigateUrl:
           'TelerikRadMenu.DataTextField = "Text"
           TelerikRadMenu.DataValueField = "ID"
           TelerikRadMenu.DataNavigateUrlField = "URL"
           TelerikRadMenu.DataBind()
       End If
   End Sub

  Protected Sub TelerikRadMenu_ItemDataBound(sender As Object, e As RadMenuEventArgs) Handles TelerikRadMenu.ItemDataBound
        e.Item.ImageUrl = "../images/Cut.png"
        e.Item.HoveredImageUrl = "../images/Cutover.png"
        e.Item.ToolTip = CStr(DataBinder.Eval(e.Item.DataItem, "ToolTip"))
    End Sub

Thanks in advance

[Ivan Zhekov]

Hello,

Have you looked at the Image-only demo of the menu? (http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx)

The demos has an additional CSS file that shows what you need to modify in order for the images to be expanded fully.

Kind regards,
Ivan Zhekov
the Telerik team