|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Using SlideMenu, I want items that are clicked to expand but not become "selected". I want the selected item to be determined by the Url. I set AutoSelectSource to "NavigateUrl" but it still selects other items when I expand them even if that item has no NavigateUrl set and so causes no page refresh.
The reason I only want the selected item to be determined by the NavigateUrl is because I do not want multiple items that use the "selected" CSS.
Thank you.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Hi,
Selected and Expanded always go together for top level slide menu items. However they do act independently on sub items. So if all your navigation is done through sub items, then you can modify _TopLevelItem look items for it to have the same styles for normal style and selected style. This way when you click to expand a top level items, it will expand and switches to "selected style", but it won't look any different than a normal item.
If the item must also switch to a different "selected style", you can borrow "DisabledStyle" and use ClientSideOnItemClick to switch the item into disabled state after it is clicked. This usually is not a problem since the clicked item (thus subsequently disabled) represents the current page, so it no longer needs to be clicked.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
That makes sense...
I do handle some of the navigation through main items (if no sub items exist) so the use of ClientSideOnItemClick will be needed, I think.
Would you please post a small sample of how this would work? I would create a little javascript function called "MenuClickHandler" and add this:
<eo:SlideMenu ClientSideOnItemClick="MenuClickHandler" ID="SlideMenu1" runat="server"...
The js function would be like:
function MenuClickHandler(e, info)
{
info.getItem().setSelected(false);
}
Am I close?
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
What I posted above seems to work - but only the 2nd time I click. In other words, when I click an item and it expands, it does not become disabled, but it does if I then click it again.
Thank you.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Yes. Pretty close. What I was suggesting is instead of calling: info.getItem().setSelected(false); You would use: info.getItem().setDisabled(true); To actually disable the item ---- so that the menu item will use DisabledStyle, which you would set to the same as SelectedStyle. Of course, if you use this way, you will have to remember to re-enable it later. The complete code would look something like this:
Code: JavaScript
var g_lastClickedItem = null;
function MenuClickHandler(e, info)
{
if (g_lastCheckedItem)
g_lastCheckedItem.setDisabled(false);
g_lastCheckedItem = info.getItem();
g_lastCheckedItem.setDisabled(true);
if (g_lastCheckedItem)
g_lastCheckedItem.setDisabled(true);
}
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Well, I don't know... It just doesn't work. I have AutoSelectSource set to "NavigateUrl" if that has anything to do with it.
Isn't there an example somewhere that shows how to keep two items from being selected at the same time? I don't know why this is so complex...
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Ah....it does have to do with NavigateUrl, when you have NavigateUrl set, everytime you click an item, it navigates to another page --- whatever you have done inside the previous page thus is lost. So our script handler is useless there. Sorry that I didn't catch that in my previous post. Below is a small sample that we come up for you:
Code: HTML/ASPX
<eo:SlideMenu id="SlideMenu1"
runat="server" ControlSkinID="None" Width="160px" AutoSelectSource="NavigateUrlExact" SingleExpand="False">
<TopGroup Style-CssText="font-weight: bold; font-size: 12px; cursor: hand; color: #cccccc; font-family: verdana"
ItemSpacing="1">
<Items>
<eo:MenuItem NavigateUrl="WebForm1.aspx?id=1" Value="1" Text-Html="Parent Item">
<SubMenu>
<Items>
<eo:MenuItem NavigateUrl="WebForm1.aspx?id=1.1" Text-Html="Child Item 1"></eo:MenuItem>
<eo:MenuItem NavigateUrl="WebForm1.aspx?id=1.2" Text-Html="Child Item 2"></eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem Height="22" HoverStyle-CssText="padding-left: 5px; color: white; background-color: #cccccc"
ItemID="_TopLevelItem" NormalStyle-CssText="padding-left: 5px; color: black; background-color: #cccccc"
SelectedStyle-CssText="background-color:red;color:white;padding-left:5px;" LeftIcon-Url="00020009"
LeftIcon-ExpandedUrl="00020008">
<SubMenu Style-CssText="font-family:Arial;font-size:12px;font-weight:bold;" ItemSpacing="1"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="22" HoverStyle-CssText="padding-left: 15px; color: white; background-color: #cccccc"
ItemID="_Default" NormalStyle-CssText="padding-left: 15px; color: black; background-color: #f0f0f0"
SelectedStyle-CssText="background-color:red;color:white;padding-left:15px;"></eo:MenuItem>
</LookItems>
</eo:SlideMenu>
To simplify things, the menu sets NavigateUrl to the same page with different query string parameters. You can change it to anything. However our sample code below relies on this arrangement. So if you change the NavigateUrl you will need to change the code accordingly. We have put comments in code with more details.
Code: C#
private void Page_Load(object sender, System.EventArgs e)
{
string id = Request.QueryString["id"];
//Find out whether any top level items will match
//the current Url. Theoratically we should compare
//the NavigateUrl of each top level item with the
//current request Url. However to simply the sample
//code, we preset each item's Value property and compare
//that property with our query string because in our
//case different "pages" are actually the same with
//different "id" parameter
EO.Web.MenuItem topLevelItemToBeSelected = null;
foreach (EO.Web.MenuItem item in SlideMenu1.Items)
{
if (item.Value == id)
{
topLevelItemToBeSelected = item;
break;
}
}
//If one top level item matches the Url, then it means
//that item will be "Expanded" and "Selected". Since that
//item is the matching item, there should be no other
//matching items. In this case we set SelectedStyle.BackColor
//to the intended selected color: red. If however, no top
//level item matches the Url, it means the matching item
//will be a sub item, if any. In this case no top level
//item should be the intended selected color --- even though
//the item can still in Selected state. In this case we
//set the selected style color to gray.
EO.Web.MenuItem lookItem = SlideMenu1.LookItems.TopLevelItem;
if (topLevelItemToBeSelected != null)
lookItem.SelectedStyle.BackColor = Color.Red;
else
lookItem.SelectedStyle.BackColor = Color.Gray;
}
Let us know if this is what you need. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Cheers. I was just about to post an amendment to my post apologizing for the negative tone - didn't mean to vent with you all who seem to have created an excellent control with equally good support...
I will look it over and try to figure it out now - and I promise not to post back here unless I'm at my wit's end :)
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Not a problem. It is our goal to make our controls as easy to use as possible so that it can truely save our client's time and effort. As such your feedback is always welcome and if you do have any more questions, please do not hesitate to ask.
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Back again - you seem to have misunderstood...
I am not dealing with NavigateUrl for an item, but rather I have AutoSelectSource set to "NavigateUrl". In other words, no postback or page refresh occurrs. If it did, I could handle what I need server side...
Basically, what I need to have happen is this:
The page loads and the menu shows that "Home" is highlighted (so this item within SlideMenu is selected). Then, the user clicks a different item within SlideMenu, expanding that item to reveal the sub-items. When that happens, I either want the originally selected item to become unselected, or the newly clicked item to not become selected even though it expands. In other words, I just don't want two items within the top level to be shown as selected.
I'm just about at a loss about this.
Maybe it would help if you looked at my menu: quirt.net/gst
Click "North American Participants." Note how it expands and becomes highlighted but "Home" remains highlighted as well.
PS: I did just purchase a license - just didn't generate it yet because will be moving to a different URL for production...
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Hi,
I checked your site and it appears that what our sample code does is exactly what you are looking for. There is no postback, but everytime you click an item, for instance, "Question And Answers", page "Default.aspx" is requested from the server, it is inside that page's Page_Load you put our code in. If you run the code and you will see what we mean.
Hope this makes sense to you.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
I am not talking about when a postback or page refresh occurs! Before you click "Questions and Answers" and you have just clicked "North American Participants" no pastback has happened, and yet two items are highlighted.
I hope this makes sense to you...
For sure without a doubt no trip to the server has happened - everything I am talking about is client-side only. Yes, the menu I set up does involve calls to Default.aspx, but it is not that event that I am asking about. I am asking about what happens only when you have clicked "North American Participants" and that section expands. At this point, I would like either for "North American Participants" to not sow as selected, or "Home" to not show as selected.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Hi,
Hi....the "North American Participants" issue is very easy to solve --- just give that item a "SelectedStyle" that have the same setting as normal style (the gray background instead of blue background).
Every top level item falls into one of the following two kinds:
1. Top level items like "North American Participants" that does not redirect to another page;
2. Top level items like "In Case Of Emergency" that does redirect to another page;
#1 is much easier than #2. You just give it a SelectedStyle that's the same as regular style. Everything happens on the client side.
#2 is more complicated, the solution I provided in my previous post is for #2. When you click such an item, it goes to the server side, at where you get a chance to handle Page_Load and do the magic.
The very important key point of the whole solution is, there is no way to avoid having two selected items, but they are loads of ways to make a selected item look no different than not selected, because ultimiately you can set the SelectedStyle on each item completely indepentently. When you click "North American Participants", it will always go into "Selected" state, but if you give the item a SelectedStyle with a gray background, visually nothing changes.
Please let me know if this works for you.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
I still don't understand how to give a selected style that is the same as a regular style to a specific item on the client side.
To me, #2 is much easier than #1 since I am much more fluent in C# than js! :)
I should point out that the distinction you put in bold in the previous post about no way to avoid having two selected items, but lots of ways to make them look different was made clear in your first reply. I just need to see HOW. On the client side. How, do I make it so that an expanded item looks different from a different item that is selected?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Hi, SelectedStyle is a MenuItem property. So you just edit it with Slide Menu Builder. It's on the right side inside the property grid and you may want to click "Menu Item" on the toolbar to display it. Once you expand "SelectedStyle", you can change it whatever way you want. It has nothing to do with JavaScript. Basically you are telling that particular item to be "gray" when it's in "Normal" state, and to be "White" in "Hover" state, and to be "Red" in selected state. You can find more information about item state and styles at here: http://www.essentialobjects.com/ViewDoc.aspx?t=MenuCommon%2fStyleAndAppearance%2fitem_state.htmlhttp://www.essentialobjects.com/ViewDoc.aspx?t=MenuCommon%2fStyleAndAppearance%2fmenu_item_styles.htmlTo avoid repeating the same settings on multiple items, we provide look items: http://www.essentialobjects.com/ViewDoc.aspx?t=MenuCommon%2fLookSkinAndTheme%2flooks.htmlHope this helps. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
I KNOW THAT SelectedStyle is a MenuItem Property!!!!!!!! How do I change it on the client side? You keep referring to "that particular item" but all of the items are drawn from a database and populated server side. I know how to specify CSS for SelectedStyle, but that would apply to all selected items, not just one.
CAN'T YOU PLEASE JUST POST AN EXAMPLE?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
Hi,
Yes. You know it's a property. But I might have to say that you clearly do not know how it works --- you do not change the styles on the client side. The logic is like this:
1. You set different styles for different states on the server side (or inside your .aspx);
2. Menu item changes states on the client side (all by itself), when it changes states, it applies the corresponding style that you set on the server side;
It is important to understand that you do not change how menu item switches state. For example, when you hover over a menu item, it always enter "Hover" state --- you can never change that behavior. You control how the menu looks like by specifying different styles for different state.
For example, let's say the preset style display menu item as "gray", but display it as "blue" when mouse hovers over the item and you do not like this, you want the menu item still be "gray" when mouse hovers over the item. In order to do this, you do not stop the menu item from entering "Hover" state. You change the menu item's HoverStyle so that it is also gray.
The sample I gave you above clearly demonstrated this concept ---- not to mention that I elaberated with details with many addtional replies. So I am not sure what other sample code we can provide to you if you do not understand what we already provided.
As for populating from database, you will need to go over the "Data binding" section of the documentation ---- I know you may think its not necessary since you have already successfully populated it from the database, but believe me, there are much more in the documentation and I am sure you will find answers to many of your other questions there. Also, I would certainly urge you to review the section related to styles in the documentation in order to really understand how our menu works. Once you are clear about that, we will be happy to assist you further.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Thanks for the chastisement. Yes, you provided many replies. Unfortunately, none of them seemed to be on topic and did not address my question. Sorry to have wasted your time. I tried to go through the documentation, but found it very confusing and was hoping for a simple example of the concept I originally wrote about.
You keep drilling into me the concept that I do not change the state of an item but rather I specify different styles for different states. I KNOW THAT! I get it!! That concept is very clearly understood.
Still, I have absolutely no idea how to accomplish what I want to do.
At quirt.net/gst - The page loads - "Home" is in state "selected." I click "North American Participants" and this item expands to show sub-menu. At this point, both "Home" and "North American Participants" are in state "selected." How can I make one or the other APPEAR to not be selected?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,095
|
As I have already told you in my previous posts:
1. You can either edit "North America Participants" 's SelectedStyle directly (I understand that you mentioned it won't work for you, which I am going to explain below);
2. You can use a look item. That's why I pointed to the document about look items;
Now come back to your particular situation --- data binding, that all your items are actually populated from database. So the questions come to: "When all the items are populating from the database, how do I change their style settings?"
If you clearly know how look items work, the question would immediately become: "How do I conditionally apply a particular look item to an item?" Data binding documentation will clearly answer you that question. That's why I pointed you to the data binding documentations.
As a support personnel that firmly stands behind our product, I surely do not want to play the ball game or even pointing fingers; Our #1 priority is customer satisfaction. We do not want unhappy customers. However, on top of that, one of our most important goals is to make sure our clients know how our product works and to use our product to the maximum potential. In order to do that, we always try to give as much pointers as possible, and of course, also trying to identify confusing point of our product through communications and look for ways to improve. This means we do not code for our client (you are buying a product, not hiring a contractor, right?). We may tell you in order to do this, you need to go through step 1, step 2 and step 3, but we can not just do all step 1 and step 2 and step 3 for you with a "sample" that does exactly what you want --- we do provide samples and we do expect our customers to learn the basic concepts from our samples, and then change it and continue to finish their work on their own. We would really appreciate if you can just think in our shoes ---- we could be easily overwhelmed if we were to make a sample for every unique situations, it's simply not doable. Also, it wouldn't work for you either ---- if you get this done today without knowing why it should be done this way, tomorrow you will be under the same stress again.
Once again, I understand that you might have some confusion/frustration over the documentation/product/samples, which you can be rest assured that we are always trying to improve, but it would be highly appreciated if you can take our pointers and really do spend some time on it --- We are happy to see you are already making some good progress. Unfortunately the whole programming thing can't just be transferred between minds like electricity; We would have certainly done that if it was that easy.
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/6/2007
Posts: 133
|
Alright, alright. I have to be honest that the menu system ended up being just more of a tool than I first had in mind. I mean, I wanted something very simple so that I could focus on the programming of the database, content-management, etc. Still, it's starting to dawn on me that your system is much more than a *simple* menu system. You're right - I guess I'll just need to read the documentation more thoroughly - even though my preference is usually to figure things out within VisualStudio...
I wanted a quick answer to what I thought was a simple question. There was a bit of misunderstanding on your part - and it mushroomed into a bunch of wasted posts. I really do apologize for my angry tone. I've been working on this project way too long without a break :(
|
|