Skip to content

Commit f53a40d

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent f92d842 commit f53a40d

21 files changed

+1069
-71
lines changed

‎docs-aspnet-mvc/helpers/panelbar/overview.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ Below are listed the steps for you to follow when defining the items of a Kendo
6464
6565
### Expand Mode
6666
67-
The PanelBar can be configured to use `Single` or `Multiple` expand mode. If the `ExpandMode` configuration option of the PanelBar is set to:
67+
The PanelBar provides the `Single` or `Multiple` expand mode options.
6868
69-
* `Single` - only a single root item or a single child item of a specific parent item can be expanded at a time. Expanding another root item or another child item of the currently expanded item's parent collapses the currently expanded item. This is also the only way to collapse an expanded item in `single` expand mode.
70-
* `Multiple` - multiple root items or children of the same parent item can be expanded at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.
69+
* If `ExpandMode` is set to `Single`, the user can expand only a single root item or a single child item of a specific parent item. Expanding another root item or another child of the currently expanded item's parent will collapse the currently expanded item. This approach is also the only way to collapse an expanded item in the `single` expand mode.
70+
* If `ExpandMode` is set to `Multiple`, the user can expand multiple root items or children of the same parent item at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.
7171
7272
###### Example
7373
@@ -96,7 +96,7 @@ The PanelBar can be configured to use `Single` or `Multiple` expand mode. If the
9696
```tab-ASPX
9797
9898
<%: Html.Kendo().PanelBar()
99-
.Name("panelbar")
99+
.Name("panelbar")
100100
.ExpandMode(PanelBarExpandMode.Single)
101101
.Items(items =>
102102
{

‎docs-aspnet-mvc/helpers/treeview/how-to/expand-node-async.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Expand Selected Nodes Asynchronously
3+
page_title: Expand Selected Nodes Asynchronously | Kendo UI TreeView HtmlHelper
4+
description: "Learn how to asynchronously expand the selected node of the Kendo UI TreeView in ASP.NET MVC."
5+
slug: howto_expandselectednodeasync_treeviewaspnetmvc
6+
---
7+
8+
# Expand Selected Nodes Asynchronously
9+
10+
The TreeView for ASP.NET MVC enables you to do Ajax binding by using Entity Framework and to asynchronously expand the selected nodes when `loadOnDemand` is set to `true`.
11+
12+
To see the complete implementation of the approach, refer to the GitHub project on [asynchronously expanding the selected nodes of the TreeView in ASP.NET MVC applications](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/treeview/ExpandSelectedItemAsync).
13+
14+
## Configuration
15+
16+
* [Creating the application](#create-the-application)
17+
* [Adding the new item](#add-the-new-item)
18+
* [Setting the Entity Data model](#set-the-entity-data-model)
19+
* [Configuring the new action method](#configure-the-new-action-method)
20+
21+
### Create the Application
22+
23+
1. Create a new ASP.NET MVC application. If you have installed the [Telerik UI for ASP.NET MVC Visual Studio Extensions]({% slug overview_aspnetmvc %}#kendo-ui-for-asp.net-mvc-visual-studio-extensions), create a Telerik UI for ASP.NET MVC application.
24+
25+
1. If you decide not to use the Visual Studio extensions, follow the procedure for adding Telerik UI for ASP.NET MVC to existing applications:
26+
27+
* [ASP.NET MVC 4]({% slug aspnetmvc4_aspnetmvc %})
28+
* [ASP.NET MVC 5]({% slug aspnetmvc5_aspnetmvc %})
29+
30+
### Add the New Item
31+
32+
1. In the Visual Studio solution explorer, right-click **Models**.
33+
1. Select **Add** > **New Item**.
34+
1. On the **Add New Item** dialog, select **Data** > **ADO.NET Data Model**.
35+
1. Provide the `Northwind.edmx` name to the model and click **Next**. As a result, the **Entity Data Model Wizard** starts.
36+
37+
### Set the Entity Data Model
38+
39+
1. Select **Generate from database** and click **Next**.
40+
1. Configure a connection to the Northwind database and click **Next**.
41+
42+
**Figure 1. A new entity model**
43+
![New entity data model](/helpers/treeview/images/tree-entity-data-model.png)
44+
45+
1. Select all tables and click **Finish**.
46+
47+
### Configure the New Action Method
48+
49+
1. Open `Controllers/HomeController.cs` and add a new action method which will return JSON. Each time the user expands a parent node, the TreeView makes an Ajax request to this action method. The action method returns only the child nodes of the expanded parent node. The TreeView provides the unique identifier of the parent node or, when it makes the initial request, `null`.
50+
51+
```cs
52+
public JsonResult Employees_Read(int? id)
53+
{
54+
using (var northwind = new NORTHWNDEntities())
55+
{
56+
var employeesQuery = northwind.Employees.Select(c => new HierarchicalViewModel
57+
{
58+
ID = c.EmployeeID,
59+
Name = c.FirstName,
60+
ParentID = null,
61+
HasChildren = c.Orders.Any()
62+
})
63+
.Union(northwind.Orders.Select(c => new HierarchicalViewModel
64+
{
65+
ID = c.OrderID,
66+
Name = c.ShipAddress,
67+
ParentID = c.EmployeeID,
68+
HasChildren = c.Order_Details.Any()
69+
}))
70+
.Union(northwind.Order_Details.Select(c => new HierarchicalViewModel
71+
{
72+
ID = c.OrderID,
73+
Name = c.Product.ProductName,
74+
ParentID = c.Order.OrderID,
75+
HasChildren = false
76+
}));
77+
78+
var result = employeesQuery.ToList()
79+
.Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
80+
.Select(item => new {
81+
id = item.ID,
82+
Name = item.Name,
83+
expanded = item.Expanded,
84+
hasChildren = item.HasChildren
85+
86+
});
87+
88+
return Json(result, JsonRequestBehavior.AllowGet);
89+
}
90+
}
91+
```
92+
93+
1. Open `Views/Index.cshtml` and add a TreeView.
94+
95+
```cs
96+
@(Html.Kendo().TreeView()
97+
.Name("treeview")
98+
.DataTextField("Name")
99+
.DataSource(dataSource => dataSource
100+
.Read(read => read
101+
.Action("Employees_Read", "Home")
102+
)
103+
)
104+
)
105+
```
106+
107+
1. Add a button which will asynchronously load child nodes with the [`load()`](https://docs.telerik.com/kendo-ui/api/javascript/data/node/methods/load) method in the child data source and, therefore, asynchronously expand the currently selected node.
108+
109+
```cs
110+
@(Html.Kendo().Button()
111+
.Name("expandNode")
112+
.Content("Expand selected node")
113+
.Events(e => e.Click("onExpandClick"))
114+
)
115+
```
116+
117+
```js
118+
<script>
119+
function onExpandClick(e) {
120+
var tree = $("#treeview").data("kendoTreeView"),
121+
selected = tree.select(),
122+
dataItem = tree.dataItem(selected);
123+
124+
var load = function (item) {
125+
var that = this,
126+
chain = $.Deferred().resolve();
127+
128+
chain = chain.then(function () {
129+
that.expand(that.findByUid(item.uid));
130+
return item.load();
131+
}).then(function () {
132+
if (item.hasChildren) {
133+
var childrenChain = $.Deferred().resolve();
134+
135+
item.children.data().forEach(function (child) {
136+
(function (child) {
137+
childrenChain = childrenChain.then(function () {
138+
return load.bind(that)(child);
139+
})
140+
})(child)
141+
})
142+
143+
return childrenChain;
144+
}
145+
});
146+
147+
return chain;
148+
}
149+
150+
if (selected.length == 0) {
151+
alert("Select item first!");
152+
return;
153+
}
154+
155+
load.bind(tree)(dataItem);
156+
}
157+
</script>
158+
```
159+
160+
1. Press `CTRL`+`F5` to build and run the application. Select a node and click the **Expand selected node** button.
161+
162+
## See Also
163+
164+
* [Overview of the TreeView HtmlHelper]({% slug overview_treeviewhelper_aspnetmvc %})
165+
* [How to Bind TreeViews to XML]({% slug howto_bindtoaml_treeviewaspnetmvc %})
166+
* [How to Integrate with Sharepoint]({% slug howto_integratewithsharepoint_treeviewaspnetmvc %})
167+
* [How to Save the State of TreeView Items]({% slug howto_savetreeviewitemsstate_treeviewaspnetmvc %})
168+
* [Overview of the Kendo UI TreeView Widget](http://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview)
169+
* [Overview of Telerik UI for ASP.NET MVC]({% slug overview_aspnetmvc %})
170+
* [Fundamentals of Telerik UI for ASP.NET MVC]({% slug fundamentals_aspnetmvc %})
171+
* [Scaffolding in Telerik UI for ASP.NET MVC]({% slug scaffolding_aspnetmvc %})
172+
* [Telerik UI for ASP.NET MVC API Reference Folder](http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc/AggregateFunction)
173+
* [Telerik UI for ASP.NET MVC HtmlHelpers Folder]({% slug overview_barcodehelper_aspnetmvc %})
174+
* [Tutorials on Telerik UI for ASP.NET MVC]({% slug overview_timeefficiencyapp_aspnetmvc6 %})
175+
* [Telerik UI for ASP.NET MVC Troubleshooting]({% slug troubleshooting_aspnetmvc %})

‎docs/controls/navigation/panelbar/overview.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,10 +214,10 @@ When the PanelBar loads remote content via AJAX, the server response is cached i
214214

215215
### Expand Mode
216216

217-
The PanelBar can be configured to use `single` or `multiple` expand mode. If the `expandMode` configuration option of the PanelBar is set to:
217+
The PanelBar provides the `Single` or `Multiple` expand mode options.
218218

219-
* `single` - only a single root item or a single child item of a specific parent item can be expanded at a time. Expanding another root item or another child item of the currently expanded item's parent collapses the currently expanded item. This is also the only way to collapse an expanded item in `single` expand mode.
220-
* `multiple` - multiple root items or children of the same parent item can be expanded at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.
219+
* If `ExpandMode` is set to `Single`, the user can expand only a single root item or a single child item of a specific parent item. Expanding another root item or another child of the currently expanded item's parent will collapse the currently expanded item. This approach is also the only way to collapse an expanded item in the `single` expand mode.
220+
* If `ExpandMode` is set to `Multiple`, the user can expand multiple root items or children of the same parent item at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.
221221

222222
###### Example
223223

@@ -238,7 +238,7 @@ The PanelBar can be configured to use `single` or `multiple` expand mode. If the
238238
{ ProductName: "Level2 1" }
239239
]}
240240
];
241-
241+
242242
$("#panelbar").kendoPanelBar({
243243
dataTextField: "ProductName",
244244
dataSource: items,

‎docs/controls/navigation/treeview/how-to/nodes/node-async-expand.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
---
2-
title: Asynchronous expand of selected node
3-
page_title: Asynchronous expand of selected node | Kendo UI TreeView
4-
description: "Learn how to asynchronously expand selected node of the Kendo UI TreeView."
2+
title: Expand Selected Nodes Asynchronously
3+
page_title: Expand Selected Nodes Asynchronously | Kendo UI TreeView
4+
description: "Learn how to asynchronously expand the selected node of the Kendo UI TreeView."
55
slug: howto_asynchronous_expand_selected_node
66
---
77

8-
# Expand Nodes during Drag
8+
# Expand Selected Nodes Asynchronously
99

10-
The following example demonstrates how to expand the selected TreeView node with loadOnDemand set to true. To achieve this, child nodes must be loaded asynchronously in the child data source through [the Node's load() method](https://docs.telerik.com/kendo-ui/api/javascript/data/node/methods/load):
10+
The TreeView enables you to expand the selected node when `loadOnDemand` is set to `true`.
1111

12-
## Example
12+
Load the child nodes asynchronously in the child data source by using the [`load()`](https://docs.telerik.com/kendo-ui/api/javascript/data/node/methods/load) method of the node.
13+
14+
###### Example
1315

1416
```html
1517
<div id="container">

