Skip to content

Commit 283c95f

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 6acbbaa commit 283c95f

File tree

11 files changed

+287
-7
lines changed

11 files changed

+287
-7
lines changed

‎docs-aspnet/html-helpers/charts/chart-types/images/pyramid-chart.png‎

26.5 KB
Loading

‎docs-aspnet/html-helpers/charts/chart-types/pyramid-charts.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Pyramid Charts
3+
page_title: Pyramid Charts
4+
description: "Learn how to define and configure Telerik UI Pyramid Chart."
5+
slug: pyramidchart_aspnetcore_htmlhelper
6+
---
7+
8+
# Pyramid Charts
9+
10+
{% if site.core %}
11+
The Telerik UI Pyramid TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI Pyramid Chart widget.
12+
{% else %}
13+
The Telerik UI Pyramid HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Pyramid Chart widget.
14+
{% endif %}
15+
16+
Pyramid Charts display a single series of data in progressively increasing proportions, organized in segments, where each segment represents the value for the particular item from the series. The values of the items can also influence the height and the shape of the corresponding segments.
17+
18+
Pyramid Charts are suitable to represent stages in a priority process, population vizualization, singular datasets, etc.
19+
20+
* [Demo page for the Pyramid Chart HtmlHelper](https://demos.telerik.com/{{ site.platform }}/pyramid-charts/index)
21+
{% if site.core %}
22+
* [Demo page for the Pyramid Chart TagHelper](https://demos.telerik.com/{{ site.platform }}/pyramid-charts/tag-helper)
23+
{% endif %}
24+
25+
## Concepts
26+
27+
The basic conceptual option of a Telerik UI Pyramid Chart is:
28+
29+
* `dynamicHeight`&mdah;When `equal` is set to `false`, `dynamicHeight` specifies whether the different elements will have equal height, or specifies whether the height of each element has to be based on its value.
30+
31+
32+
## Getting Started
33+
34+
The following example demonstrates how to configure a basic Pyramid chart.
35+
36+
```HtmlHelper
37+
@(Html.Kendo().Chart()
38+
.Name("chart")
39+
.Title(title => title
40+
.Text("Sales"))
41+
.Legend(legend => legend
42+
.Visible(false)
43+
)
44+
.Series(series => {
45+
series.Pyramid(new dynamic[] {
46+
new {category = "Unique Visitors", value = 280022},
47+
new {category = "Downloads", value = 190374},
48+
new {category = "Purchases", value = 120392},
49+
})
50+
.DynamicHeight(false)
51+
.Labels(labels => labels
52+
.Background("none")
53+
);
54+
})
55+
.Tooltip(tooltip => tooltip
56+
.Visible(true)
57+
.Template("#=category# (#=kendo.format('{0:p}', percentage)#)")
58+
)
59+
)
60+
```
61+
{% if site.core %}
62+
```TagHelper
63+
<kendo-chart name="chart">
64+
<chart-title text="Sales"></chart-title>
65+
<chart-legend visible="false"></chart-legend>
66+
<series>
67+
<series-item dynamic-height="false" type="ChartSeriesType.Pyramid"
68+
data='new dynamic[]{
69+
new {
70+
category= "Unique Visitors",
71+
value= 280022
72+
},
73+
new {
74+
category= "Downloads",
75+
value= 190374
76+
},
77+
new {
78+
category= "Purchases",
79+
value= 120392
80+
}
81+
}'>
82+
<labels background="none"></labels>
83+
</series-item>
84+
</series>
85+
<tooltip visible="true" template="#=category# (#=kendo.format('{0:p}', percentage)#)"></tooltip>
86+
</kendo-chart>
87+
```
88+
{% endif %}
89+
90+
![{{ site.product_short }} Pyramid Chart](images/pyramid-chart.png)
91+
92+
## See Also
93+
94+
* [Basic Usage of the Pyramid Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pyramid-charts/index)
95+
* [Basic Usage of the Pyramid Chart TagHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pyramid-charts/tag-helper)
96+
* [Server-Side API](/api/chart)

‎docs-aspnet/knowledge-base/grid-distinct-values-aggregate.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
title: Displaying the count of distinct values in Grid column footer template
3+
description: An example on how to create a custom aggreagte that counts the distinct values in a column when using the Telerik UI for {{ site.framework }} Grid.
4+
type: how-to
5+
page_title: Displaying the count of distinct values in Grid column footer template
6+
slug: grid-distinct-values-aggregate
7+
tags: grid, count, distinct, values, aggregate, footer, template, telerik, core, mvc
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>{{ site.product }} Grid</td>
17+
</tr>
18+
<tr>
19+
<td>Progress {{ site.product }} version</td>
20+
<td>Created with the 2023.2.829 version</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
How can I calculate the count of the distinct values in a specified column and display the result within its footer template?
27+
28+
## Solution
29+
30+
The Grid's DataSource supports [`Count()` aggregate]({% slug htmlhelper_datasourceaggregates %}) field that calculates the total number of values. However, if you need to get the number of the distinct values, follow the steps below:
31+
32+
1. Execute a function within the `ClientFooterTemplate()` that will return the distinct values. Ensure that the server operations of the DataSource are disabled.
33+
34+
```HtmlHelper
35+
@(Html.Kendo().Grid<OrderViewModel>()
36+
.Name("grid")
37+
.Columns(columns =>
38+
{
39+
columns.Bound(p => p.OrderID);
40+
columns.Bound(x => x.ShipName).ClientFooterTemplate("#: getDistinctValues() #");
41+
})
42+
...
43+
.DataSource(dataSource => dataSource
44+
.Ajax()
45+
.PageSize(10)
46+
.ServerOperation(false)
47+
...
48+
)
49+
.Pageable()
50+
.Sortable()
51+
.Scrollable()
52+
.Groupable()
53+
.Filterable()
54+
...
55+
)
56+
```
57+
{% if site.core %}
58+
```TagHelper
59+
@addTagHelper *, Kendo.Mvc
60+
61+
<kendo-grid name="grid">
62+
<columns>
63+
<column field="OrderID"/>
64+
<column field="ShipName" footer-template="#: getDistinctValues() #"></column>
65+
</columns>
66+
<datasource type="DataSourceTagHelperType.Ajax" page-size="10" server-operation="false">
67+
<!-- Other configuration -->
68+
</datasource>
69+
<pageable enabled="true"/>
70+
<scrollable enabled="true"/>
71+
<filterable enabled="true"/>
72+
<sortable enabled="true" />
73+
<groupable enabled="true" />
74+
<!-- Other configuration -->
75+
</kendo-grid>
76+
77+
```
78+
{% endif %}
79+
```Script
80+
function getDistinctValues() {
81+
...
82+
}
83+
```
84+
85+
1. Calculate the distinct values of the "ShipName" field on the client with jQuery.
86+
87+
```Script
88+
function getDistinctValues() {
89+
var grid = $("#grid").getKendoGrid(); // Get a reference to the Grid.
90+
var allGridData = grid.dataSource.data(); // Get the Grid's data.
91+
var appliedFilters = grid.dataSource.filter(); // Get the current filter expressions.
92+
var aggregateResult = 0;
93+
94+
if (appliedFilters != null) { // Check if the Grid is filtered.
95+
var dataQuery = new kendo.data.Query(allGridData); // Create a Query (https://docs.telerik.com/kendo-ui/api/javascript/data/query).
96+
var filteredData = dataQuery.filter(appliedFilters).data; // Get a copy of the filtered data according to the applied filter expression.
97+
aggregateResult = getAggregates(filteredData); // Pass the filtered records to the getAggregates() function to calculate the distinct values count.
98+
} else {
99+
aggregateResult = getAggregates(allGridData); // If the Grid is not filtered, pass all records to the getAggregates() function.
100+
}
101+
102+
return `Total: ${aggregateResult}`;
103+
}
104+
105+
function getAggregates(gridData) {
106+
var distinctValues = [];
107+
$.each(gridData, function (i, el) { // Loop through the Grid records.
108+
if (distinctValues.indexOf(el.ShipName) == -1) {
109+
distinctValues.push(el.ShipName); // Store the unique values.
110+
}
111+
});
112+
return distinctValues.length; // Return their count.
113+
}
114+
```
115+
116+
1. Handle the `DataBound` event of the Grid and update the displayed distinct values count when the Grid is filtered and/or grouped.
117+
118+
```Script
119+
function onDataBound(e) {
120+
if (e.sender.dataSource.filter() != null) { // Check if the data is filtered.
121+
var appliedFilters = e.sender.dataSource.filter(); // Get the current filter expressions.
122+
var allGridData = e.sender.dataSource.data(); //Get all Grid records.
123+
var dataQuery = new kendo.data.Query(allGridData); //Create a Query.
124+
var filteredData = dataQuery.filter(appliedFilters).data; // Get a copy of the filtered data according to the applied filter expression.
125+
var updatedAggregate = getAggregates(filteredData); // Update the aggregation result.
126+
var columnFooterIndex = e.sender.dataSource.group().length + 2; // Get the column index when the Grid is grouped. "+2" is added because the "ShipName" column is the second column the Grid declaration. Replace the value with the index of the column at your end (1-based index).
127+
e.sender.footer.find(`.k-footer-template td:nth-child(${columnFooterIndex})`).html(`Total: ${updatedAggregate}`); // Update the column footer template.
128+
}
129+
}
130+
```
131+
132+
{% if site.core %}
133+
For a runnable example based on the code above, refer to the following REPL samples:
134+
135+
* [Sample code with the Grid HtmlHelper](https://netcorerepl.telerik.com/mdaDwCEr18tFpjd408)
136+
* [Sample code with the Grid TagHelper](https://netcorerepl.telerik.com/wRYNQsOh19KbF5LA18)
137+
{% else %}
138+
For a runnable example based on the code above, refer to the [REPL example on displaying distinct values in Grid column footer](https://netcorerepl.telerik.com/mdaDwCEr18tFpjd408).
139+
{% endif %}
140+
141+
## More {{ site.framework }} Grid Resources
142+
143+
* [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})
144+
145+
* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
146+
147+
{% if site.core %}
148+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
149+
150+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
151+
152+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
153+
154+
{% else %}
155+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
156+
157+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
158+
159+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
160+
{% endif %}
161+
162+
## See Also
163+
164+
* [Client-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
165+
* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
166+
{% if site.core %}
167+
* [Server-Side TagHelper API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/grid)
168+
{% endif %}
169+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
170+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)
171+

‎docs/api/javascript/ui/grid.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4418,6 +4418,9 @@ The editing mode to use. The supported editing modes are "incell", "inline" and
44184418

44194419
> The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command.
44204420
4421+
> As of Kendo UI version R3 2023, the `incell` editing of cells on mobile devices is activated on `double tab` of a Grid cell.
4422+
4423+
44214424
#### Example - specify inline editing mode
44224425

44234426
<div id="grid"></div>

‎docs/controls/grid/editing/batch.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ The Grid enables you to make and save batch updates.
1212

1313
To enable batch editing operations in the Grid, set the `batch` option of the data source to `true`. For a runnable example, refer to the [demo on setting the batch edit mode of the Grid](https://demos.telerik.com/kendo-ui/grid/editing).
1414

15+
>tip As of Kendo UI version R3 2023, the `incell` editing of cells on mobile devices is activated on `double tab` of a Grid cell.
16+
1517
## KB Articles on Editing
1618

1719
* [Implementing Batch Editing with OData]({% slug howto_batch_editing_odata_grid %})

‎docs/controls/grid/row-drag-drop.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ When [`multiple selection`](/controls/grid/selection#multi-row-selection) is ena
102102

103103
`Ctrl` + `Mouse left-click`
104104

105+
>tip As of Kendo UI version R3 2023, the Row Drag and Drop on mobile devices activates on `hold` & `slide` of the row.
106+
105107
## Known Limitations
106108

107109
* The Row Drag & Drop does not work in a combination with data sources that involve rendering rows in an order different than their natural one, such as [`sorting`](/controls/grid/sorting), [`filtering`](/controls/grid/filtering) and [`grouping`](/controls/grid/grouping/overview).

‎docs/controls/grid/selection.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ The following code snippet contains all of the ignored selectors:
9898
input,a,textarea,.k-multiselect-wrap,select,button,.k-button>span,.k-button>img,span.k-icon.k-i-arrow-60-down,span.k-icon.k-i-arrow-60-up,label.k-checkbox-label.k-no-text,.k-icon.k-i-collapse,.k-icon.k-i-expand,span.k-numeric-wrap,.k-focusable
9999
```
100100

101+
## Selection on Mobile Devices
102+
103+
As of Kendo UI version R3 2023, the Selection functionality on mobile devices receives the following improvements:
104+
* Multiple selection with `tap` toggles the selected row or cell.
105+
* Multiple selection with the marquee tool requires `hold` & `slide` to activate. It indicates `hold` when selecting the row or cell.
106+
101107
## KB Articles on Selection
102108

103109
* [Selecting or Deselecting All Rows with a Select All Header Checkbox]({% slug howto_select_deselect_all_rowswith_checkboxes_grid %})

‎docs/intro/installation/using-license-code.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ The license key installation process involves the following steps:
3232
To acquire a license file, generate it:
3333

3434
<!-- The following code is a web component - it should never be added as a code snippet. It is part of the web application to generate the license code for the clients. To check it out, log into your account and open the live doc page. -->
35-
<link rel="stylesheet" href="https://d3fu8oi3wk1rz4.cloudfront.net/kendo-docs-demos-assets/2.1.2/styles/license-key/styles.css" />
36-
<script src="https://d3fu8oi3wk1rz4.cloudfront.net/kendo-docs-demos-assets/2.1.2/scripts/license-key/index.js"></script>
35+
<link rel="stylesheet" href="https://d3fu8oi3wk1rz4.cloudfront.net/kendo-docs-demos-assets/2.3.5/styles/license-key/styles.css" />
36+
<script src="https://d3fu8oi3wk1rz4.cloudfront.net/kendo-docs-demos-assets/2.3.5/scripts/license-key/index.js"></script>
3737

3838
<license-download-link
3939
product-codes="KENDOUICOMPLETE, KENDOUI, KENDOUIMVC, UIASPCORE"

‎src/kendo.badge.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ var __meta__ = {
1616
var HIDDEN = 'k-hidden';
1717

1818
var iconTemplate = ({ icon }) => kendo.ui.icon($(`<span class='k-badge-icon'></span>`), { icon: icon });
19-
var svgIconTemplate = ({ icon }) => `<span class='k-badge-icon k-svg-icon'>${icon}</span>`;
19+
var svgIconTemplate = ({ icon }) => `<span class='k-badge-icon k-svg-icon k-icon'>${icon}</span>`;
2020

2121
var Badge = Widget.extend({
2222
init: function(element, options) {

‎src/kendo.html.icon.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ var __meta__ = {
1313
extend = $.extend,
1414
HTMLBase = kendo.html.HTMLBase;
1515

16-
var KICON = 'k-icon';
16+
var KFONTICON = 'k-icon k-font-icon';
1717
var KI_PREFFIX = 'k-i-';
18-
var KSVGICON = 'k-svg-icon';
18+
var KSVGICON = 'k-icon k-svg-icon';
1919
var KSVG_PREFFIX = 'k-svg-i-';
2020

2121
var FLIP_PREFIX = 'k-flip-';
@@ -135,7 +135,7 @@ var __meta__ = {
135135

136136
that._className = className;
137137
that.wrapper = that.element
138-
.addClass(KICON)
138+
.addClass(KFONTICON)
139139
.removeClass(currentIconClass) // Remove any existing icons.
140140
.addClass(className)
141141
.addClass(that.options.iconClass || '');

0 commit comments

Comments
 (0)