I am trying to use the Telerik MVC Menu control (as a button bar), but can't seem to be able to set the width to auto-generate. What I mean is, the menu continues to the end of the DIV. I would like the menu to only be as wide as the sum of the button widths. Actually, the Telerik demo is doing the same thing as my menu is doing:
http://demos.telerik.com/aspnet-mvc/razor/menu/sitemapbinding
(Look at how the menu continues on to the right of "Other product lines").
Here is my menu:
#{ Html.Telerik().Menu()
.Name("case-history-button-menu")
.ClientEvents(events => events.OnSelect("onCaseHistoryMenuBarSelect"))
.Items(menu =>
{
menu.Add()
.Text("Add a Response").HtmlAttributes(new { id = "cases-history-addresponse" } ); #*Sets the ID HTML attribute so we can access it *#
menu.Add()
.Text("Add a Comment").HtmlAttributes(new { id = "cases-history-button-addcomment" }); ;
menu.Add()
.Text("Back to Cases").HtmlAttributes(new { id = "cases-history-button-back" }); ;
})
.Render();
}
I do realize that I could just hard code my width ... but as I add or remove buttons (programatically) I want the menu to resize.
The Telerik MVC menu is rendered as an <UL> element. The latter has block display by default which means it occupies all the available space. You can override the display to "inline-block" and then the menu should be sized as you need it to:
#{ Html.Telerik().Menu()
.Name("case-history-button-menu")
// set the display to inline-block
.HtmlAttributes( new { style = "display: inline-block" } )
}
Have in mind though that older versions of IE won't accept inline-block display. You may need "inline" if you must support older IEs.
Related
So I am trying to display a navigational pane vertically using blazor and devexpress controls , the devexpress controls Form Layout already does the resizing and changes the navs orientation from horizontal to vertical, however i cannot get the vertical navigation to be hidden using a button click. Note I cannot use any plugins due to copyright's etc... if anyone can assist thank you in advance!
Here is an example on how to hide a component on button click. Your dev express control can go in where ShowHideComponent is.
Main Component:
#page "/test"
<button #onclick="(() => ShowComponent = true)">Show</button>
<button #onclick="(() => ShowComponent = false)">Hide</button>
#if (ShowComponent)
{
<ShowHideComponent></ShowHideComponent>
}
#code {
bool ShowComponent { get; set; } = false;
}
ShowHideComponent.razor:
<div>Show Or Hide This</div>
I have got a grid and a custom command button inside the grid.
My goal is to open a Telerik popup window and pass the column values to this popup window.
So far I created a grid with the custom command which opens a Telerik window. But I am not sure how to pass the values from the grid to the popup window.
The Grid
#(Html.Kendo().Grid<Lagerbase.Models.Artikel>()
.Name("CompanyGrid")
.Columns(columns =>
{
....
columns.Bound(o => o.Id);
columns.Command(command => command.Custom("Buchen").Click("Buchen"));
}
...
)
The popup window
(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(#<text>
<h4>Id: (this is where I want to display the Id from the grid)</h4>
</text>)
.Resizable()
.Width(600)
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
The JavaScript function
<script>
function Buchen(e) {
e.preventDefault();
$("#window").data("kendoWindow").center().open();
}
</script>
In the popup window I marked the area where I want to pass the column value, based on which button was pressed. Thanks in advance!
You can get current data item in javascript and then get the id property from it.
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#lblMyValue").text(dataItem.Id);
I have an object of a custom type I've made (Menu) which can contain child elements of the same type, which naturally can contain child elements and so on.
I wish to generate menus and submenus out of these objects, but I'm wondering how I can traverse them recursively so that I don't have to hard code all my loops. I am a stranger to recursion, is anyone able to shed some light on how to traverse the Menu object and all the underlying objects?
Example code:
public class Menu {
public int MenuID { get; set; }
public int Name { get; set; }
public Menu[] _ChildMenus { get; set; }
}
Here is one option:
private void TraverseMenu(Menu menu)
{
Output(string.Format("Now reading menu #{0}, named {1}", menu.MenuID, menu.Name));
if (menu._ChildMenus != null)
{
foreach (Menu child in menu._ChildMenus)
{
TraverseMenu(child);
}
}
}
If you need to know how "deep" each menu is nested you can add a level parameter:
private void TraverseMenu(Menu menu, int level)
{
Output(string.Format("Now reading menu #{0}, named {1} in level {2}", menu.MenuID, menu.Name, level));
if (menu._ChildMenus != null)
{
foreach (Menu child in menu._ChildMenus)
{
TraverseMenu(child, level + 1);
}
}
}
private void TraverseMenu(Menu menu)
{
TraverseMenu(menu, 0);
}
For rendering purpose you can use partial views.
-- MenuView.cshtml
#model IEnumerable<Menu>
#if (Model != null && Model.Any())
{
<ul>
#foreach(var menu in Model)
{
<li>
<a href='some/path/to/menu?id=#menu.MenuID'>#menu.Name</a>
#Html.RenderPartial("MenuView", menu._ChildMenus)
</li>
}
<ul>
}
EDIT: Since topic changed from something related to MVC from "Recursion in C#", this may seem a little bit irrelevant.
Normally each level of the menu needs a different loop associated with it, for example the first level (eg: home, products, about_us) would display horizontally accross the top, the second level would appear in drop downs beneath the relevant parent menu-item, tertiary levels will appear below the 2nd level menu-item etc..
So for the loops you'd theoretically wan't to split them by level, while maintaining a link back to the parent menu-item so they can be shown. Another more general thing is that the highest menu in the tree is often ignored as a container element for other menu items, this allows you to have more than 1 top level menu something like the following:
EDIT: Fixed the code.. feel free to turn back the edit history to find out how epically non-genius I am :p
string html;
int lastLevel = 0;
void placeMenu( Menu menu, int level)
{
// if level hasn't changed close last menu-item
if( lastLevel == level ) html += "</li>";
// if we're deeper, open a new <UL>
else if( lastLevel < level ) html += "<ul>";
// if we're less deep, close the last <UL> and it's parent menu-item
else if( lastLevel > level ) html += "</ul></li>";
// add current menu item without closing it's <LI> so the next itteration of the loop can add a submenu if needed
html += "<li><a href='http://link/to/page'>" + menu.Name + "</a>";
lastLevel = level;
}
void setupMenu( Menu menu, int level )
{
foreach( var currentMenu in menu._ChildMenus )
{
// place current menu
placeMenu( currentMenu, level + 1 );
// place submenus
setupMenu( currentMenu, level + 1 );
}
}
string setupWholeMenu( Menu menu )
{
setupMenu( menu, 0 );
// close any elements left open by the recursive loop
html = html + "</li></ul>";
return html;
}
this code is designed to make a normal html unordered-level list from your menu structure, this is the standard way to add and style menus in HTML, when you have your menu in this format check out some of these resources to style your menu. The reason to use HTML unordered lists here is that when implemented correctly this list structure will still show up if Javascript & CSS are dissabled (GSM & screen-readers for the partially sighted) and still work in everything IE6+ if Javascript is dissabled.
100 Great CSS Menu Tutorials
CSS Menu maker
Suckerfish dropdowns (where I first learnt how to make CSS menus)
To be honest though in MVC it's usually allot easier just to setup your menu in a declarative way as an unordered list in HTML directly, you can then style it in multiple ways if you place it in a partial shared page or show it everywhere by defining it in your Layout page. This approach can still work if you have a dynamic menu structure as it would seem above, only you'd build the list with Razor which is probably easier too.
Another point of note is that in this kind of recursive function you should use StringBuilder as it's way more efficient then concatenating strings. However for a menu structure (containing up to say 30 items each built with 2-3 concats) this won't cause any notable delay, just something to keep in mind for the future.
i have a menu control like below
menu1 menu2 menu3 menu4
how to set separate ccs for each menu?.
menu1--css1
menu2--css2
menu3-css3.. like this
Thanks.
if I understand it correctly,you are preparing 4 css files like
.css1
{
}
.css2
{
}
.css3
{
}
.css4
{
}
and your menu items are men1 menu2 menu3 menu4,
for implementing this menu, you must be using repeater in your code so from codebehind, you can append css' <'e.item.itemindex'>' and attach this css to your control.
I'm using the WPF Office Ribbon, and I have a content view that I would like to have add new items to the ribbon when that view becomes active. I have code that adds a new RibbonCommand as well as a new RibbonButton to the group I want, but nothing happens when I add it. However, if I add a new group with the button, it comes up fine and is bound correctly. Is there some method to get it to update that I'm missing? I've tried UpdateLayout() and it does not work either. I'd really like to try and avoid rebuilding all the groups everytime the view changes.
Works:
public void InjectItems(IView view)
{
var ribbonCommands = ProcessRibbonCommands(view.GetViewModel().Tasks, view.GetType());
var group = new RibbonGroup();
group.Command = new RibbonCommand() { LabelTitle = "Group Test" };
foreach (RibbonCommand command in ribbonCommands)
{
shell.MainRibbon.Resources.Add(command.Name, command);
group.Controls.Add(new RibbonButton { Command = command });
}
shell.MainRibbon.SelectedTab.Groups.Add(group);
}
Doesn't Work:
public void InjectItems(IView view)
{
var ribbonCommands = ProcessRibbonCommands(view.GetViewModel().Tasks, view.GetType());
var group = shell.MainRibbon.SelectedTab.Groups[0]; //I have a default group, will fix later
foreach (RibbonCommand command in ribbonCommands)
{
shell.MainRibbon.Resources.Add(command.Name, command);
group.Controls.Add(new RibbonButton { Command = command });
}
}
I'm assuming you're using the Microsoft Ribbon CTP from the OfficeUI site.
As part of the licensing agreement there are a number of style guidelines that you are expected to follow. One of them is that you don't add/remove contents of the Ribbon based on your current view.
from the doc:
Controls displayed in a group MUST NOT change as a result of selection. If a control is not active, the
control MUST be grayed out, rather than removed from the group. This provides a more predictable
experience and prevents the layout of controls on the Ribbon from changing and distracting users.
that being said, it sounds like a Context tab is exactly what you're looking for. These can be disabled and enabled but the actual contents of the tab don't change.
This is the code to create a context tab in XAML:
<!--Context Groups-->
<r:Ribbon.ContextualTabGroups>
<!--Piece Contextual Group-->
<r:RibbonContextualTabGroup x:Name="grpPieceContext" Label="Piece Tools">
<r:RibbonTab Label="Piece Information" Name="tabPieceContextInfo">
<r:RibbonGroup Name="grpPieceDetails" Command="{StaticResource PieceInformationGrpCommand}">
<r:RibbonLabel x:Name="lblPieceTag"/>
<r:RibbonTextBox Name="txtPieceDescription" Command="{StaticResource PieceNameTextboxCommand}"
TextChanged="txtPieceDescription_TextChanged" MaxLength="32"/>
<r:RibbonLabel x:Name="lblPieceLocation"/>
</r:RibbonGroup>
</r:RibbonTab>
</r:RibbonContextualTabGroup>
</r:Ribbon.ContextualTabGroups>
you can then active and de-active the tab via this code:
if (!this.grpPieceContext.IsActive)
{
this.grpPieceContext.IsActive = true;
this.grpPieceContext.Color = Colors.Orange;
}
where orange is the color that sits in behind the context group.
Hope this helps
I ended up just deleting and recreating the group and entire tab if necessary.