‎docs/controls/scheduling/scheduler/custom-views.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Custom Views
3+
page_title: Custom Views | Kendo UI Scheduler
4+
description: "Learn how to create a custom view for a Kendo UI Scheduler."
5+
previous_url: /controls/scheduling/scheduler/how-to/howto-scheduler-customview-overview, /controls/scheduling/scheduler/how-to/custom-views/overview
6+
slug: howto_scheduler_customview_overview
7+
position: 4
8+
---
9+
10+
# Custom Views
11+
12+
The Scheduler enables you to create custom views which meet the specific project requirements by extending the default `View` classes of the Scheduler.
13+
14+
To implement a custom view, extend (inherit from) one of the existing views. The following source-code files contain the views implementation:
15+
16+
* `kendo.scheduler.view.js`&mdash;Contains the basic logic of the Scheduler views. Each of the other predefined views extends the `kendo.ui.SchedulerView` class.
17+
* `kendo.scheduler.dayview.js`&mdash;Contains the logic which implements the `MultiDayView`. The `MultiDayView` class is further extended to create the `DayView`, the `WeekView`, and the `WorkWeekView`.
18+
* `kendo.scheduler.monthview.js`&mdash;Contains the implementation of the `MonthView` which extends the `SchedulerView`.
19+
* `kendo.scheduler.timelineview.js`&mdash;Implements the `TimelineView`, the `TimelineWeekView`, the `TimelineWorkWeekView`, and the `TimelineMonthView`. The `TimelineWeekView`, the `TimelineWorkWeekView`, and the `TimelineMonthView` extend the `TimelineView` class.
20+
* `kendo.scheduler.agendaview.js`&mdash;Implements the `AgendaView` which extends the `SchedulerView`.
21+
22+
You can override each method and property that are defined in the list by extending the respective class. In this way, the functionality and the appearance of the view will be altered by creating the new, custom view. For more information, refer to the `kendo.scheduler.dayview.js` and `kendo.scheduler.timelineview.js` files which contain definitions of views which extend other, already defined views (`MultiDayView` and `TimelineView` respectively).
23+
24+
## See Also
25+
26+
Other articles and how-to examples on the Kendo UI Scheduler:
27+
28+
* [Scheduler JavaScript API Reference](/api/javascript/ui/scheduler)
29+
* [How to Create Custom Month Views with Event Count in the Show More Button]({% slug howto_create_custom_monthview_eventcount_showmore_button_scheduler %})
30+
* [How to Create Custom To-Do Views]({% slug howto_create_custom_todo_view %})
31+
* [Create Custom Views by Inheriting Built-In Views]({% slug howto_create_custom_view_inheriting_builtinview_scheduler %})
32+
* [How to Implement Custom Timeline View with Dynamic Length]({% slug howto_implementcustomtimeline_withdynamiclength_scheduler %})

‎docs/controls/scheduling/scheduler/how-to/custom-views/overview.md‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)