Unable to cast object of type 'ASP.controls_navpaneladmin_ascx' to type 'Telerik.Web.UI.RadNavigation'

[Michel]

Hello,

 

I have a Radnavigation usercontrol that is registered on a page (<%@ Register Src="../controls/NavPanelAdmin.ascx" TagName="NPA" TagPrefix="ucNPA" %>)

I need to select that radnav items based on the item click (serverside)

When i perform a search for the control in the page that has the UC registered i am able to find the RADNAV but i cannot access it due to the following error

Unable to cast object of type 'ASP.controls_navpaneladmin_ascx' to type 'Telerik.Web.UI.RadNavigation'.Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidCastException: Unable to cast object of type 'ASP.controls_navpaneladmin_ascx' to type 'Telerik.Web.UI.RadNavigation'.

Source Error:

Line 274: controlList.Add(c.ID) Line 275: If c.ID = "mymenu123" Then Line 276: Dim smenu As RadNavigation = c Line 277: smenu.ForeColor = Drawing.Color.Aquamarine Line 278: End If
Stack Trace:

[InvalidCastException: Unable to cast object of type 'ASP.controls_navpaneladmin_ascx' to type 'Telerik.Web.UI.RadNavigation'.]

Private Sub ListControlCollections()
    Dim controlList As New ArrayList()
    AddControls(Page.Controls, controlList)

    For Each str As String In controlList
        Response.Write(str & Convert.ToString("<br/>"))
    Next
    Response.Write("Total Controls:" + controlList.Count.ToString)
End Sub

Private Sub AddControls(page As ControlCollection, controlList As ArrayList)
    For Each c As Control In page
        If c.ID IsNot Nothing Then
            controlList.Add(c.ID)
            If c.ID = "mymenu123" Then
                Dim smenu As RadNavigation = c
                smenu.ForeColor = Drawing.Color.Aquamarine
            End If
        End If

        If c.HasControls() Then
            AddControls(c.Controls, controlList)

        End If
    Next
End Sub

 

[Ivan Danchev]

Hello Michel,

There are several things to note in this scenario:
RadNavigation does not inherit from the Control class so you cannot do smenu = c, instead you can get the user control and search for Navigation in its own Controls collection.

Let's say user control, that contains the Navigation, is declared like this:

<uc1:WebUserControl runat="server" ID="WebUserControl" />

