Skip to content

Commit a92a726

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 1667254 commit a92a726

File tree

13 files changed

+675
-352
lines changed

13 files changed

+675
-352
lines changed

‎docs/controls/data-management/grid/get-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,11 +238,11 @@ Among other functionalities, the Grid supports editing and filtering. The [editi
238238
## Next Steps
239239

240240
* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
241-
* [Demo Page for the Grid](https://demos.telerik.com/kendo-ui/grid/index)
241+
* [Demo Page for the Kendo UI for jQuery Data Grid](https://demos.telerik.com/kendo-ui/grid/index)
242242

243243
## See Also
244244

245-
* [JavaScript API Reference of the Grid](/api/javascript/ui/grid)
245+
* [JavaScript API Reference of the jQuery Grid](/api/javascript/ui/grid)
246246
* [Knowledge Base Section](/knowledge-base)
247247

248248
<script>

‎docs/controls/data-management/treelist/get-started.md

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
---
2+
title: Getting Started
3+
page_title: jQuery TreeList Documentation - Getting Started with the TreeList
4+
description: "Get started with the jQuery TreeList by Kendo UI and learn how to create, initialize, and enable the component."
5+
slug: getting_started_kendoui_treelist_component
6+
position: 1
7+
---
8+
9+
# Getting Started with the TreeList
10+
11+
This guide demonstrates how to get up and running with the Kendo UI for jQuery TreeList.
12+
13+
After the completion of this guide, you will achieve the following end result:
14+
15+
```dojo
16+
<div id="treelist"></div>
17+
18+
<script>
19+
let myDataArray = [
20+
{ID: 1, Name: "Tom", Date: "10/15/2022", parentId: null},
21+
{ID: 2, Name: "John", Date: "11/25/2022", parentId: 1},
22+
{ID: 3, Name: "Annie", Date: "05/09/2022", parentId: 1},
23+
{ID: 4, Name: "Rachel", Date: "08/06/2022", parentId: 2},
24+
{ID: 5, Name: "Klemens", Date: "10/07/2022", parentId: 4},
25+
{ID: 6, Name: "Micah", Date: "05/19/2022", parentId: 3},
26+
{ID: 7, Name: "Junie", Date: "04/04/2022", parentId: 3},
27+
{ID: 8, Name: "Krishnah", Date: "07/19/2022", parentId: 7},
28+
{ID: 9, Name: "Enrichetta", Date: "01/11/2022", parentId: 8},
29+
{ID: 10, Name: "Marten", Date: "02/13/2022", parentId: 9},
30+
{ID: 11, Name: "Rosmunda", Date: "08/15/2022", parentId: 9},
31+
{ID: 12, Name: "Regan", Date: "08/15/2022", parentId: 2},
32+
{ID: 13, Name: "Drew", Date: "08/15/2022", parentId: 2},
33+
{ID: 14, Name: "Bevis", Date: "08/15/2022", parentId: 4},
34+
{ID: 15, Name: "Olga", Date: "08/15/2022", parentId: 4},
35+
{ID: 16, Name: "Robert", Date: "08/15/2022", parentId: 6},
36+
{ID: 17, Name: "Priscilla", Date: "08/15/2022", parentId: 6},
37+
{ID: 18, Name: "Oren", Date: "08/15/2022", parentId: 6},
38+
{ID: 19, Name: "Thomas", Date: "08/15/2022", parentId: 6},
39+
{ID: 20, Name: "Keiko", Date: "08/15/2022", parentId: 5},
40+
];
41+
42+
$("#treelist").kendoTreeList({
43+
dataSource: {
44+
data: myDataArray,
45+
schema: {
46+
model: {
47+
id: "ID",
48+
parentId: "parentId",
49+
expanded: true,
50+
fields: {
51+
Date: { type: "date" }
52+
}
53+
}
54+
}
55+
},
56+
toolbar: ["create"],
57+
// Enable filtering.
58+
filterable: true,
59+
// Enable editing.
60+
editable: "inline",
61+
height: 400,
62+
columns: [
63+
{ field: "Name" },
64+
{ field: "Date", format: "{0:dd-MM-yyyy}" },
65+
{ title: "Edit", command: [ "edit" ]}
66+
]
67+
});
68+
</script>
69+
```
70+
71+
## 1. Create an Empty div Element
72+
73+
First, create an empty `<div>` element on the page that will serve as the main container of the TreeList component.
74+
75+
```html
76+
<div id="treelist"></div>
77+
```
78+
79+
## 2. Initialize the TreeList
80+
81+
In this step, you will initialize the Grid from the empty `<div>` element.
82+
83+
```html
84+
<div id="treelist"></div>
85+
86+
<script>
87+
// Target the div element by using jQuery and then call the kendoTreeList() method.
88+
$("#treelist").kendoTreeList({
89+
// Add some basic configurations such as height.
90+
height: 400
91+
});
92+
</script>
93+
```
94+
95+
## 3. Bind the TreeList to Data
96+
97+
Once the basic initialization is completed, you can start adding additional configurations to the TreeList. The first and most important configuration is the [`kendo.data.TreeListDataSource`](/api/javascript/data/treelistdatasource).
98+
99+
The TreeList renders its hierarchy based on the `parentId`-`id` relationship. The data objects contain both an `id` and a `parentId` field which describe the hierarchy of the items. You can change these field names by using the [`schema.model` definition](/api/javascript/data/datasource/configuration/schema#schema.model).
100+
101+
> The TreeList distinguishes the root items based on the `parentId`:
102+
> * If the `schema.model.fields.[parentIdField]` is nullable, root items will be the items whose `parentId` field values are `null`.
103+
> * If the `schema.model.fields.[parentIdField]` is not nullable, root items will be the items which have a default value for their data type.
104+
>
105+
> When you use the `schema.model.fields` configuration, list all fields. Set the field which represents the `id` through the `schema.model.id`. If these are not set, they will work for displaying data but will post incomplete objects to the server when editing items.
106+
107+
```javascript
108+
let myDataArray = [
109+
{ID: 1, Name: "Tom", Date: "10/15/2022", parentId: null},
110+
{ID: 2, Name: "John", Date: "11/25/2022", parentId: 1},
111+
{ID: 3, Name: "Annie", Date: "05/09/2022", parentId: 1},
112+
{ID: 4, Name: "Rachel", Date: "08/06/2022", parentId: 2},
113+
{ID: 5, Name: "Klemens", Date: "10/07/2022", parentId: 4},
114+
{ID: 6, Name: "Micah", Date: "05/19/2022", parentId: 3},
115+
{ID: 7, Name: "Junie", Date: "04/04/2022", parentId: 3},
116+
{ID: 8, Name: "Krishnah", Date: "07/19/2022", parentId: 7},
117+
{ID: 9, Name: "Enrichetta", Date: "01/11/2022", parentId: 8},
118+
{ID: 10, Name: "Marten", Date: "02/13/2022", parentId: 9},
119+
{ID: 11, Name: "Rosmunda", Date: "08/15/2022", parentId: 9},
120+
{ID: 12, Name: "Regan", Date: "08/15/2022", parentId: 2},
121+
{ID: 13, Name: "Drew", Date: "08/15/2022", parentId: 2},
122+
{ID: 14, Name: "Bevis", Date: "08/15/2022", parentId: 4},
123+
{ID: 15, Name: "Olga", Date: "08/15/2022", parentId: 4},
124+
{ID: 16, Name: "Robert", Date: "08/15/2022", parentId: 6},
125+
{ID: 17, Name: "Priscilla", Date: "08/15/2022", parentId: 6},
126+
{ID: 18, Name: "Oren", Date: "08/15/2022", parentId: 6},
127+
{ID: 19, Name: "Thomas", Date: "08/15/2022", parentId: 6},
128+
{ID: 20, Name: "Keiko", Date: "08/15/2022", parentId: 5},
129+
];
130+
131+
$("#treelist").kendoTreeList({
132+
dataSource: {
133+
data: myDataArray,
134+
schema: {
135+
model: {
136+
id: "ID",
137+
parentId: "parentId",
138+
expanded: true,
139+
fields: {
140+
Date: { type: "date" }
141+
}
142+
}
143+
}
144+
}
145+
});
146+
```
147+
148+
## 4. Configure the TreeList Columns
149+
150+
The TreeList enables you to configure each individual column and apply a set of [column properties](/api/javascript/ui/treelist/configuration/columns#related-properties).
151+
152+
```javascript
153+
$("#treelist").kendoTreeList({
154+
columns: [
155+
{ field: "Name" },
156+
{ field: "Date", format: "{0:dd-MM-yyyy}" },
157+
{ title: "Edit", command: [ "edit" ]}
158+
]
159+
});
160+
```
161+
162+
## 5. Add Editing and Filtering
163+
164+
Among other functionalities, the TreeList supports editing and filtering. The [editing]({% slug editing_kendoui_treelist_widget %}) feature enables users to edit individual TreeList cells. The [filtering]({% slug filtering_kendoui_treelist_widget %}) feature allows users to filter the data inside the TreeList.
165+
166+
```javascript
167+
$("#treelist").kendoTreeList({
168+
toolbar: ["create"],
169+
// Enable filtering.
170+
filterable: true,
171+
// Enable editing.
172+
editable: "inline",
173+
});
174+
```
175+
176+
## Next Steps
177+
178+
* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
179+
* [Demo Page for the Kendo UI for jQuery TreeList](https://demos.telerik.com/kendo-ui/treelist/index)
180+
181+
## See Also
182+
183+
* [JavaScript API Reference of the TreeList](/api/javascript/ui/treelist)
184+
* [Knowledge Base Section](/knowledge-base)
185+
186+
<script>
187+
window.onload = function() {
188+
document.getElementsByClassName("btn-run")[0].click();
189+
}
190+
</script>

‎docs/controls/data-management/treelist/images/treelist-overview.png

31.9 KB
Loading

‎docs/controls/data-management/treelist/overview.md

Lines changed: 16 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,35 @@
11
---
22
title: Overview
33
page_title: jQuery TreeList Documentation - TreeList Overview
4-
description: "Get started with the jQuery TreeList by Kendo UI and learn how to initialize and configure the component."
4+
description: "Try now the Kendo UI for jQuery TreeList component providing sorting, filtering, and data editing capabilities."
55
slug: overview_kendoui_treelist_widget
6-
position: 1
6+
position: 0
77
---
88

99
# {{ site.product }} TreeList Overview
1010

1111
The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing.
1212

13-
* [Demo page for the TreeList](https://demos.telerik.com/kendo-ui/treelist/index)
14-
15-
## Basic Configuration
16-
17-
To initialize a the TreeList, use an empty `div` element and supply all TreeList settings in the initialization script.
18-
19-
<!-- Define the HTML div that is going to hold the TreeList -->
20-
<div id="treelist"></div>
21-
22-
Kendo UI TreeList needs a data source from which it will retrieve the data for display. The component uses a special [`kendo.data.TreeListDataSource`](/api/javascript/data/treelistdatasource) type which contains instances of a custom [`kendo.data.TreeListModel`](/api/javascript/data/treelistmodel) that represents the data items.
23-
24-
The TreeList renders its hierarchy based on the `parentId`-`id` relationship. The data objects contain both an `id` and a `parentId` field which describe the hierarchy of the items. You can change these field names by using the [`schema.model` definition](/api/javascript/data/datasource/configuration/schema#schema.model).
25-
26-
> * The TreeList distinguishes the root items based on the `parentId`.
27-
> * If the `schema.model.fields.[parentIdField]` is nullable, root items will be the items whose `parentId` field values are `null`.
28-
> * If the `schema.model.fields.[parentIdField]` is not nullable, root items will be the items which have a default value for their data type.
29-
> * When you use the `schema.model.fields` configuration, list all fields. Set the field which represents the `id` through the `schema.model.id`. If these are not set, they will still work for displaying data but will post incomplete objects on the server when editing items.
30-
31-
The following example demonstrates how to map the `parentId` field to the corresponding `parentId` field in the data. The schema definition will inform the data source that the `ReportsTo` field is the `parentId` field.
32-
33-
```
34-
schema:{
35-
model:{
36-
parentId: "ReportsTo",
37-
fields:{
38-
ReportsTo: { type: "number", nullable: true }
39-
}
40-
41-
}
42-
}
43-
```
13+
![Kendo UI for jQuery TreeList Overview](images/treelist-overview.png)
4414

4515
## Functionality and Features
4616

47-
* [Data binding]({% slug databinding_kendoui_treelist %})
48-
* [Editing]({% slug editing_kendoui_treelist_widget %})
49-
* [Paging]({% slug paging_kendoui_treelist %})
50-
* [Scrolling]({% slug scrolling_kendoui_treelist %})
51-
* [Multi-column headers]({% slug multicolumnheaders_kendoui_treelist %})
52-
* [Row Selection]({% slug selection_kendoui_treelist %})
53-
* [Accessibility]({% slug accessibility_kendoui_treelist %})
54-
55-
## Events, Fields, and Methods
56-
57-
The following example demonstrates how to use [methods](/api/javascript/ui/treelist#methods) and [fields](/api/javascript/ui/treelist#fields) of the TreeList.
58-
59-
```dojo
60-
<div id="treelist"></div>
61-
<script>
62-
$("#treelist").kendoTreeList({
63-
columns: [
64-
{ field: "Name" },
65-
{ field: "Position" }
66-
],
67-
dataSource: {
68-
data: [
69-
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
70-
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
71-
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
72-
]
73-
}
74-
});
75-
76-
// Get a reference to the kendo.ui.TreeList instance.
77-
var treelist = $("#treelist").data("kendoTreeList");
78-
79-
// Use the expand method to expand the first row.
80-
treelist.expand($("#treelist tbody>tr:eq(0)"));
81-
</script>
82-
```
83-
84-
To handle the [events](/api/javascript/ui/treelist#events) of the TreeList, use either of the following approaches:
85-
86-
* Specify the JavaScript function which will handle the event during the initialization of the component.
87-
* Use the `bind` method of the component after initialization.
88-
89-
The event handler is the JavaScript function that is invoked when the event is fired. The argument of the event handler is a JavaScript object which contains event-specific data. Get a reference of the component which fired the event through the `sender` field of the event argument. The function context of the event handler which is available through the `this` keyword is set to the instance of the component which fired the event. For a runnable example, refer to the [demo on using the events of the TreeList](https://demos.telerik.com/kendo-ui/treelist/events).
90-
91-
The following example demonstrates how to subscribe to a TreeList event during the initialization of the component.
92-
93-
```dojo
94-
<div id="treelist"></div>
95-
<script>
96-
$("#treelist").kendoTreeList({
97-
columns: [
98-
{ field: "Name" },
99-
{ field: "Position" }
100-
],
101-
dataSource: {
102-
data: [
103-
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
104-
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
105-
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
106-
]
107-
},
108-
dataBound: function(e) {
109-
console.log("dataBound");
110-
}
111-
});
112-
</script>
113-
```
114-
115-
The following example demonstrates how to subscribe to a TreeList event by using the `bind` method.
116-
117-
```dojo
118-
<div id="treelist"></div>
119-
<script>
120-
function treelist_databound(e) {
121-
console.log("dataBound");
122-
}
123-
$("#treelist").kendoTreeList({
124-
columns: [
125-
{ field: "Name" },
126-
{ field: "Position" }
127-
],
128-
dataSource: {
129-
data: [
130-
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
131-
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
132-
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
133-
]
134-
}
135-
});
136-
var treelist = $("#treelist").data("kendoTreeList");
137-
treelist.bind("dataBound", treelist_databound);
138-
</script>
139-
```
140-
141-
## Referencing Existing Instances
17+
* [Data binding]({% slug databinding_kendoui_treelist %})&#8212;The TreeList provides options for binding it to local arrays and remote data.
18+
* [Editing]({% slug editing_kendoui_treelist_widget %})&#8212;You can also use the available built-in editing functionality of the TreeList.
19+
* [Paging]({% slug paging_kendoui_treelist %})&#8212;The TreeList component supports client-side paging for large sets of data.
20+
* [Scrolling]({% slug scrolling_kendoui_treelist %})&#8212;You can also scroll through the TreeList data when using large data sets.
21+
* [Multi-column headers]({% slug multicolumnheaders_kendoui_treelist %})&#8212;The TreeList component enables you to render a tree-like structure where one or more columns can be grouped together by a common header.
22+
* [Row selection]({% slug selection_kendoui_treelist %})&#8212;The TreeList enables you to select rows by clicking on a row or by clicking on a checkbox.
23+
* [Accessibility]({% slug accessibility_kendoui_treelist %})&#8212;The TreeList is accessible by screen readers.
14224

143-
To refer to an existing TreeList instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method and pass `"kendoTreeList"` as an argument. Once a reference has been established, use the [API of the TreeList](/api/javascript/ui/treelist) to control its behavior.
25+
## Next Steps
14426

145-
```dojo
146-
<div id="treelist"></div>
147-
<script>
148-
$("#treelist").kendoTreeList({
149-
columns: [
150-
{ field: "Name" },
151-
{ field: "Position" }
152-
],
153-
dataSource: {
154-
data: [
155-
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
156-
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
157-
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
158-
]
159-
}
160-
});
161-
// Get a reference to the kendo.ui.TreeList instance.
162-
var treelist = $("#treelist").data("kendoTreeList");
163-
</script>
164-
```
27+
* [Getting Started with the Kendo UI TreeList for jQuery]({% slug getting_started_kendoui_treelist_component %})
28+
* [Basic Usage of the jQuery TreeList (Demo)](https://demos.telerik.com/kendo-ui/treelist/index)
29+
* [JavaScript API Reference of the TreeList](/api/javascript/ui/treelist)
16530

16631
## See Also
16732

168-
* [Basic Usage of the TreeList (Demo)](https://demos.telerik.com/kendo-ui/treelist/index)
33+
* [Product Page of the Kendo UI for jQuery TreeList](https://www.telerik.com/kendo-jquery-ui/treelist)
16934
* [Using the API of the TreeList (Demo)](https://demos.telerik.com/kendo-ui/treelist/api)
170-
* [TreeList JavaScript API Reference](/api/javascript/ui/treelist)
35+
* [Knowledge Base Section](/knowledge-base)

0 commit comments

Comments
 (0)