(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.
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:
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:
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.
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.
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!! [:D]
As you asked me if I had Databinding calls in the code, how this could be relatd with this issue?
Thanks
Juan
Juan Barrera
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Marked as answer by Rasetti on Jul 01, 2007 12:57 AM
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!
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!
Juan Barrera
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Wow. That is odd. We probably need to just accept that there is a logical answer but we may not uncover it due to the inherent limitations of collaborating via forum chats like this. Perhaps it is enough to be happy that you got it working! Ha ha.
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?
Juan Barrera
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Rasetti
Participant
1216 Points
286 Posts
Menu SelectedItem Problem
Aug 28, 2006 03:13 AM|LINK
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:
If ((Not IsNothing(menu)) AndAlso (Not IsNothing(item)) AndAlso (Not IsNothing(writer))) Thenwriter.WriteLine()
writer.WriteBeginTag("li")
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
{
background-color: #F7F7F7;
}
.DashboardMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Leaf-Selected
{
background-color: #003B72;
}
.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
<asp:Menu ID="Menu1" runat="server" CssSelectorClass="DashboardMenu" Orientation="Horizontal" OnMenuItemClick="MenuItemClick">
<Items>
<asp:MenuItem Value="0" Text="0" Selected="True" />
<asp:MenuItem Value="1" Text="1" />
<asp:MenuItem Value="2" Text="2" />
<asp:MenuItem Value="3" Text="3" />
</Items>
</asp:Menu>
<div class="DashboardMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Leaf-Selected">
<a href="javascript:__doPostBack('ctl00$ProfilerPlaceHolder$Menu1','b0')" class="AspNet-Menu-Link-Selected">
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>
Any ideas on what i'm missing here?
Thanks,
Juan
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu SelectedItem Problem
Aug 28, 2006 04:43 PM|LINK
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.
Groovybits.com
Rasetti
Participant
1216 Points
286 Posts
Re: Menu SelectedItem Problem
Aug 28, 2006 08:30 PM|LINK
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:
Protected Sub MenuClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
Dim Menu As Menu = CType(sender, Menu)
If Menu Is Nothing = False And Page.IsPostBack = True Then
If Menu.ID = "Menu1" Then
Menu.Items.Item(e.Item.Value).Selected = True
Menu2.Items.Item(CInt(Menu2.SelectedValue)).Selected = True
Menu3.Items.Item(CInt(Menu3.SelectedValue)).Selected = True
Menu4.Items.Item(CInt(Menu4.SelectedValue)).Selected = True
ElseIf Menu.ID = "Menu2" Then
Menu2.Items.Item(e.Item.Value).Selected = True
Menu1.Items.Item(CInt(Menu1.SelectedValue)).Selected = True
Menu3.Items.Item(CInt(Menu3.SelectedValue)).Selected = True
Menu4.Items.Item(CInt(Menu4.SelectedValue)).Selected = True
ElseIf Menu.ID = "Menu3" Then
Menu3.Items.Item(e.Item.Value).Selected = True
Menu1.Items.Item(CInt(Menu1.SelectedValue)).Selected = True
Menu2.Items.Item(CInt(Menu2.SelectedValue)).Selected = True
Menu4.Items.Item(CInt(Menu4.SelectedValue)).Selected = True
ElseIf Menu.ID = "Menu4" Then
Menu4.Items.Item(e.Item.Value).Selected = True
Menu1.Items.Item(CInt(Menu1.SelectedValue)).Selected = True
Menu2.Items.Item(CInt(Menu2.SelectedValue)).Selected = True
Menu3.Items.Item(CInt(Menu3.SelectedValue)).Selected = True
End If
GenerateAllCharts(GetData)
End If
End Sub
And the code for the four menus is like this:
<asp:Menu ID="Menu3" runat="server" CssSelectorClass="DashboardMenu" Orientation="Horizontal"
OnMenuItemClick="MenuClick">
<Items>
<asp:MenuItem Value="0" Text="Market Share" />
<asp:MenuItem Value="1" Text="Evolution Index" />
</Items>
</asp:Menu>
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu SelectedItem Problem
Aug 28, 2006 09:24 PM|LINK
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.
Groovybits.com
Rasetti
Participant
1216 Points
286 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 10:07 AM|LINK
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!! [:D]
As you asked me if I had Databinding calls in the code, how this could be relatd with this issue?
Thanks
Juan
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 05:39 PM|LINK
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!
Groovybits.com
Rasetti
Participant
1216 Points
286 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 09:00 PM|LINK
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!
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 09:10 PM|LINK
Groovybits.com
Rasetti
Participant
1216 Points
286 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 10:50 PM|LINK
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?
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu SelectedItem Problem
Aug 29, 2006 11:17 PM|LINK
Groovybits.com