You can access the user control in the AddControls method and through it the Navigation (assuming "mymenu123" is the Navigation's ID):

controlList.Add(c.ID)
If c.ID = "WebUserControl" Then
    Dim smenu As RadNavigation = DirectCast(c.FindControl("mymenu123"), RadNavigation)
    smenu.CssClass = "myCustomNavigation"
End If

The last part sets a CssClass to the Navigation control and this class can then be used as a selector in a CSS rule, which you can set the text color with. This is needed because the ForeColor property of the Navigation is not used, so you cannot set the text color with it.
The CSS rule that uses the class posted above and sets the root nodes' color:

.myCustomNavigation .rnvRootGroup .rnvItem {
    color: aquamarine ;
}

Regards,
Ivan Danchev
Telerik by Progress

[Michel]

Thank you Ivan perfect worked.

[Ivan Danchev]

Hello Michel,

I am glad it worked out.

Here's a link to the Navigation's CSS Classes documentation article. You might find it helpful, in case you want to further customize the control. It lists the classes that can be used as CSS rules selectors and describes the elements they are applied to.

Regards,
Ivan Danchev
Telerik by Progress

[Michel]

Dear Ivan,

thank you for your support, but now i ran into another problem which is selecting the parent nodes of the sub navigation node.

Is there solution for selecting all the parent navigation nodes for the selected item?

 

Thanks

[Ivan Danchev]

Hello Michel,

The Navigation does not support multi-selection, only one node can be selected at a time. Parent nodes are highlighted by default and create the impression of being selected, but in fact the selected node and its parent use different classes as can be seen in the following screenshot. The rnvSelected class is applied to the selected item (E-Drum Bass Pads), while the rnvExpanded class is applied to the parents up in the hierarchy chain. As a result both E-Drums and Drums & E-Drums remain highlighted when selecting any of the E-Drums child nodes.
Could you please elaborate more on how the behavior in your Navigation differs from the one shown in the screenshot I linked above?

Regards,
Ivan Danchev
Telerik by Progress

[Michel]

Hi Ivan,

After i find the navigation control, and find the nodebytext i was able to select it using the foundnode.selected=true

but the parent nodes are not highlighted. only when i hover the parent it got highlighted but the node itself is selected.

example attached: "About Us" is the parent and "Strategic Partners" is the sub navigation

 

Thanks

[Ivan Danchev]

Hello Michel,

As I mentioned you cannot have multiple nodes selected, for a parent to appear as "selected" it needs to be expanded. So after selecting a child node, "Strategic Partners" for example, in the code-behind, you can expand its parent on the client. In order to do so subscribe the Navigation to its OnClientLoad event:

<telerik:RadNavigation ID="RadNavigation1" runat="server" OnClientLoad="OnClientLoad">

and in the event's handler expand the parent if its child is selected:

function OnClientLoad(sender) {
    var selectedNode = sender.get_selectedNode();
    if (selectedNode != null) {
        var parentNode = selectedNode.get_parent();
        if (parentNode != sender) {
            setTimeout(function() {
                parentNode.expand();
            }, 300)
        }
    }
}

Let me know whether this helps you achieve the desired behavior.

Regards,
Ivan Danchev
Telerik by Progress

[Michel]

Dear Ivan, 

Thank you for your reply. the solution you provided worked perfectly on rootnode and only 1 level (i.e. root>menu item)

If i have another sub menu it radnavigation is acting in a weird way.

Example:

About Us

            International Activities

                                                Test

if i click on International Activities node the solution provided worked perfectly. but if i click on Test node i noticed the following:

1. Menu is not expanding
2. Test node is sliding animated located at the top left of the page and is selected

Attached screenshot

Thanks

[Ivan Danchev]

Hello Michel,

This is expected if there are multiple levels of nodes. In this case you can still use the approach I suggested in my previous reply, but you should also recursively expand all parent nodes up in the hierarchy. 

Regards,
Ivan Danchev
Telerik by Progress

[Michel]

Dear Ivan,

Sorry but i am not sure how to implement this from code behind.

I appreciate all your help on this issue.

Thanks

[Ivan Danchev]

Hello Michel,

The expansion of the parent Nodes has to be implemented on the client, not in the code-behind. There is a specific that has to be taken into account when expanding several levels of parents and that is the order of expansion should be from the top Node to the bottom. So using your example (3 levels of nodes), first About Us has to be expanded, then International Activities. Each of the levels would have to be expanded with a delay, in order to ensure its parent is expanded, otherwise the dropdown position will not be properly calculated. Here's a code snippet, which shows how you can expand the parent nodes in a 3-level Navigation:

function OnClientLoad(sender) {
    var selectedNode = sender.get_selectedNode();
    if (selectedNode != null) {
        var parentNode = selectedNode.get_parent();
        if (parentNode != sender) {
            var level = parentNode.get_level();

            //if a node on the second level is selected (for example: "International Activities")
            if (level == 0) {
                setTimeout(function () {
                    parentNode.expand();
                }, 300);
            }

            //if a node on the third level is selected (for example: "Test")
            else if (level == 1) {
                setTimeout(function () {
                    parentNode.get_parent().expand();
                }, 300);
                setTimeout(function () {
                    parentNode.expand();
                }, 500);
            }
        }
    }
}

If you are going to have more than 3 levels of nodes you can add additional conditions or implement a different custom approach.

Regards,
Ivan Danchev
Telerik by Progress