Skip to content

Commit 5bb295d

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e086b26 commit 5bb295d

File tree

20 files changed

+1482
-99
lines changed

20 files changed

+1482
-99
lines changed

‎docs-aspnet/html-helpers/data-management/grid/appearance/hidden-containers.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ To handle the behavior that is related to the initialization of the Grid inside
4343
4444
## See Also
4545
46+
* [Initializing the Grid HtmlHelper for {{ site.framework }} in a TabStrip component]({% slug grid-initialize-in-tabstrip%})
4647
* [Scrolling by the Grid HtmlHelper for {{ site.framework }} (Demos)](https://demos.telerik.com/{{ site.platform }}/grid/virtualization-remote-data)
4748
* [Scroll Modes of the Grid HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_grid_aspnetcore_scrolling %})
4849
* [Server-Side API](/api/grid)

‎docs-aspnet/html-helpers/data-management/pivotgridv2/export/excel-export.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Excel Export
3+
page_title: PivotGridV2 Excel Export
4+
description: "Get started with the Telerik UI PivotGridV2 HtmlHelper for {{ site.framework }} and learn how to export it to Excel."
5+
slug: htmlhelpers_pivotgridv2_aspnetcore_excelexport
6+
position: 0
7+
---
8+
9+
# Excel Export
10+
11+
The PivotGridV2 provides built-in Excel export capabilities.
12+
13+
To use the Excel export feature, reference the JSZip library before the Kendo UI JavaScript files in the `_Layout.cshtml`. For more information, refer to the Excel export [requirements]({% slug exportsupport_core %}#jszip-library).
14+
15+
## General
16+
17+
To export the PivotGridV2, call the [`saveAsExcel()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/pivotgridv2/methods/saveasexcel) client-side API method of the component.
18+
19+
```script
20+
<script>
21+
function buttonClick() {
22+
var pivotgrid = $("#pivotgrid").data("kendoPivotGridV2");
23+
pivotgrid.saveAsExcel();
24+
}
25+
</script>
26+
```
27+
28+
The PivotGridV2 also provides an Excel configuration that allows you to set additional options, such as the name of the generated file or the proxy URL.
29+
30+
```HtmlHelper
31+
@(Html.Kendo().PivotGridV2()
32+
.Name("pivotgrid")
33+
.Excel(excel => excel
34+
.FileName("Kendo UI PivotGridV2 Export.xlsx")
35+
.Filterable(true)
36+
.ProxyURL(Url.Action("Excel_Export_Save", "Home"))
37+
)
38+
//... Other configuration ...
39+
)
40+
```
41+
{% if site.core %}
42+
```TagHelper
43+
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="580">
44+
<excel proxy-url="@Url.Action("Excel_Export_Save","Home")" filterable="true" file-name="Kendo UI PivotGridV2 Export.xlsx" />
45+
//... Other configuration ...
46+
</kendo-pivotgridv2>
47+
````
48+
{% endif %}
49+
50+
## Next Steps
51+
52+
* [Configuring the export to Excel](/api/kendo.mvc.ui.fluent/pivotgridv2builder)
53+
* [Exporting the PivotGridV2 to Excel (demo)](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/excel-export)
54+
55+
## See Also
56+
57+
* [PDF Export by the PivotGridV2 HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pivotgrid/pdf-export)
58+
* [Server-Side API](/api/pivotgridv2)

‎docs-aspnet/html-helpers/data-management/pivotgridv2/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ The following image demonstrates the output from the example.
104104
* [Comparison with the PivotGrid]({% slug htmlhelpers_pivotgridv2_aspnetcore_comparison %})&mdash;Learn more about the major differences between the PivotGrid and PivotGridV2 components.
105105
* [Data binding]({% slug databinding_pivotgridv2helper_aspnetcore %})&mdash;You can bind the PivotGridV2 to [Online Analytical Processing (OLAP)](https://learn.microsoft.com/en-us/previous-versions/sql/sql-server-2005/ms175367(v=sql.90)) cube and or flat data.
106106
* [Templates]({% slug htmlhelpers_pivotgridv2_aspnetcore_templates %})&mdash;The available templates allow you to control the rendering of the data cells and headers.
107+
* [Excel export]({% slug htmlhelpers_pivotgridv2_aspnetcore_excelexport %})&mdash;Built-in support for exporting the component data to Excel.
107108
* [PDF export]({% slug htmlhelpers_pivotgridv2_aspnetcore_pdfexport %})&mdash;You can export the component data to PDF through a single click.
108109
* [Accessibility]({% slug htmlhelpers_accessibility_actionsheet_aspnetcore %})&mdash;The PivotGridV2 is accessible for screen readers, supports WAI-ARIA, Section 508, WCAG 2.2, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_pivotgridv2 %}) for faster navigation.
109110

‎docs-aspnet/html-helpers/data-management/pivotgridv2/templates.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ The available types of PivotGridV2 templates are:
1616
* [Data cell template](#data-cell-template)
1717
* [Column header template](#column-header-template)
1818
* [Row header template](#row-header-template)
19+
* [KPI Status Template](#kpi-status-template)
20+
* [KPI Trend Template](#kpi-trend-template)
1921

2022
For a live example, see the [PivotGridV2 Templates](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/templates) demo.
2123

@@ -127,6 +129,145 @@ In the row header template, you can access the following fields:
127129
</script>
128130
```
129131

132+
## KPI Status Template
133+
134+
The [template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template) which renders the content of the `KPI Status` value. By default renders "open", "hold" and "denied" status icons.
135+
136+
The fields which can be used in the template are:
137+
138+
* `columnTuple`&mdash;the tuple of the corresponding column header cell
139+
* `rowTuple`&mdash;the tuple of the corresponding row header cell
140+
* `measure`&mdash;the value of the data cell measure
141+
* `dataItem`&mdash;the data item itself
142+
143+
```HtmlHelper
144+
@(Html.Kendo().PivotGridV2()
145+
.Name("pivotgrid")
146+
.ColumnWidth(200)
147+
.Height(580)
148+
.KpiStatusTemplateId("kpiStatusTemplate")
149+
.DataSource(dataSource => dataSource
150+
.Xmla()
151+
.Columns(columns => {
152+
columns.Add("[Date].[Calendar]").Expand(true);
153+
columns.Add("[Product].[Category]");
154+
})
155+
.Rows(rows => rows.Add("[Geography].[City]"))
156+
.Measures(measures => measures.Values(v => {
157+
v.Add().Name("[Measures].[Internet Revenue Status]").Type("status");
158+
}))
159+
.Transport(transport => transport
160+
.Connection(connection => connection
161+
.Catalog("Adventure Works DW 2008R2")
162+
.Cube("Adventure Works"))
163+
.Read("https://demos.telerik.com/olap/msmdpump.dll")
164+
)
165+
)
166+
)
167+
```
168+
{% if site.core %}
169+
```TagHelper
170+
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="580" kpi-status-template-id="kpiStatusTemplate">
171+
<pivot-datasource type="PivotDataSourceType.Xmla">
172+
<columns>
173+
<pivot-datasource-column name="[Date].[Calendar]" expand="true"></pivot-datasource-column>
174+
<pivot-datasource-column name="[Product].[Category]"></pivot-datasource-column>
175+
</columns>
176+
<rows>
177+
<row name="[Geography].[City]" expand="true"></row>
178+
</rows>
179+
<measures values=@(new string[] {"[Measures].[Internet Revenue Status]"} )>
180+
</measures>
181+
<transport read-url="https://demos.telerik.com/olap/msmdpump.dll">
182+
<connection catalog="Adventure Works DW 2008R2" cube="Adventure Works"></connection>
183+
</transport>
184+
</pivot-datasource>
185+
</kendo-pivotgridv2>
186+
````
187+
{% endif %}
188+
```Template
189+
<script id="kpiStatusTemplate" type="text/x-kendo-tmpl">
190+
# if (!dataItem) { #
191+
<em>N/A</em>
192+
# } else if(parseInt(dataItem.value) > 0) { #
193+
<em>Open</em>
194+
# } else if(parseInt(dataItem.value) < 0) { #
195+
<em>Hold</em>
196+
# } else { #
197+
<strong>Denied</strong>
198+
# } #
199+
</script>
200+
```
201+
202+
## KPI Trend Template
203+
204+
The [template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template) which renders the content of the `KPI Trend` value. By default renders "increase", "decrease" and "equal" status icons.
205+
206+
The fields which can be used in the template are:
207+
208+
* `columnTuple`&mdash;the tuple of the corresponding column header cell
209+
* `rowTuple`&mdash;the tuple of the corresponding row header cell
210+
* `measure`&mdash;the value of the data cell measure
211+
* `dataItem`&mdash;the data item itself
212+
213+
```HtmlHelper
214+
@(Html.Kendo().PivotGridV2()
215+
.Name("pivotgrid")
216+
.ColumnWidth(200)
217+
.Height(580)
218+
.KpiTrendTemplateId("kpiTrendTemplate")
219+
.DataSource(dataSource => dataSource
220+
.Xmla()
221+
.Columns(columns => {
222+
columns.Add("[Date].[Calendar]").Expand(true);
223+
columns.Add("[Product].[Category]");
224+
})
225+
.Rows(rows => rows.Add("[Geography].[City]"))
226+
.Measures(measures => measures.Values(v => {
227+
v.Add().Name("[Measures].[Internet Revenue Trend]").Type("trend");
228+
}))
229+
.Transport(transport => transport
230+
.Connection(connection => connection
231+
.Catalog("Adventure Works DW 2008R2")
232+
.Cube("Adventure Works"))
233+
.Read("https://demos.telerik.com/olap/msmdpump.dll")
234+
)
235+
)
236+
)
237+
```
238+
{% if site.core %}
239+
```TagHelper
240+
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="580" kpi-trend-template-id="kpiTrendTemplate">
241+
<pivot-datasource type="PivotDataSourceType.Xmla">
242+
<columns>
243+
<pivot-datasource-column name="[Date].[Calendar]" expand="true"></pivot-datasource-column>
244+
<pivot-datasource-column name="[Product].[Category]"></pivot-datasource-column>
245+
</columns>
246+
<rows>
247+
<row name="[Geography].[City]" expand="true"></row>
248+
</rows>
249+
<measures values=@(new string[] {"[Measures].[Internet Revenue Trend]"} )>
250+
</measures>
251+
<transport read-url="https://demos.telerik.com/olap/msmdpump.dll">
252+
<connection catalog="Adventure Works DW 2008R2" cube="Adventure Works"></connection>
253+
</transport>
254+
</pivot-datasource>
255+
</kendo-pivotgridv2>
256+
````
257+
{% endif %}
258+
```Template
259+
<script id="kpiTrendTemplate" type="text/x-kendo-tmpl">
260+
# if (!dataItem) { #
261+
<em>N/A</em>
262+
# } else if(parseInt(dataItem.value) > 0) { #
263+
<em>Increase</em>
264+
# } else if(parseInt(dataItem.value) < 0) { #
265+
<em>Decrease</em>
266+
# } else { #
267+
<strong>Equal</strong>
268+
# } #
269+
</script>
270+
```
130271

131272
## See Also
132273

‎docs-aspnet/knowledge-base/expansionpanel-expand-single-panel.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: Expanding Single Panel at a Time When Using Multiple Expansion Panels
3+
description: An example on how to allow the user to expand a single panel at a time when uising multiple Telerik UI for {{ site.framework }} Expansion Panels.
4+
type: how-to
5+
page_title: Expanding Single Panel at a Time When Using Multiple Expansion Panels
6+
slug: expansionpanel-expand-single-panel
7+
tags: expansion panel, expand, single, panel
8+
res_type: kb
9+
component: ExpansionPanel
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Expansion Panel</td>
18+
</tr>
19+
<tr>
20+
<td>Progress {{ site.product }} version</td>
21+
<td>Created with the 2024.2.514 version</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
How can I allow the user to expand a single panel at a time when using multiple Expansion Panel components? Also, the user must be able to close all panels.
28+
29+
## Solution
30+
31+
1. Handle the `click` event of each Expansion Panel on the page, select the clicked panel, and call the [`toggle()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel/methods/toggle) method of the Expansion Panel to toggle the rest of the panels.
32+
33+
```HtmlHelper
34+
@(Html.Kendo().ExpansionPanel()
35+
.Name("brazil")
36+
.Title("Brazil")
37+
.SubTitle("South America")
38+
.Expanded(true)
39+
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast.")
40+
)
41+
@(Html.Kendo().ExpansionPanel()
42+
.Name("chile")
43+
.Title("Chile")
44+
.SubTitle("South America")
45+
.Content("There are various theories about the origin of the word Chile.")
46+
)
47+
@(Html.Kendo().ExpansionPanel()
48+
.Name("colombia")
49+
.Title("Colombia")
50+
.SubTitle("South America")
51+
.Content("The name 'Colombia' is derived from the last name of the Italian navigator Christopher Columbus.")
52+
)
53+
```
54+
{% if site.core %}
55+
```TagHelper
56+
@addTagHelper *, Kendo.Mvc
57+
58+
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
59+
<content>
60+
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast.
61+
</content>
62+
</kendo-expansionpanel>
63+
<kendo-expansionpanel name="chile" title="Chile" sub-title="South America">
64+
<content>
65+
There are various theories about the origin of the word Chile.
66+
</content>
67+
</kendo-expansionpanel>
68+
<kendo-expansionpanel name="colombia" title="Colombia" sub-title="South America">
69+
<content>
70+
The name 'Colombia' is derived from the last name of the Italian navigator Christopher Columbus.
71+
</content>
72+
</kendo-expansionpanel>
73+
```
74+
{% endif %}
75+
```Scripts
76+
<script>
77+
$(document).ready(function() {
78+
$(".k-expander .k-expander-header").on("click", function() { // Handle the "click" event of each Expansion Panel.
79+
let currentPanel = $(this).parent(); // Select the clicked element.
80+
let expandedPanels = $(".k-expander").not(currentPanel); // Select the rest of the Expansion Panel elements on the page.
81+
$.each(expandedPanels, function(){ // Loop through them.
82+
if($(this).hasClass("k-expanded")) { // Check if there are expanded panels.
83+
let expandedPanel = $(this).find("[data-role='expansionpanel']").data("kendoExpansionPanel"); //Get a reference to each expanded Expansion Panel.
84+
expandedPanel.toggle(); // Toggle it.
85+
}
86+
});
87+
});
88+
});
89+
</script>
90+
```
91+
92+
{% if site.core %}
93+
For a runnable example based on the code above, refer to the following REPL samples:
94+
95+
* [Sample code with the Expansion Panel HtmlHelper](https://netcorerepl.telerik.com/cIaVwfPq01IlhFo028)
96+
* [Sample code with the Expansion Panel TagHelper](https://netcorerepl.telerik.com/wykLcfvK02G9OWR839)
97+
{% else %}
98+
For a runnable example based on the code above, refer to the [REPL example on expanding a single panel when using multiple Expansion Panel components](https://netcorerepl.telerik.com/cIaVwfPq01IlhFo028).
99+
{% endif %}
100+
101+
## More {{ site.framework }} Expansion Panel Resources
102+
103+
* [{{ site.framework }} Expansion Panel Documentation]({%slug htmlhelpers_expansionpanel_aspnetcore%})
104+
105+
* [{{ site.framework }} Expansion Panel Demos](https://demos.telerik.com/{{ site.platform }}/expansionpanel)
106+
107+
{% if site.core %}
108+
* [{{ site.framework }} Expansion Panel Product Page](https://www.telerik.com/aspnet-core-ui/expansionpanel)
109+
110+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
111+
112+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
113+
114+
{% else %}
115+
* [{{ site.framework }} Expansion Panel Product Page](https://www.telerik.com/aspnet-mvc/expansionpanel)
116+
117+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
118+
119+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
120+
{% endif %}
121+
122+
## See Also
123+
124+
* [Client-Side API Reference of the Expansion Panel for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel)
125+
* [Server-Side API Reference of the Expansion Panel for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/expansionpanel)
126+
{% if site.core %}
127+
* [Server-Side TagHelper API Reference of the Expansion Panel for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/expansionpanel)
128+
{% endif %}
129+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
130+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)