Skip to content

Commit 6ebdd14

Browse files
marin-bratanovmarin-bratanov
committed
docs(menu): initial docs
1 parent 6424594 commit 6ebdd14

File tree

13 files changed

+698
-1
lines changed

13 files changed

+698
-1
lines changed

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ navigation:
6060
"*components/treeview/data-binding":
6161
title: "Data Binding"
6262
position: 2
63+
"*components/menu/data-binding":
64+
title: "Data Binding"
65+
position: 2
6366

6467
## List helpers directory names and order here, like this:
6568
"*appearance":
@@ -234,6 +237,7 @@ intro_columns:
234237
title: "Navigation"
235238
items:
236239
"Button": "components/button/overview"
240+
"Menu": "components/menu/overview"
237241
"Tab Strip": "components/tabstrip/overview"
238242
"TreeView": "components/treeview/overview"
239243

‎_contentTemplates/menu/basic-example.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#data-binding-basics-link
2+
Before continuing, make sure you are familiar with the [menu data binding basics]({%slug components/menu/data-binding/overview%}).
3+
#end
4+

‎components/menu/data-binding/flat-data.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Flat Data
3+
page_title: Menu for Blazor | Data Binding to Flat Data
4+
description: Data Binding the Menu for Blazor to flat data
5+
slug: components/menu/data-binding/flat-data
6+
tags: telerik,blazor,menu,data,bind,databind,databinding,flat
7+
published: True
8+
position: 1
9+
---
10+
11+
# Menu Data Binding to Flat Data
12+
13+
This article explains how to bind the Menu for Blazor to flat data.
14+
@[template](/_contentTemplates/menu/basic-example.md#data-binding-basics-link)
15+
16+
17+
Flat data means that the entire collection of menu items is available at one level, for example `List<MyMenuModel>`.
18+
19+
The parent-child relationships are created through internal data in the model - the `ParentId` field which points to the `Id` of the item that will contain the current item. The root level has `null` for `ParentId`.
20+
21+
You must also provide the correct value for the `HasChildren` field - for items that have children, you must set it to `true` so that the expand arrow is rendered.
22+
23+
>caption Example of flat data in a menu (for brevity, URLs are omitted)
24+
25+
````CSHTML
26+
@using Telerik.Blazor.Components.Menu
27+
28+
<TelerikMenu Data="@MenuItems"
29+
ParentIdField="@nameof(MenuItem.SectionId)"
30+
IdField="@nameof(MenuItem.Id)"
31+
TextField="@nameof(MenuItem.Section)">
32+
</TelerikMenu>
33+
34+
@code {
35+
public List<MenuItem> MenuItems { get; set; }
36+
37+
public class MenuItem
38+
{
39+
public int Id { get; set; }
40+
public int? SectionId { get; set; }
41+
public string Section { get; set; }
42+
}
43+
44+
protected override void OnInitialized()
45+
{
46+
MenuItems = new List<MenuItem>()
47+
{
48+
new MenuItem()
49+
{
50+
Id = 1,
51+
Section = "Overview"
52+
},
53+
new MenuItem()
54+
{
55+
Id = 2,
56+
Section = "Demos"
57+
},
58+
new MenuItem()
59+
{
60+
Id = 3,
61+
Section = "Roadmap"
62+
},
63+
new MenuItem()
64+
{
65+
Id = 4,
66+
SectionId = 3,
67+
Section = "What's new"
68+
},
69+
new MenuItem()
70+
{
71+
Id = 5,
72+
SectionId = 3,
73+
Section = "Roadmap"
74+
},
75+
new MenuItem()
76+
{
77+
Id = 6,
78+
SectionId = 3,
79+
Section = "Release History"
80+
}
81+
};
82+
83+
base.OnInitialized();
84+
}
85+
}
86+
````
87+
88+
>caption The result from the code snippet above, after hovering the "Roadmap" item
89+
90+
![](images/menu-flat-data-overview.png)
91+
92+
93+
## See Also
94+
95+
* [Menu Data Binding Basics]({%slug components/menu/data-binding/overview%})
96+
* [Live Demo: Menu Flat Data](https://demos.telerik.com/blazor-ui/menu/flat-data)
97+
* [Binding to Hierarchical Data]({%slug components/menu/data-binding/hierarchical-data%})
98+

‎components/menu/data-binding/hierarchical-data.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: Hierarchical Data
3+
page_title: Menu for Blazor | Data Binding to Hierarchical Data
4+
description: Data Binding the Menu for Blazor to hierarchical data
5+
slug: components/menu/data-binding/hierarchical-data
6+
tags: telerik,blazor,menu,data,bind,databind,databinding,hierarchical
7+
published: True
8+
position: 2
9+
---
10+
11+
# Menu Data Binding to Hierarchical Data
12+
13+
This article explains how to bind the Menu for Blazor to hierarchical data.
14+
@[template](/_contentTemplates/menu/basic-example.md#data-binding-basics-link)
15+
16+
17+
Hierarchical data means that the collection of child items is provided in a field of its parent's model. By default, this is the `Items` field. If there are items for a certain node, it will have an expand icon. The `HasChildren` field can override this, however, but it is not required for hierarchical data binding.
18+
19+
This approach of providing nodes lets you gather separate collections of data for certain sections or areas. Note that all menu item models must be of the same type.
20+
21+
>caption Example of using hierarchical data in a menu (for brevity, URLs are omitted)
22+
23+
````CSHTML
24+
@using Telerik.Blazor.Components.Menu
25+
26+
<TelerikMenu Data="@MenuItems"
27+
ItemsField="@nameof(MenuItem.SubSectionList)"
28+
TextField="@nameof(MenuItem.Section)">
29+
</TelerikMenu>
30+
31+
@code {
32+
public List<MenuItem> MenuItems { get; set; }
33+
34+
public class MenuItem
35+
{
36+
public string Section { get; set; }
37+
public List<MenuItem> SubSectionList { get; set; }
38+
}
39+
40+
protected override void OnInitialized()
41+
{
42+
MenuItems = new List<MenuItem>()
43+
{
44+
new MenuItem()
45+
{
46+
Section = "Company",
47+
SubSectionList = new List<MenuItem>()
48+
{
49+
new MenuItem()
50+
{
51+
Section = "Overview"
52+
},
53+
new MenuItem()
54+
{
55+
Section = "Events"
56+
},
57+
new MenuItem()
58+
{
59+
Section = "Careers"
60+
}
61+
}
62+
},
63+
new MenuItem()
64+
{
65+
Section = "Services",
66+
SubSectionList = new List<MenuItem>()
67+
{
68+
new MenuItem()
69+
{
70+
Section = "Consulting"
71+
},
72+
new MenuItem()
73+
{
74+
Section = "Education"
75+
}
76+
}
77+
},
78+
new MenuItem()
79+
{
80+
Section = "Contact"
81+
}
82+
};
83+
84+
base.OnInitialized();
85+
}
86+
}
87+
````
88+
89+
>caption The result from the code snippet above, after hovering the "Company" item
90+
91+
![](images/menu-hierarchical-data-overview.png)
92+
93+
94+
## See Also
95+
96+
* [Menu Data Binding Basics]({%slug components/menu/data-binding/overview%})
97+
* [Live Demo: Menu Hierarchical Data](https://demos.telerik.com/blazor-ui/menu/hierarchical-data)
98+
* [Binding to Flat Data]({%slug components/menu/data-binding/flat-data%})
99+

‎components/menu/data-binding/images/menu-flat-data-overview.png‎

4.78 KB
Loading

‎components/menu/data-binding/images/menu-hierarchical-data-overview.png‎

4.35 KB
Loading

‎components/menu/data-binding/overview.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Overview
3+
page_title: Menu for Blazor | Data Binding Overview
4+
description: Data Binding basics in the Menu for Blazor
5+
slug: components/menu/data-binding/overview
6+
tags: telerik,blazor,menu,data,bind,databind,databinding,basics
7+
published: True
8+
position: 0
9+
---
10+
11+
# Menu Data Binding Basics
12+
13+
This article explains the different ways to provide data to a Menu component, the properties related to data binding and their results.
14+
15+
First, review:
16+
17+
* The available (bindable) [features of a menu item](#menu-item-features).
18+
* How to match fields in the model with the menu item [data bindings](#data-bindings).
19+
20+
There are two modes of providing data to a menu, and they all use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:
21+
22+
* [Flat data]({%slug components/menu/data-binding/flat-data%}) - a single collection of items with defined parent-child relationships.
23+
* [Hierarchical data]({%slug components/menu/data-binding/hierarchical-data%}) - separate collections of items and their child items.
24+
25+
## Menu Item Features
26+
27+
The menu items provide the following features that you control through the corresponding fields in their data binding:
28+
29+
* `Id` - a unique identifier for the item. Required for binding to flat data.
30+
* `ParentId` - identifies the parent to whom the item belongs. Required only when binding to flat data. All items with the same `ParentId` will be rendered at the same level. For a root level item, this must be `null`.
31+
* `HasChildren` - whether the item has children. Determines whether an expand arrow is rendered next to the item. Required for binding to flat data. With hierarchical data, the menu will render the icon based on the existence of child items, but `HasChildren` will take precedence.
32+
* `Items` - the collection of child items that will be rendered under the current item. Required only when binding to hierarchical data.
33+
* `Text` - the text that will be shown on the item.
34+
* `Icon` / `IconClass` / `ImageUrl` - the [Telerik icon]({%slug general-information/font-icons%}), a class for a custom font icon, or the URL to a raster image that will be rendered in the item. They have the listed order of precedence in case more than one is present in the data (that is, an `Icon` will have the highest importance).
35+
* `Url` - the view the item will navigate to by generating a link.
36+
37+
## Data Bindings
38+
39+
The properties of a menu item match directly to a field of the model the menu is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, use the properties in the main `TelerikMenu` tag:
40+
41+
* IdField => Id
42+
* ParentIdField => ParentId
43+
* TextField => Text
44+
* IconClassField => IconClass
45+
* IconField => Icon
46+
* ImageUrlField => ImageUrl
47+
* UrlField => Url
48+
* HasChildrenField => HasChildren
49+
* ItemsField => Items
50+
51+
>tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings.
52+
53+
>caption Default field names for menu item bindings. If you use these, you don't have to specify them in the `TelerikMenu` tag explicitly.
54+
55+
````CSHTML
56+
public class MenuItem
57+
{
58+
public int Id { get; set; }
59+
public string Text { get; set; }
60+
public int? ParentId { get; set; }
61+
public bool HasChildren { get; set; }
62+
public string Icon { get; set; }
63+
public bool Expanded { get; set; }
64+
public string Url { get; set; }
65+
}
66+
````
67+
68+
## See Also
69+
70+
* [Binding to Flat Data]({%slug components/menu/data-binding/flat-data%})
71+
* [Binding to Hierarchical Data]({%slug components/menu/data-binding/hierarchical-data%})
72+
* [Live Demo: Menu Flat Data](https://demos.telerik.com/blazor-ui/menu/flat-data)
73+
* [Live Demo: Menu Hierarchical Data](https://demos.telerik.com/blazor-ui/menu/hierarchical-data)
74+

‎components/menu/events.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Events
3+
page_title: Menu for Blazor | Events
4+
description: Events in the Menu for Blazor
5+
slug: components/menu/events
6+
tags: telerik,blazor,menu,events
7+
published: true
8+
position: 20
9+
---
10+
11+
# Events
12+
13+
This article explains the events available in the Telerik Menu for Blazor:
14+
15+
* [OnSelect](#onselect)
16+
17+
## OnSelect
18+
19+
The `OnSelect` event fires when the user clicks or taps on a menu item. It receives the model of the item as an argument that you can cast to the concrete type you are using.
20+
21+
You can use the `OnSelect` event to react to user choices in a menu without using navigation to load new content automatically.
22+
23+
>caption Handle OnSelect
24+
25+
````CSHTML
26+
@using Telerik.Blazor.Components.Menu
27+
28+
<TelerikMenu Data="@MenuItems" OnSelect="@OnSelect">
29+
</TelerikMenu>
30+
31+
Last item selected: @SelectedItem?.Text
32+
33+
@code {
34+
public MenuItem SelectedItem { get; set; }
35+
36+
protected void OnSelect(object item)
37+
{
38+
SelectedItem = item as MenuItem;
39+
}
40+
41+
public List<MenuItem> MenuItems { get; set; }
42+
43+
public class MenuItem
44+
{
45+
public string Text { get; set; }
46+
public string Icon { get; set; }
47+
public List<MenuItem> Items { get; set; }
48+
}
49+
50+
protected override void OnInitialized()
51+
{
52+
MenuItems = new List<MenuItem>()
53+
{
54+
new MenuItem()
55+
{
56+
Text = "Share",
57+
Icon = "k-i-share",
58+
Items = new List<MenuItem>()
59+
{
60+
new MenuItem()
61+
{
62+
Text = "FaceBook",
63+
Icon = "k-i-facebook"
64+
},
65+
new MenuItem()
66+
{
67+
Text = "LinkedIn",
68+
Icon = "k-i-linkedin"
69+
},
70+
new MenuItem()
71+
{
72+
Text = "Twitter",
73+
Icon = "k-i-twitter"
74+
},
75+
}
76+
},
77+
new MenuItem()
78+
{
79+
Text = "Map Location",
80+
Icon = "k-i-marker-pin"
81+
}
82+
};
83+
84+
base.OnInitialized();
85+
}
86+
}
87+
````
88+
89+
90+
## See Also
91+
92+
* [Templates]({%slug components/menu/templates%})

‎components/menu/images/menu-overview.png‎

3.47 KB
Loading

‎components/menu/images/menu-template-distinguish-item.png‎

3.15 KB
Loading

0 commit comments

Comments
 (0)