Hi All!

(sorry for the code mess, I still can't master this editor! )

Here is the scenario:
I have several Menu controls in a webform and I want to dynamically change the style of a given menu item on selecting / desesecting it.

The menu is like this:

<asp:Menu ID="Menu1" runat="server" CssSelectorClass="DashboardMenu" Orientation="Horizontal" OnMenuItemClick="MenuItemClick">

<Items>

            <asp:MenuItem Value="0" Text="0" />

            <asp:MenuItem Value="1" Text="1" />

            <asp:MenuItem Value="2" Text="2" />

            <asp:MenuItem Value="3" Text="3" />

     </Items>
</asp:Menu>

I slightly changed the MenuAdapter BuildItem Sub code to look like this:

writer.WriteLine()

writer.WriteBeginTag("li")

If item.Selected = False Then

writer.WriteAttribute("class", IIf(item.ChildItems.Count > 0, "AspNet-Menu-WithChildren", "AspNet-Menu-Leaf"))

Else

writer.WriteAttribute("class", IIf(item.ChildItems.Count > 0, "AspNet-Menu-WithChildren-Selected", "AspNet-Menu-Leaf-Selected"))

End If

            writer.Write(HtmlTextWriter.TagRightChar)

            writer.Indent = writer.Indent + 1

            writer.WriteLine()

            If (item.NavigateUrl.Length > 0 Or item.Selectable = True) Then

               writer.WriteBeginTag("a")

               If item.NavigateUrl.Length > 0 = True Then

                  writer.WriteAttribute("href", Page.ResolveUrl(item.NavigateUrl))

               Else

                  writer.WriteAttribute("href", Page.ClientScript.GetPostBackClientHyperlink(menu, "b" + item.ValuePath.Replace(menu.PathSeparator.ToString(), "\\"), True))

               End If

               If item.Selected = False Then

                  writer.WriteAttribute("class", "AspNet-Menu-Link")

               Else

                  writer.WriteAttribute("class", "AspNet-Menu-Link-Selected")

               End If

               If (item.Target.Length > 0) Then

                  writer.WriteAttribute("target", item.Target)

               End If

So, what I wanted to achieve doing this is: based on the Selected flag, I want to apply a different class to the MenuItem “li” and “a” elements, to control them through css later, like this:

.DashboardMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf

{

}

.DashboardMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf-Selected

{

}

.DashboardMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf a.AspNet-Menu-Link

{    

      color: #003B72!important;

}

.DashboardMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf-Selected a.AspNet-Menu-Link-Selected

{    

      color: White!important;

}

If I explicitly set one of the items Selected property to “true”  I get the right results, but, as soon I try to change it using the “MenuItemClick” event, I don’t get the right Css class applied, even when the MenuAdapter code is called on the postback event.

  This is the HTML generated code with the selected=True property assigned throught the MenuItemClick event:

 <div class="DashboardMenu">
 <div class="AspNet-Menu-Horizontal">
  <ul class="AspNet-Menu">
   <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('ctl00$ProfilerPlaceHolder$Menu1','b0')" class="AspNet-Menu-Link">
     0
    </a>
   </li>
   <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('ctl00$ProfilerPlaceHolder$Menu1','b1')" class="AspNet-Menu-Link">
     1
    </a>
   </li>
   <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('ctl00$ProfilerPlaceHolder$Menu1','b2')" class="AspNet-Menu-Link">
     2
    </a>
   </li>
   <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('ctl00$ProfilerPlaceHolder$Menu1','b3')" class="AspNet-Menu-Link">
     3
    </a>
   </li>
  </ul>
 </div>
</div>

And here is the code generated if I set that property beforehand in the Menu properties, which is the result I want to achieve programatically

Any ideas on what i'm missing here?

Thanks,

Juan

Hi Juan, I don't see any problem with your approach but obviously since it isn't working there is a problem somewhere.  Would you please post the code you are using for your MenuItemClick event?  Also, have you put a breakpoint in that function to make certain that you are actually hitting it?  I'll help more when I can see the code you are using there.  Thanks.

Hi Russ!

Yes, I don't know what's happening, since it's supposed to work....

 The MenuItemClick Event is like this, I checked with breakpoints that the event is actually hit:

And the code for the four menus is like this:

Thaks for posting the code, Juan.  I'm confused by lines that look like this:

Menu2.Items.Item(CInt(Menu2.SelectedValue)).Selected = True

Why do you need that?  It looks like you are setting Menu2's selected item to be the same as what it was?  After all, the Item index is Menu2's selected value which you've set up to be the index of the item.  That seems like it resets Menu2's selected item to whatever it was.  Am I missing something?

Even if this were redundant it looks like it should be superfluous and everything should work.  So, I have a couple more questions.  Have you not only set breakpoints in this function but also stepped through it in the debugger to make sure it does exactly what you expect?  Also, do you have an calls to DataBind in your code?  I'm wondering if the selected item in each menu is somehow getting wiped out by some other chunk of logic further down the line from this function.

Russ,

After spending some more hours on the debugger, I found the problem, even if I don't know the exact reason:

In this page, I'm using Atlas UpdatePanels and a charting tool called DotNetCharting, and, for some reason, the interaction between those two was causing the MenuItemClick event beign fired but the MenuAdapter don't, or, as you pointed, the need of explicitely set the SelectedItem because the control wasn't keeping its value.

I decided to redo all the chart's databinding process, and, with the SAME code (except, as said, for the databinding), the page is working perfect, and I could remove those redundant "SelectedItem" lines, because all the controls are working as expected. What I did mostly, was to optimize the castings, the math functions, etc. 

I'm not sure how this is related with my original problem..but it was the solution!! 
As you asked me if I had Databinding calls in the code, how this could be relatd with this issue?

Thanks

Juan

Hi Juan, first let me congratulate you on getting this issue fixed on your own.  That's terrific.  Second, let me address your question as to why the data binding code you used to have might have been a problem.  I'm guessing that that code didn't check to see if Page.IsPostBack was true or false.  I'm guessing the page was binding regardless of whether or not it was posting back.  Is that correct?  If so, then that might explain things.  I'm not sure but often binding data during a post back wipes out some of the viewstate info because you are essentially saying to the framework (during a binding operation) "go and refresh my data".  That might mean that the framework rebuilds menus and trees and things from the original markup like the MenuItem tags, etc.  This is just conjecture.  I just know from lots of experience that when settings seem to get "reset" mysteriously you need to see if you are doing any data binding operations that might be "resetting" things in a way that you don't really want.  Sorry to make this so vague!

Thank you Russ!

The thing that's still keeping me thinking, is that i'm not databinding any of the menu controls, just the Charts.

And, in fact, i'm checking for Page.IsPostBack, because on the first load (Page.IsPostBack=False) I read the .xls file that contains the data and store the produced tables as Session Items. So, from the second pass (Page.IsPostBack=True) the data is beign deserialized from the different Session objects

And, more over, now that the page is working, the Databinding process is exactly the same, except for the way the "GetData" function "reads" the .xls file or the Session object. But there were no changes in the sequence of events, so it still amazes me why now it's working and before it wasn't!

Yeah! That's right!

As I'm using a lot the Atlas controls and the Adapters I'd like to understand as much as I can how they work together, but, in this case, as you said: should be a logical answer, but let's just be happy with get it working! :)

BTW, in the next release of the controls, is there a solution to "differentiate" Selected Items through css, like what I did?