Skip to content

Commit 13260b8

Browse files
gyoshevgyoshev
committed
Add conceptual help topics for php / jsp
1 parent c8193e4 commit 13260b8

File tree

2 files changed

+179
-0
lines changed

2 files changed

+179
-0
lines changed

‎jsp/tags/treelist/overview.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Overview
3+
---
4+
5+
# TreeList
6+
7+
The TreeList tag is a server-side wrapper for the [Kendo UI TreeList](/api/web/treelist) widget.
8+
9+
## Getting Started
10+
11+
Here is how to configure the Kendo TreeList for binding to a data passed as model attribute in Spring MVC:
12+
13+
1. Make sure you have followed all the steps from the [Introduction](/jsp/introduction) help topic.
14+
15+
2. Create a new action method and pass the Products table to the View:
16+
17+
@RequestMapping(value = "/local-data", method = RequestMethod.GET)
18+
public String index(Locale locale, Model model) {
19+
model.addAttribute("products", product.getList());
20+
21+
return "web/treelist/local-data";
22+
}
23+
24+
3. Add kendo taglib mapping to the page
25+
26+
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
27+
28+
4. Add a server bound treelist:
29+
30+
<kendo:treeList name="employees" pageable="true">
31+
<kendo:treeList-columns>
32+
<kendo:treeList-column title="Product Name" field="productName" />
33+
<kendo:treeList-column title="Unit Price" field="unitPrice" format="{0:c}" />
34+
<kendo:treeList-column title="Units In Stock" field="unitsInStock" />
35+
</kendo:treeList-columns>
36+
<kendo:dataSource data="${products}" pageSize="10"/>
37+
<kendo:treeList-pageable input="true" numeric="false" />
38+
</kendo:treeList>
39+
40+
## Accessing an Existing TreeList
41+
42+
You can reference an existing TreeList instance via [jQuery.data()](http://api.jquery.com/jQuery.data/).
43+
Once a reference has been established, you can use the [API](/api/web/treelist#methods) to control its behavior.
44+
45+
### Accessing an existing TreeList instance
46+
47+
//Put this after your Kendo TreeList tag declaration
48+
<script>
49+
$(function() {
50+
// Notice that the name attribute of the treelist is used to get its client-side instance
51+
var treelist = $("#employees").data("kendoTreeList");
52+
});
53+
</script>
54+
55+
56+
## Handling Kendo UI TreeList events
57+
58+
You can subscribe to all [events](/api/web/treelist#events) exposed by Kendo UI TreeList:
59+
60+
61+
### Subscribe by handler name
62+
63+
<kendo:treeList name="employees" dataBound="employees_dataBound" change="employees_change">
64+
<kendo:dataSource data="${data}" pageSize="10"/>
65+
</kendo:treeList>
66+
67+
<script>
68+
function employees_dataBound() {
69+
//Handle the dataBound event
70+
}
71+
72+
function employees_change() {
73+
//Handle the change event
74+
}
75+
</script>
76+

‎php/widgets/treelist/overview.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Overview
3+
page_title: How to use the TreeList PHP class, server-side wrapper for Kendo UI TreeList widget
4+
description: Learn how to bind Kendo UI TreeList for PHP, handle Kendo UI TreeList Events, access an existing treelist.
5+
---
6+
7+
# TreeList
8+
9+
The Kendo TreeList for PHP is a server-side wrapper for the [Kendo UI TreeList](/api/web/treelist) widget.
10+
11+
## Getting Started
12+
13+
There are three ways to bind Kendo TreeList for PHP:
14+
15+
* [local](/php/widgets/treelist/local-data-binding) - the treelist is bound to PHP array
16+
* [remote loading of all items](/php/widgets/treelist/index) - the treelist makes a single AJAX request that fetches all elements and is bound to JSON result
17+
* [remote loading on demand](/php/widgets/treelist/remote-data-binding) - the treelist makes AJAX requests when the user expands an item and is bound to JSON result
18+
19+
Here is how to configure the treelist for local binding:
20+
21+
1. Follow the steps from the [introduction](/php/introduction) - include the autoloader, JavaScript and CSS files.
22+
2. Create an array which to which the treelist will be bound to
23+
24+
<?php
25+
$data = array(
26+
array('name' => 'John Doe', 'age' => 32, 'parentId' => null),
27+
array('name' => 'Jane Doe', 'age' => 29, 'parentId' => null)
28+
);
29+
?>
30+
3. Create a [data source](/api/wrappers/php/Kendo/Data/DataSource) and set its [data](/api/wrappers/php/Kendo/Data/DataSource#data):
31+
32+
<?php
33+
$dataSource = new \Kendo\Data\DataSource();
34+
$dataSource->data($data);
35+
?>
36+
4. Create a [treelist](/api/wrappers/php/Kendo/UI/TreeList), configure its [columns](/api/wrappers/php/Kendo/UI/TreeList#addcolumn) and set its [data source](/api/wrappers/php/Kendo/UI/TreeList#datasource).
37+
38+
<?php
39+
$nameColumn = new \Kendo\UI\TreeListColumn();
40+
$nameColumn->field('name');
41+
42+
$ageColumn = new \Kendo\UI\TreeListColumn();
43+
$ageColumn->field('age');
44+
45+
$treelist = new \Kendo\UI\TreeList('treelist');
46+
$treelist->addColumn($nameColumn, $ageColumn)
47+
->dataSource($dataSource);
48+
?>
49+
5. Output the treelist by echo-ing the result of the [render](/api/wrappers/php/Kendo/UI/Widget#render) method.
50+
51+
<?php
52+
echo $treelist->render();
53+
?>
54+
55+
## Getting Client-side Reference
56+
57+
You can reference the clien-side Kendo TreeList instance via [jQuery.data()](http://api.jquery.com/jQuery.data/).
58+
Once a reference has been established, you can use the [API](/api/web/treelist#methods) to control its behavior.
59+
60+
61+
### Example
62+
63+
<?php
64+
$treelist = new \Kendo\UI\TreeList('employees');
65+
echo $treelist->render();
66+
?>
67+
<script>
68+
$(function() {
69+
// The constructor parameter is used as the 'id' HTML attribute of the treelist
70+
var treelist = $("#employees").data("kendoTreeList")
71+
});
72+
</script>
73+
74+
## Handling Events
75+
76+
You can subscribe to all treelist [events](/api/web/treelist#events).
77+
78+
### Example - subscribing by specifying JavaScript function name
79+
80+
<?php
81+
$treelist = new \Kendo\UI\TreeList('treelist');
82+
83+
// The 'treelist_dataBound' JavaScript function will handle the 'dataBound' event of the treelist
84+
$treelist->dataBound('treelist_dataBound');
85+
86+
echo $treelist->render();
87+
?>
88+
<script>
89+
function treelist_dataBound() {
90+
// Handle the dataBound event
91+
}
92+
</script>
93+
94+
### Example - providing inline JavaScript code
95+
96+
<?php
97+
$treelist = new \Kendo\UI\TreeList('treelist');
98+
99+
// Provide inline JavaScript code that will handle the 'dataBound' event of the treelist
100+
$treelist->dataBound('function() { /* Handle the dataBound event */ }');
101+
102+
echo $treelist->render();
103+
?>

0 commit comments

Comments
 (0)