Skip to content

Commit 2fa9790

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 04d09a8 commit 2fa9790

File tree

14 files changed

+571
-11
lines changed

14 files changed

+571
-11
lines changed
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn more about the Telerik UI Responsive Panel HtmlHelper for {{ site.framework }}, and use it in your next project."
5+
previous_url: /helpers/html-helpers/responsivepanel, /helpers/navigation/responsivepanel/overview
6+
slug: htmlhelpers_responsivepanel_aspnetcore
7+
position: 1
8+
---
9+
10+
# ResponsivePanel HtmlHelper Overview
11+
12+
The Telerik UI Responsive Panel HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Responsive Panel widget.
13+
14+
The Responsive Panel allows you to hide part of a page content on small screens. The Component collapses a content element when a `breakpoint` is reached. The collapsed content is then expanded by a button with the `k-rpanel-toggle` class. To set the placement of the expandable content, use the `orientation` option.
15+
16+
17+
* [Demo page for the Responsive Panel](https://demos.telerik.com/{{ site.platform }}/responsivepanel/index)
18+
19+
## Initializing the Responsive Panel
20+
21+
The following example demonstrates how to define the Responsive Panel.
22+
23+
@(Html.Kendo().ResponsivePanel()
24+
.Name("sidebar")
25+
.Breakpoint(1000)
26+
.Content("<p>This content will collapse if the width is less than 1000px</p>")
27+
)
28+
29+
## Basic Configuration
30+
31+
The following example demonstrates the basic configuration of the Responsive Panel HtmlHelper.
32+
33+
```Razor
34+
<div class="dash-head">
35+
<!-- toggle button for responsive panel, hidden on large screens -->
36+
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
37+
</div>
38+
<!-- responsive panel, collapsed on small screens -->
39+
@(Html.Kendo().ResponsivePanel()
40+
.Name("sidebar")
41+
.Breakpoint(1000)
42+
.Orientation(ResponsivePanelOrientation.Left)
43+
.Content("<div> <div id='profile' class='widget'> <h3>Profile</h3> <div> <div class='profile-photo'>" +
44+
" </div> <h4>Lynda Schleifer</h4> <p>Sales Associate</p> </div> </div> <div id='teammates' class='widget'> <h3>Teammates</h3>" +
45+
" <div> <div class='team-mate'> <img src='./shared/web/panelbar/andrew.jpg' alt='Andrew Fuller'> <h4>Andrew Fuller</h4> <p>Team Lead</p> </div> " +
46+
" <div class='team-mate'> <img src='./shared/web/panelbar/nancy.jpg' alt='Nancy Leverling'> <h4>Nancy Leverling</h4> <p>Sales Associate</p></div>" +
47+
" <div class='team-mate'> <img src='./shared/web/panelbar/robert.jpg' alt='Robert King'> <h4>Robert King</h4> <p>Business System Analyst</p> </div> </div> </div>")
48+
)
49+
```
50+
51+
52+
53+
## See Also
54+
55+
* [ResponsivePanel Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel)
56+
57+

docs-aspnet/tag-helpers/layout/responsivepanel/overview.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
---
22
title: Overview
33
page_title: Overview
4-
description: "Learn the basics when working with the Telerik UI ResponsivePanel TagHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5-
previous_url: /helpers/responsive-panel, /helpers/tag-helpers/responsive-panel
4+
description: "Learn more about the Telerik UI Responsive Panel TagHelper for {{ site.framework }}, and use it your next project."
5+
previous_url: /helpers/responsivepanel, /helpers/tag-helpers/responsivepanel
66
slug: taghelpers_responsivepanel_aspnetcore
77
position: 1
88
---
99

10-
# ResponsivePanel TagHelper Overview
10+
# Responsive Panel TagHelper Overview
1111

12-
The Telerik UI ResponsivePanel TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ResponsivePanel widget.
12+
The Telerik UI Responsive Panel TagHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI ResponsivePanel widget.
1313

14-
The ResponsivePanel allows you to hide part of a page content on small screens.
14+
The Responsive Panel allows you to hide part of a page content on small screens. The Component collapses a content element when a `breakpoint` is reached. The collapsed content is then expanded by a button with the `k-rpanel-toggle` class. To set the placement of the expandable content, use the
15+
`orientation` option.
1516

16-
* [Demo page for the ResponsivePanel](https://demos.telerik.com/aspnet-core/responsive-panel/index)
17+
* [Demo page for the Responsive Panel](https://demos.telerik.com/aspnet-core/responsivepanel/tag-helper)
1718

18-
## Initializing the ResponsivePanel
19+
## Initializing the Responsive Panel
1920

20-
The following example demonstrates how to define the ResponsivePanel by using the ResponsivePanel TagHelper.
21+
The following example demonstrates how to define the Responsive Panel by using the Responsive Panel TagHelper.
2122

2223
<kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
2324
<div id="profile" class="widget">
@@ -128,4 +129,5 @@ The configuration options of the ResponsivePanel TagHelper are passed as attribu
128129

129130
## See Also
130131

131-
* [Basic Usage of the ResponsivePanel TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/responsive-panel/index)
132+
* [The Responsive Panel Tag Helper for {{ site.framework }} Demo](https://demos.telerik.com/aspnet-core/responsivepanel/tag-helper)
133+
[The Responsive Panel Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel)

docs/_config.yml

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,12 @@ navigation:
116116
"controls/data-management/pivotgrid/how-to":
117117
title: "How To"
118118
position: 70
119+
"controls/data-management/pivotgridv2/binding":
120+
title: "Data Binding"
121+
position: 2
122+
"controls/data-management/pivotgridv2/export":
123+
title: "Export"
124+
position: 5
119125
"controls/data-management/spreadsheet/import-and-export-data":
120126
title: "Data Import and Export"
121127
position: 7
@@ -600,6 +606,9 @@ navigation:
600606
title: "Image Editor"
601607
"*pivotgrid":
602608
title: "PivotGrid"
609+
"*pivotgridv2":
610+
isNew: true
611+
title: "PivotGridV2"
603612
"*grid":
604613
title: "Grid"
605614
"*media":
@@ -1866,6 +1875,13 @@ defaults:
18661875
values:
18671876
component: "pivotgrid"
18681877

1878+
-
1879+
scope:
1880+
path: "controls/data-management/pivotgridv2"
1881+
values:
1882+
component: "pivotgridv2"
1883+
1884+
18691885
-
18701886
scope:
18711887
path: "controls/layout/popover"
@@ -2081,6 +2097,7 @@ intro_columns:
20812097
"ListView": "overview_kendoui_listview_widget"
20822098
"Pager": "overview_kendoui_pager_widget"
20832099
"PivotGrid": "overview_kendoui_pivotgrid_widget"
2100+
"PivotGridV2": "overview_kendoui_pivotgridv2_widget"
20842101
"Spreadsheet": "overview_spreadsheet_widget"
20852102
"TaskBoard": "overview_kendoui_taskboard_widget"
20862103
"TreeList": "overview_kendoui_treelist_widget"

docs/controls/data-management/pivotgrid/overview.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,17 @@ The Kendo UI PivotGrid represents multidimensional data in a cross-tabular forma
1212

1313
* [Demo page for the PivotGrid](https://demos.telerik.com/kendo-ui/pivotgrid/index)
1414

15+
> Тhe new PivotGridV2 is now available. It offers a brand new design and a new future-proof architecture that allows the implementation of many upcoming functionalities. As PivotGridV2 aims to replace the legacy PivotGrid, it is recommended to use the PivotGridV2 in your new projects. For information about the new PivotGridV2, refer to the [PivotGridV2 Overview]({% slug overview_kendoui_pivotgridv2_widget %}) article.
16+
1517
## Basic Configuration
1618

17-
To configure the PivotGrid to the **Adventure Works** cube that is hosted on https://demos.telerik.com, create the widget by defining an HTML `<div>` element.
19+
1. Start with the initialization of the PivotGrid widget. Create the widget by defining an HTML <div> element.
1820

1921
<!-- Define the HTML div that will hold the PivotGrid -->
2022
<div id="pivotgrid">
2123
</div>
2224

23-
The following example demonstrates how to further configure the PivotGrid widget.
25+
2. Configure PivotGrid to work with the Adventure Works cube that is hosted on https://demos.telerik.com.
2426

2527
<script>
2628
$(document).ready(function () {
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: PivotConfiguratorV2
3+
page_title: jQuery PivotGridV2 Documentation | PivotConfiguratorV2 Overview
4+
description: "Get started with the jQuery PivotGridV2 by Kendo UI and learn how to create and configure the Kendo UI PivotConfiguratorV2."
5+
slug: overview_kendoui_pivotconfiguratorv2
6+
position: 4
7+
---
8+
9+
# PivotConfiguratorV2 Overview
10+
11+
The [Kendo UI PivotConfiguratorV2](/api/javascript/ui/pivotconfiguratorv2) represents an OLAP cube structure.
12+
13+
The PivotConfiguratorV2 can be used for configuring the column and row dimensions, and the measure fields of the [PivotGridV2](https://demos.telerik.com/kendo-ui/pivotgridv2/index). It is a supplementary component which is strongly related to the Kendo UI `PivotDataSourceV2` component.
14+
15+
## Initializing the PivotConfiguratorV2
16+
17+
There are four elements that need to be configured for the PivotConfiguratorV2 to function properly:
18+
19+
* PivotGridV2—The PivotGridV2 widget which will be managed by the PivotConfiguratorV2.
20+
* PivotConfiguratorV2—The configurator widget itself.
21+
* PivotConfiguratorButton—The button which expands/collapses the PivotConfiguratorV2.
22+
* PivotContainer—The container which holds all of the above widgets.
23+
24+
The following example demonstrates the HTML structure of the elements.
25+
26+
<div id="container">
27+
<div id="pivotgrid"></div>
28+
<div id="configurator"></div>
29+
<div id="pivotbutton"></div>
30+
</div>
31+
32+
## Basic Configuration
33+
34+
The following example demonstrates how to configure the widgets.
35+
36+
<script>
37+
$(document).ready(function () {
38+
// Initialize the PivotGridV2.
39+
var pivotgrid = $("#pivotgrid").kendoPivotGridV2({
40+
height: 700,
41+
dataSource: {
42+
type: "xmla",
43+
columns: [{ name: ['[Date].[Calendar]'], expand: true }],
44+
rows: [{ name: ['[Geography].[City]'], expand: true }],
45+
measures: [{ name: ['[Measures].[Reseller Freight Cost]'] }],
46+
transport: {
47+
connection: {
48+
catalog: "Adventure Works DW 2008R2",
49+
cube: "Adventure Works"
50+
},
51+
read: 'https://demos.telerik.com/olap/msmdpump.dll'
52+
}
53+
}
54+
}).data("kendoPivotGridV2");
55+
56+
// Initialize the PivotConfiguratorV2
57+
$("#configurator").kendoPivotConfiguratorV2({
58+
dataSource: pivotgrid.dataSource, // The dataSource should be the same as the one the PivotGridV2 is using.
59+
filterable: true,
60+
sortable: true,
61+
height: 580
62+
});
63+
64+
// Initialize the PivotContainer.
65+
$("#container").kendoPivotContainer({
66+
configuratorPosition: "left" // The PivotConfiguratorV2 will appear to the left of the PivotGridV2.
67+
});
68+
69+
// Initialize the PivotConfiguratorButton.
70+
$("#pivotbutton").kendoPivotConfiguratorButton({
71+
configurator: "configurator" // Specify which KendoConfiguratorV2 widget will the button be related to.
72+
});
73+
});
74+
</script>
75+
76+
The following image demonstrates the output from the previous example.
77+
78+
![Kendo UI PivotConfigurator](../../../../images/pivotconfiguratorv2.png)
79+
80+
## Referencing Existing Instances
81+
82+
To reference an existing PivotConfigurator instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method. Once a reference has been established, use the [PivotConfigurator API](/api/javascript/ui/pivotconfiguratorv2) to control its behavior.
83+
84+
The following example demonstrates how to access an existing PivotConfigurator instance.
85+
86+
var pivotconfigurator = $("#pivotconfigurator").data("kendoPivotConfiguratorV2");
87+
88+
## See Also
89+
90+
* [Basic Usage of the PivotGridV2 (Demo)](https://demos.telerik.com/kendo-ui/pivotgridv2/index)
91+
* [PivotGridV2 JavaScript API Reference](/api/javascript/ui/pivotgridv2)
92+
* [PivotConfiguratorV2 JavaScript API Reference](/api/javascript/ui/pivotconfiguratorv2)
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: OLAP Cube Setup
3+
page_title: jQuery PivotGridV2 Documentation | OLAP Cube Setup
4+
description: "Get started with the jQuery PivotGridV2 by Kendo UI and learn how to set up the OLAP Cube when working with the widget."
5+
slug: olap_cube_setup_pivotgridv2
6+
position: 3
7+
---
8+
9+
# OLAP Cube Setup
10+
11+
You can set up the OLAP cube by using Microsoft SQL Server Analysis Services [SSAS](http://technet.microsoft.com/en-us/library/ms175609(v=sql.90).aspx).
12+
13+
## Installing SSAS
14+
15+
For more information on installing the [SQL Server Analysis Services](http://technet.microsoft.com/en-us/library/ms175609(v=sql.90).aspx), refer to the [MSDN tutorial](https://msdn.microsoft.com/en-us/library/hh403424(v=sql.110).aspx).
16+
17+
## Defining the OLAP Cube
18+
19+
For more information on creating, defining, and deploying the OLAP multidimensional cube, refer to the [MSDN multidimensional modelling tutorial](https://msdn.microsoft.com/en-us/library/ms170208(v=sql.110).aspx).
20+
21+
## Configuring the HTTP Access
22+
23+
To enable the HTTP access to the SQL Server Analysis Services, use an `MSMDPUMP.ddl` ISAPI extension.
24+
25+
* For more information on setting up the `MSMDPUMP.ddl` extension, refer to the [MSDN HTTP access tutorial](http://technet.microsoft.com/en-us/library/gg492140.aspx).
26+
* For an online accessible OLAP service for testing purposes, use `https://demos.telerik.com/olap/msmdpump.dll`. The URL does not open directly in the browser.
27+
28+
## Enabling the Cross-Domain Access
29+
30+
> If the cube will not be requested from different domains, skip this step.
31+
32+
To allow cross-domain requests to the OLAP service, enable the CORS behavior of your server. For more information on Cross-Origin Resource Sharing (CORS), refer to [this link](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).
33+
34+
The following sections demonstrate how to enable CORS on an [Internet Information Services (IIS)](http://www.iis.net/) server. Cross-domain access requires you to configure the HTTP Response Headers and the `OPTIONS` method server response.
35+
36+
### Configuring HTTP Response Headers
37+
38+
To configure HTTP Response Headers, specify the following requirements:
39+
* The domains that will perform the data requests.
40+
* An [HTTP method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html) through which the data will be transferred.
41+
* The HTTP headers that can be used in the requests.
42+
* The user credentials that will be required if an authenticated access is used.
43+
44+
The following example demonstrates the list of the HTTP Response Headers that show the settings which are required to enable the IIS CORS behavior.
45+
46+
<table>
47+
<tbody>
48+
<tr>
49+
<th>
50+
<p>Header Name</p>
51+
</th>
52+
<th>
53+
<p>Value</p>
54+
</th>
55+
<th>
56+
<p>Details</p>
57+
</th>
58+
</tr>
59+
<tr>
60+
<td><strong>Access-Control-Allow-Headers</strong></td>
61+
<td><code>Origin, Content-Type, Accept</code></td>
62+
<td>
63+
<p>These are the names of the fields required to be used in the actual request. Values should be comma-separated.</p>
64+
<ul>
65+
<li><code>Origin</code> – this field indicates where the cross-origin or preflight request originates from. This setting tells the server that the origin, which performs the request is a known one.</li>
66+
<li><code>Content-Type</code> – this field indicates the content (MIME) type of the entity body sent to the recipient. The actual content type used in the communication between OLAP service and Kendo UI <code>PivotDataSource</code> is text/xml.</li>
67+
<li><code>Accept</code> – this field specifies the media types which are acceptable for the response.</li>
68+
</ul>
69+
</td>
70+
</tr>
71+
<tr>
72+
<td><strong>Access-Control-Allow-Origin</strong></td>
73+
<td>
74+
<p>The URI names that may access the resource. When an asterisk (*) is defined, all domains are allowed.</p>
75+
</td>
76+
<td>
77+
<p>The names of the allowed domains should be separated by comma (,).</p>
78+
</td>
79+
</tr>
80+
<tr>
81+
<td><strong>Access-Control-Request-Method</strong></td>
82+
<td><code>POST</code></td>
83+
<td>
84+
<p>The name of the HTTP method to be used in the actual request.</p>
85+
<p>The XMLA protocol specifies an HTTP <code>POST</code> method.</p>
86+
</td>
87+
</tr>
88+
<tr>
89+
<td><strong>Access-Control-Allow-Credentials</strong> (authenticated access only)</td>
90+
<td><code>true</code></td>
91+
<td>
92+
<p>The allowed values are:</p>
93+
<ul>
94+
<li><code>true</code> – allows suppliying of credentials with the request.</li>
95+
<li><code>false</code> – disable supplying of credentials with the request. Equal to an altogether missing header.</li>
96+
</ul>
97+
</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
102+
### Configuring the OPTIONS Method Server Response
103+
104+
To configure the `OPTIONS` method server response, specify the server response to the `OPTIONS` method requests. In IIS, configure the behavior of the `OPTIONS` method through the `OPTIONSVerbHandler` mapping settings.
105+
106+
The following example demonstrates the list of settings that you have to apply.
107+
108+
<table>
109+
<tbody>
110+
<tr>
111+
<th>HTTP Handler Name</th>
112+
<th>Required Access Level</th>
113+
<th>Details</th>
114+
</tr>
115+
<tr>
116+
<td><code>OPTIONSVerbHandler</code></td>
117+
<td><code>Read</code></td>
118+
<td>
119+
<p>Specifies that the handler requires <code>READ</code> access to the requests.</p>
120+
</td>
121+
</tr>
122+
</tbody>
123+
</table>
124+
125+
### Accessing the Cube Securely
126+
127+
To implement a secured access to the OLAP instance, use either of the following approaches:
128+
* Use a proxy service which communicates with the cube on a secured protocol. This proxy has to support the XMLA protocol. In the Microsoft world, the solution is to use [ADOMD.NET](https://technet.microsoft.com/en-us/library/ms123483%28v=sql.110%29.aspx). For more information, refer to [this forum thread](https://www.telerik.com/forums/securing-access-to-msmdpump-dll).
129+
* Send the credentials with a request header even though the **Username** and **Password** will be visible on the client side (browser). For more information on passing credentials with request headers, refer to [this StackOverflow discussion](http://stackoverflow.com/questions/14579478/how-to-pass-credentials-for-a-webservice-using-jquery-ajax-call). You can define the required callbacks and settings directly in the [`transport.read`](/api/javascript/data/datasource/configuration/transport.read) object because they will be passed to the `$.ajax` method.
130+
131+
## See Also
132+
133+
* [Basic Usage of the PivotGridV2 (Demo)](https://demos.telerik.com/kendo-ui/pivotgridv2/index)
134+
* [PivotGridV2 JavaScript API Reference](/api/javascript/ui/pivotgridv2)

0 commit comments

Comments
 (0)