ExpansionPanel Overview
The ExpansionPanel is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ExpansionPanel TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ExpansionPanel widget.
The Telerik UI ExpansionPanel HtmlHelper for ASP.NET Core is a layout component that provides the user with an easy way to expand and collapse a content area within the application.
Initializing the ExpansionPanel
The following example demonstrates how to define the ExpansionPanel.
@(Html.Kendo().ExpansionPanel()
.Name("brazil")
.Title("Brazil")
.SubTitle("South America")
.Expanded(true)
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
)
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
<content>
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
</content>
</kendo-expansionpanel>
Referencing Existing Instances
The following example demonstrates how to get an instance of the ExpansionPanel.
@(Html.Kendo().ExpansionPanel()
.Name("brazil")
.Title("Brazil")
.SubTitle("South America")
.Expanded(true)
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
)
<script type="text/javascript">
$(function () {
// The Name() of the ExpansionPanel is used to get its client-side instance.
var expansionPanel = $("#brazil").data("kendoExpansionPanel");
console.log(expansionPanel);
});
</script>
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
<content>
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
</content>
</kendo-expansionpanel>
<script type="text/javascript">
$(function () {
// The Name() of the ExpansionPanel is used to get its client-side instance.
var expansionPanel = $("#brazil").data("kendoExpansionPanel");
console.log(expansionPanel);
});
</script>
Functionality and Features
Event Handling
The below example demonstrates how the the Expand, Collapse and Complete events of the ExpansionPanel can be intercepted to output messages in the console when these events are raised. They can also be hooked for customizations or to execute custom logic, if necessary.
@(Html.Kendo().ExpansionPanel()
.Name("brazil")
.Title("Brazil")
.SubTitle("South America")
.Expanded(true)
.Events(e => {
e.Collapse("onCollapse");
e.Complete("onComplete");
e.Expand("onExpand")
})
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
)
<script>
function onExpand() {
console.log("Expand");
};
function onCollapse() {
console.log("Collapse");
};
function onComplete() {
console.log("Complete");
};
</script>
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true" on-expand="onExpand" on-collapse="onCollapse" on-complete="onComplete">
<content>
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
</content>
</kendo-expansionpanel>
<script>
function onExpand() {
console.log("Expand");
};
function onCollapse() {
console.log("Collapse");
};
function onComplete() {
console.log("Complete");
};
</script>