We are developing a website with a drop down menu. The problem is the menu needs to be dynamic since the Parent and Child will be place under a single menu. This means that a single menu may contain multiple parents with multiple children. These parents/children are coming from a database.
http://imageshack.us/photo/my-images/405/h9o.png/
When hover the set of parent menu and children will be shown
http://imageshack.us/photo/my-images/836/fiz5.png/
The number of rows depends on the number of Parent and Children, The children will always under the parents, Children will not be broken into two different column. Which means the rows and columns are created dynamically based on the data that coming from the database. Any idea how to make this?
There are lots of menu solutions on the net.
I've used JQuery UI menu http://jqueryui.com/menu/ .
Just output your menu items as <li>'s and run the Jquery UI function .menu(); as they do in the example in the link page. The items in the menu can either be links to other pages or postbacks to the same page. If you postback you could in the item assign some value to a hidden field that you check in the code behind.
Related
I have a WKInterfaceMenu added to the storyboard which is working great. However, once used, I don't want the menu to appear for a second time.
Is there a way of preventing the menu from appearing?
You can definitely do this, but you need to do things a bit differently.
First off, don't set up the context menu in the storyboard. Instead, set up all the menu items programmatically. You can add and remove menu items using the addMenuItemWithImageNamed and clearAllMenuItems methods on your WKInterfaceController instance.
You want to set up all your menu items initially, then remove them in all your callback methods for each menu item. That way, they'll be there at first, and will be removed once you select one of them.
I'm building Bootstrap 3 menu webpart and I need to count the number of child elements. The code below does that, but unfortunately counts all elements (hidden, containers, etc...). I need to count only "Page" elements, or at least elements that I have unchecked from being listed in the main menu.
<%# IfCompare(Eval("NodeChildNodesCount"),0,"class='dropdown-toggle' data-toggle='dropdown' ","") %>
Is there any way I could improve the code above to filter out all that is not a "Page" menu item?
I would suggest that you use a nested repeater which would only load the Page menu item below the selected section in the menu.
You could then provide the list item in the item template to match your CSS.
I have a requirement like for the drop down as shown. Could any one help me in achieving this.
Briefing:
On click of the button a pane should be opened which contains rows and columns containing text, on click of it appropriate action need to take place. The source can be dynamic too....
There are many techniques for acheiving this design. You could do it purely with html and css by having an image that looks like a dropdown popup an absolutely positioned div underneath. Or you could use the asp.net ajax control toolkit control called "PopupControl" that essentially abstracts all the html/css away allowing you to just specify a target panel. There are also various jquery plugins, here is one from abeatifulsite.
I have a page using a Treeview server control like so:
<asp:TreeView ID="uxTreeView" ShowExpandCollapse="True" ShowCheckBoxes="All" runat="server"></asp:TreeView>
What I expect to have happen is my treeview should render a series of checkboxes, with the first level having a plus sign (+) to expand it, and then a minus sign (-) when it's expanded to collapse it.
For some reason, I'm not seeing the expand/collapse links. I can see there's a parent and a child node, and they're properly nested, but the expand/collapse links aren't showing.
Has anyone seen this before? In the past this hasn't been an issue - dragging and dropping the control onto a page has worked fine. I've inspected the elements with Firebug, and I didn't see any CSS that would hide the expand/collapse links.
UPDATE
I've found there's an ImageSet property on the treeview - now my treeview is actually adding the arrows for the various nodes indicating whether they're expanded or collapsed. Is it possible to style the individual cells in the outputted table? (It looks like this would be a lot of work)
Did you by chance specify custom images, perhaps incorrectly, for the expand and collapse elements?
I'm working on an ASP.NET page where I've got 10 entities. I'll call them Items. An Item can be displayed in one of two modes: Featured or Thumbnail. At any given time there is one Featured Item at the top of the page, and the rest are Thumbnails arranged in a 3x3 grid underneath the featured Item Each item is an ASP usercontrol that contains two divs: one div for Featured and one for Thumbnail -- when the item is Featured, the Thumbnail div is set as invisible and vice versa.
My current goal is to be able to click on any of the Thumbnails and have it physically swap places with the currently featured item to make the clicked Thumbnail become the new current Featured item at the top of the page. The eventual goal is to use jQuery to animate the movement but this is only a side consideration at this point. Also please note that I am trying to do all this without the use of page refreshes (i.e. I wish to use AJAX or javascript)
Here are some of the possibilities that I have been thinking about:
Put the entire page inside an UpdatePanel and rearrange which Item usercontrol goes to which placeholder (i'm using placeholders)
Pros: easy
Cons: VERY INEFFICIENT. Each Item already has a couple UpdatePanels in them despite my trying to minimize my use of them
Use jQuery/javascript to swap the order of the items' occurrences within the page
Pros: simply swapping the order would work because I have the items arranged by floating
Cons: my javascript/jquery is weak, and if a user ever navigates away and comes back the change will not persist.
Dear web dev wizards out there, what would you do if you were in my shoes?
This feels a bit like a slide show. As such, I'd go strictly client side javascript. I wouldn't worry too much about state persistence though you could do that if you want by setting a cookie or appending the url with anchor hashes.
Also, at that point, you wouldn't really need multiple DIVs for each item. You could, via the jQuery move the div itself and then change the SRC attribute (and CSS) of the image to go fetch the larger one.