problem: Hierachical image menu show text and images

5 posts, 0 answers
  1. Cdc
    Cdc avatar
    3 posts
    Member since:
    Jun 2012

    Posted 24 Apr 2013 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cdc
    Cdc avatar
    3 posts
    Member since:
    Jun 2012

    Posted 30 Apr 2013 Link to this post

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

  5. Cdc
    Cdc avatar
    3 posts
    Member since:
    Jun 2012

    Posted 30 Apr 2013 Link to this post

    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
  6. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 05 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017