Skip to content

Commit 12f4fb6

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 5185616 commit 12f4fb6

File tree

21 files changed

+962
-159
lines changed

21 files changed

+962
-159
lines changed

‎docs-aspnet/html-helpers/layout/expansionpanel/events.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI ExpansionPanel component for {{ site.framework }}."
5+
slug: events_expansionpanel
6+
position: 3
7+
---
8+
9+
# Events
10+
11+
The Telerik UI ExpansionPanel for {{ site.framework }} [exposes some events](/api/kendo.mvc.ui.fluent/expansionpaneleventbuilder) that allow you to control the behavior of the UI component.
12+
13+
For a complete example on the available component events, refer to the [demo on using the events of the ExpansionPanel](https://demos.telerik.com/{{ site.platform }}/expansionpanel/events).
14+
15+
## Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().ExpansionPanel()
21+
.Name("expanionpanel")
22+
.Events(e => e.Expand("onExpand"))
23+
... //Additional configuration
24+
)
25+
26+
<script>
27+
function onExpand(e){
28+
// Handle the ExpansionPanel Expand event that triggers when it is expanded.
29+
}
30+
</script>
31+
```
32+
33+
{% if site.core %}
34+
```TagHelper
35+
<kendo-expansionpanel name="expanionpanel" on-expand="onExpand">
36+
<!-- additional configuration -->
37+
</kendo-expansionpanel>
38+
39+
<script>
40+
function onExpand(e){
41+
// Handle the ExpansionPanel Expand event that triggers when it is expanded.
42+
}
43+
</script>
44+
```
45+
{% endif %}
46+
47+
## Handling by Template Delegate
48+
49+
The following example demonstrates how to subscribe to events by a template delegate.
50+
51+
```HtmlHelper
52+
@(Html.Kendo().ExpansionPanel()
53+
.Name("expanionpanel")
54+
.Events(e => e.Expand(@<text>
55+
function() {
56+
// Handle the Expand event inline.
57+
}
58+
</text>)
59+
)
60+
... //Additional configuration
61+
)
62+
```
63+
64+
{% if site.core %}
65+
```TagHelper
66+
<kendo-expansionpanel name="expanionpanel"
67+
on-expand="function() {
68+
// Handle the Expand event inline.
69+
}">
70+
</kendo-expansionpanel>
71+
```
72+
{% endif %}
73+
74+
## Next Steps
75+
76+
* [Using the ExpansionPanel Events (Demo)](https://demos.telerik.com/{{ site.platform }}/expansionpanel/events)
77+
78+
## See Also
79+
80+
* [ExpansionPanel Server-Side API for {{ site.framework}}](/api/expansionpanel)
81+
* [ExpansionPanel Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel)

‎docs-aspnet/html-helpers/layout/expansionpanel/getting-started.md‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} ExpansionPanel component by following a complete step-by-step tutorial."
5+
slug: expansionpanel_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the ExpansionPanel
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} ExpansionPanel and highlights the major steps in the configuration of the component.
12+
13+
You will initialize an ExpansionPanel component in expanded mode and integrate a [Card](https://demos.telerik.com/aspnet-core/cards) component into its content. Next, you will handle the ExpansionPanel events to change dynamically the header background color. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} ExpansionPanel](./images/expansionpanel-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
Optionally, you can structure the View content by adding the desired HTML elements like headings, divs, paragraphs, and others.
24+
25+
```HtmlHelper
26+
@using Kendo.Mvc.UI
27+
28+
<h4>Review content by expanding the panel</h4>
29+
<div>
30+
31+
</div>
32+
```
33+
{% if site.core %}
34+
```TagHelper
35+
@addTagHelper *, Kendo.Mvc
36+
37+
<h4>Review content by expanding the panel</h4>
38+
<div>
39+
40+
</div>
41+
```
42+
{% endif %}
43+
44+
## 2. Initialize the ExpansionPanel
45+
46+
Use the ExpansionPanel HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
47+
48+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the ExpansionPanel element.
49+
* The `Title()` option specifies the title that will be displayed in the panel header.
50+
* The `SubTitle()` option sets a subtitle next to the expand/collapse icon in the header.
51+
* The `Content()` method defines the component content. It can be added as a `string` or as an `HTML.`
52+
53+
```HtmlHelper
54+
@using Kendo.Mvc.UI
55+
56+
<h4>Review content by expanding the panel</h4>
57+
<div>
58+
@(Html.Kendo().ExpansionPanel()
59+
.Name("expPanel")
60+
.Title("Summer vacation")
61+
.SubTitle("Greece")
62+
.Content("Include the desired content here")
63+
)
64+
</div>
65+
```
66+
{% if site.core %}
67+
```TagHelper
68+
@addTagHelper *, Kendo.Mvc
69+
70+
<h4>Review content by expanding the panel</h4>
71+
<div>
72+
<kendo-expansionpanel name="expPanel" title="Summer vacation" sub-title="Greece">
73+
<content>
74+
Include the desired content here
75+
</content>
76+
</kendo-expansionpanel>
77+
</div>
78+
```
79+
{% endif %}
80+
81+
## 3. Configure the Card into the ExpansionPanel
82+
83+
The next step is to add a [Card](https://demos.telerik.com/aspnet-core/cards) as content of the ExpansionPanel. Attach the [`onclick`](https://www.w3schools.com/jsref/event_onclick.asp) event to the Card action and change the icon class to mark the Card as liked.
84+
85+
```HtmlHelper
86+
@using Kendo.Mvc.UI
87+
88+
<h4>Review content by expanding the panel</h4>
89+
<div>
90+
@(Html.Kendo().ExpansionPanel()
91+
.Name("expPanel")
92+
.Title("Summer vacation")
93+
.SubTitle("Greece")
94+
.Expanded(true)
95+
.Content(@"
96+
<div class='k-card k-card-vertical'>
97+
<div class='k-card-header k-hbox k-align-items-center'>
98+
<div>
99+
<h4 class='k-card-title'>Seaview Apartments</h4>
100+
<h5 class='k-card-subtitle'>Greece, Santorini</h5>
101+
</div>
102+
</div>
103+
<img class='k-card-image' alt='seaview' src=' " + @Url.Content("~/shared/web/cards/seaview-appartments.png") + @" ' />
104+
<div class='k-card-body'><p>A luxurious two-bedroom apartment with the best views over Santorini</p></div>
105+
<span class='k-card-separator'></span>
106+
<div class='k-card-actions'>
107+
<span class='k-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' onclick='favoritesClick(event)'><span class='k-icon k-i-heart-outline'></span></span>
108+
</div>
109+
</div>")
110+
)
111+
</div>
112+
```
113+
{% if site.core %}
114+
```TagHelper
115+
@addTagHelper *, Kendo.Mvc
116+
117+
<h4>Review content by expanding the panel</h4>
118+
<div>
119+
<kendo-expansionpanel name="expPanel" title="Summer vacation" sub-title="Greece" expanded="true">
120+
<content>
121+
<div class='k-card k-card-vertical'>
122+
<div class='k-card-header k-hbox k-align-items-center'>
123+
<div>
124+
<h4 class='k-card-title'>Seaview Apartments</h4>
125+
<h5 class='k-card-subtitle'>Greece, Santorini</h5>
126+
</div>
127+
</div>
128+
<img class='k-card-image' alt='seaview' src='~/shared/web/cards/seaview-appartments.png' />
129+
<div class='k-card-body'><p>A luxurious two-bedroom apartment with the best views over Santorini</p></div>
130+
<span class='k-card-separator'></span>
131+
<div class='k-card-actions'>
132+
<span class='k-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' onclick='favoritesClick(event)'><span class='k-icon k-i-heart-outline'></span></span>
133+
</div>
134+
</div>
135+
</content>
136+
</kendo-expansionpanel>
137+
</div>
138+
```
139+
{% endif %}
140+
```Scripts
141+
<script>
142+
function favoritesClick(event){
143+
if($(event.target).hasClass("k-i-heart-outline")) {
144+
$(event.target).removeClass("k-i-heart-outline");
145+
$(event.target).addClass("k-i-heart");
146+
} else {
147+
$(event.target).addClass("k-i-heart-outline");
148+
$(event.target).removeClass("k-i-heart");
149+
}
150+
}
151+
</script>
152+
```
153+
154+
## 4. Handle the ExpansionPanel Events
155+
156+
The ExpansionPanel exposes [events](/api/kendo.mvc.ui.fluent/expansionpaneleventbuilder) that you can handle and further customize the functionality of the component. In this tutorial, you will use the `Expand` and `Collapse` events to alter the component's header background color when in an expanded state.
157+
158+
```HtmlHelper
159+
@(Html.Kendo().ExpansionPanel()
160+
.Name("brazil")
161+
.Title("Brazil")
162+
.SubTitle("South America")
163+
.Events(ev => ev.Expand("onExpand").Collapse("onCollapse"))
164+
.Content("")
165+
)
166+
167+
<script>
168+
function onExpand() {
169+
$(".k-expander-header").css("background-color","#c1e2eb");
170+
}
171+
172+
function onCollapse() {
173+
$(".k-expander-header").css("background-color","inherit");
174+
}
175+
</script>
176+
```
177+
178+
{% if site.core %}
179+
```TagHelper
180+
<kendo-expansionpanel name="expPanel" on-expand="onExpand" on-collapse="onCollapse">
181+
<content>
182+
183+
</content>
184+
</kendo-expansionpanel>
185+
186+
<script>
187+
function onExpand() {
188+
$(".k-expander-header").css("background-color","#c1e2eb");
189+
}
190+
191+
function onCollapse() {
192+
$(".k-expander-header").css("background-color","inherit");
193+
}
194+
</script>
195+
```
196+
{% endif %}
197+
198+
## 5. (Optional) Reference Existing ExpansionPanel Instances
199+
200+
You can reference the ExpansionPanel instances that you have created and build on top of their existing configuration:
201+
202+
1. Use the `id` attribute of the component instance to establish a reference.
203+
204+
```script
205+
<script>
206+
$(document).ready(function() {
207+
var expansionPanelReference = $("#expPanel").data("kendoExpansionPanel"); // expansionPanelReference is a reference to the existing ExpansionPanel instance of the helper.
208+
});
209+
</script>
210+
```
211+
212+
1. Use the [ExpansionPanel client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel#methods) to control the behavior of the component. In this example, you will use the `toggle` method to toggle the state of the control dynamically (for example, when a button is clicked).
213+
214+
```HtmlHelper
215+
@(Html.Kendo().Button()
216+
.Name("btn")
217+
.Content("Toggle ExpansionPanel")
218+
.Events(ev => ev.Click("onBtnClick"))
219+
)
220+
```
221+
{% if site.core %}
222+
```TagHelper
223+
@addTagHelper *, Kendo.Mvc
224+
<kendo-button name="btn" on-click="onBtnClick">
225+
Toggle ExpansionPanel
226+
</kendo-button>
227+
```
228+
{% endif %}
229+
```Scripts
230+
<script>
231+
function onBtnClick() {
232+
var expansionPanelReference = $("#expPanel").data("kendoExpansionPanel");
233+
expansionPanelReference.toggle();
234+
}
235+
</script>
236+
```
237+
238+
For more information on referencing specific helper instances, see the [Methods and Events]({% slug methodevents_core %}) article.
239+
240+
{% if site.core %}
241+
## Explore this Tutorial in REPL
242+
243+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
244+
245+
* [Sample code with the ExpansionPanel HtmlHelper](https://netcorerepl.telerik.com/wRkCvTEX30XH3lqL42)
246+
* [Sample code with the ExpansionPanel TagHelper](https://netcorerepl.telerik.com/GRkWbzEN31l5AX5730)
247+
248+
{% endif %}
249+
250+
## Next Steps
251+
252+
* [Setting the ExpansionPanel Default State]({% slug state_htmlhelpers_expansionpanel_aspnetcore %})
253+
* [Using the Keyboard Navigation of the ExpansionPanel for {{ site.framework }} (Demo)](https://demos.telerik.com/aspnet-core/expansionpanel/keyboard-navigation)
254+
* [Using the Right-To-Left-Feature of the ExpansionPanel for {{ site.framework }} (Demo)](https://demos.telerik.com/aspnet-core/expansionpanel/right-to-left-support)
255+
256+
## See Also
257+
258+
* [Using the API of the ExpansionPanel for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/expansionpanel/api)
259+
* [Client-Side API of the ExpansionPanel](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel)
260+
* [Server-Side API of the ExpansionPanel](/api/expansionpanel)
261+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/layout/expansionpanel/images/expansionpanel-getting-started.png‎

281 KB
Loading

‎docs-aspnet/html-helpers/layout/expansionpanel/keyboard-navigation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Keyboard Navigation
33
page_title: ExpansionPanel Documentation - Keyboard Navigation
44
description: "Get started with Telerik UI ExpansionPanel component for {{ site.framework }} and learn about the accessibility support it provides through its keyboard navigation functionality."
55
slug: keynav_htmlhelpers_expansionpanel_aspnetcore
6-
position: 3
6+
position: 4
77
---
88

99
# Keyboard Navigation

0 commit comments

Comments
 (0)