Skip to content

Commit d9639f7

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 6068f13 commit d9639f7

File tree

6 files changed

+617
-3
lines changed

6 files changed

+617
-3
lines changed

‎docs/knowledge-base/dropdownlist-cascading-angularjs-webapi.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: Cascading DropDownLists Using Transport Binding with AngularJS and WebAPI
3+
description: An example on how to implement cascading dropdownlists, with transport binding with webapi with angularjs
4+
type: how-to
5+
page_title: Implement Cascading DropDownLists with AngularJS, Using Transport Binding and WebAPI | Kendo DropDownList
6+
slug: dropdownlist-cascading-angularjs-webapi
7+
position: 0
8+
tags: kendo, kendoui, dropdownlist, cascading, webapi, transport, datasource, angularjs
9+
ticketid: 1142461
10+
res_type: kb
11+
12+
---
13+
14+
## Environment
15+
<table>
16+
<tr>
17+
<td>Product</td>
18+
<td>DropDownList for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Operating System</td>
22+
<td>Windows 10 64bit</td>
23+
</tr>
24+
<tr>
25+
<td>Browser</td>
26+
<td>Google Chrome</td>
27+
</tr>
28+
<tr>
29+
<td>Browser Version</td>
30+
<td>Lastest</td>
31+
</tr>
32+
</table>
33+
34+
35+
## Description
36+
37+
How can I have cascading DropDownLists configured with transport data binding. I need to implement this with WebAPI and I use AnguarJS
38+
39+
## Solution
40+
41+
In order to achieve the desired functionality, you should have the child dropdownlist configured to be aware of his parent widget and from which fields it should cascade. This should be achieved, by setting the **k-cascade-from** and **k-cascade-from-field**.
42+
43+
The example below, demonstrates full implementation of the scenario:
44+
45+
```html
46+
47+
<div id="example" ng-app="KendoDemos">
48+
<div class="demo-section k-content" ng-controller="MyCtrl">
49+
<input kendo-drop-down-list
50+
id="dropdownlist1"
51+
options="dropDownOptions"
52+
k-data-text-field="'Name'"
53+
k-data-value-field="'Id'"/>
54+
55+
<input kendo-drop-down-list
56+
id="dropdownlist1"
57+
k-data-text-field="'Name'"
58+
k-data-value-field="'Id'"
59+
k-cascade-from="'dropdownlist1'"
60+
k-cascade-from-field="'ProductType'"
61+
options="subDropDownOptions"/>
62+
</div>
63+
</div>
64+
<script>
65+
angular.module("KendoDemos", [ "kendo.directives" ])
66+
.controller("MyCtrl", function($scope){
67+
$scope.dropDownOptions = {
68+
optionLabel: "select",
69+
dataSource: {
70+
type: "webapi",
71+
serverFiltering: true,
72+
transport: {
73+
read: {
74+
url: "api/products/get"
75+
}
76+
},
77+
schema: {
78+
data: "Data",
79+
total: "Total",
80+
errors: "Errors"
81+
}
82+
}
83+
};
84+
$scope.subDropDownOptions = {
85+
dataSource: {
86+
type: "webapi",
87+
serverFiltering: true,
88+
transport: {
89+
read: {
90+
url: "api/products/getchild"
91+
}
92+
},
93+
schema: {
94+
data: "Data",
95+
total: "Total",
96+
errors: "Errors"
97+
}
98+
}
99+
};
100+
101+
})
102+
</script>
103+
104+
---------Controller Implementatoin-------------
105+
public class ProductsController : ApiController
106+
{
107+
[Route("api/Products/Get")]
108+
[HttpGet]
109+
public DataSourceResult Get([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
110+
{
111+
var products = new List<ProductType>
112+
{
113+
new ProductType { Name = "Product 1", Id = 1 },
114+
new ProductType{ Name = "Product 2", Id = 2},
115+
new ProductType { Name = "Product 3", Id = 3 }
116+
};
117+
118+
return products.ToDataSourceResult(request);
119+
}
120+
121+
[Route("api/Products/GetChild")]
122+
[HttpGet]
123+
public DataSourceResult GetChild([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
124+
{
125+
126+
var products = new List<Product>
127+
{
128+
new Product { Name = "Sub of Type 1 -1", Id = 1, ProductType= 1},
129+
new Product { Name = "Sub of Type 1 -2", Id = 2 , ProductType= 1},
130+
new Product { Name = "Sub of Type 1 -3", Id = 3 , ProductType= 1},
131+
new Product { Name = "Sub of Type 2 -1", Id = 4, ProductType= 2},
132+
new Product { Name = "Sub of Type 2 -2", Id = 5 , ProductType= 2},
133+
new Product { Name = "Sub of Type 2 -3", Id = 6 , ProductType= 2},
134+
new Product { Name = "Sub of Type 3 -1", Id = 7, ProductType= 3},
135+
new Product { Name = "Sub of Type 3 -2", Id = 8 , ProductType= 3},
136+
new Product { Name = "Sub of Type 3 -3", Id = 9 , ProductType= 3},
137+
};
138+
139+
return products.ToDataSourceResult(request);
140+
}
141+
142+
}
143+
144+
```

‎docs/knowledge-base/gantt-expand-collapse-alltasks.md‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
---
2+
title: Gantt Rows expand and Collapse All
3+
description: An example on how to implement a functionality to expand/collapse all tasks
4+
type: how-to
5+
page_title: Implement Expand/Collapse All Tasks on a Button Click | Kendo UI Gantt
6+
slug: gantt-expand-collapse-alltasks
7+
position: 0
8+
tags: kendo, kendoui, gantt, expand, collapse, all, tasks, button, click
9+
ticketid: 1142128
10+
pitsid:
11+
res_type: kb
12+
13+
---
14+
15+
## Environment
16+
<table>
17+
<tr>
18+
<td>Product</td>
19+
<td>Gantt for Progress® Kendo UI®</td>
20+
</tr>
21+
<tr>
22+
<td>Operating System</td>
23+
<td>Windows 7 64bit</td>
24+
</tr>
25+
<tr>
26+
<td>Browser</td>
27+
<td>Google Chrome</td>
28+
</tr>
29+
<tr>
30+
<td>Browser Version</td>
31+
<td>Version 62.0.3202.94 (Official Build) (64-bit)</td>
32+
</tr>
33+
</table>
34+
35+
36+
## Description
37+
38+
I would like to have a button on the page, which should be able to expand/collapse all tasks in my Gantt.
39+
40+
## Solution
41+
42+
In order to achieve the desired functionality, you should follow the steps below:
43+
44+
1. Add a button on your page and subscribe for its click event.
45+
1. In the click function, you can get a reference to the DataSource of the Gantt (all tasks rendered in it)
46+
1. Implement a loop, in order to iterate through all tasks.
47+
1. Use set("expanded", [true/false]), in order to manage the expanded state
48+
49+
```html
50+
51+
<div id="example">
52+
53+
<input class="k-button" type="button" value="Expand/Collapse"></input>
54+
55+
<div id="gantt"></div>
56+
57+
<script>
58+
$(document).ready(function() {
59+
$(".k-button").click(function(e) {
60+
var tasks = $("#gantt").data("kendoGantt").dataSource.view();
61+
var shouldExpand = !tasks[0].expanded;
62+
for (i = 0; i < tasks.length; i++) {
63+
64+
tasks[i].set("expanded", shouldExpand)
65+
}
66+
})
67+
68+
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
69+
var tasksDataSource = new kendo.data.GanttDataSource({
70+
transport: {
71+
read: {
72+
url: serviceRoot + "/GanttTasks",
73+
dataType: "jsonp"
74+
},
75+
update: {
76+
url: serviceRoot + "/GanttTasks/Update",
77+
dataType: "jsonp"
78+
},
79+
destroy: {
80+
url: serviceRoot + "/GanttTasks/Destroy",
81+
dataType: "jsonp"
82+
},
83+
create: {
84+
url: serviceRoot + "/GanttTasks/Create",
85+
dataType: "jsonp"
86+
},
87+
parameterMap: function(options, operation) {
88+
if (operation !== "read") {
89+
return {
90+
models: kendo.stringify(options.models || [options])
91+
};
92+
}
93+
}
94+
},
95+
schema: {
96+
model: {
97+
id: "id",
98+
fields: {
99+
id: {
100+
from: "ID",
101+
type: "number"
102+
},
103+
orderId: {
104+
from: "OrderID",
105+
type: "number",
106+
validation: {
107+
required: true
108+
}
109+
},
110+
parentId: {
111+
from: "ParentID",
112+
type: "number",
113+
defaultValue: null,
114+
validation: {
115+
required: true
116+
}
117+
},
118+
start: {
119+
from: "Start",
120+
type: "date"
121+
},
122+
end: {
123+
from: "End",
124+
type: "date"
125+
},
126+
title: {
127+
from: "Title",
128+
defaultValue: "",
129+
type: "string"
130+
},
131+
percentComplete: {
132+
from: "PercentComplete",
133+
type: "number"
134+
},
135+
summary: {
136+
from: "Summary",
137+
type: "boolean"
138+
},
139+
expanded: {
140+
from: "Expanded",
141+
type: "boolean",
142+
defaultValue: true
143+
}
144+
}
145+
}
146+
}
147+
});
148+
149+
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
150+
transport: {
151+
read: {
152+
url: serviceRoot + "/GanttDependencies",
153+
dataType: "jsonp"
154+
},
155+
update: {
156+
url: serviceRoot + "/GanttDependencies/Update",
157+
dataType: "jsonp"
158+
},
159+
destroy: {
160+
url: serviceRoot + "/GanttDependencies/Destroy",
161+
dataType: "jsonp"
162+
},
163+
create: {
164+
url: serviceRoot + "/GanttDependencies/Create",
165+
dataType: "jsonp"
166+
},
167+
parameterMap: function(options, operation) {
168+
if (operation !== "read") {
169+
return {
170+
models: kendo.stringify(options.models || [options])
171+
};
172+
}
173+
}
174+
},
175+
schema: {
176+
model: {
177+
id: "id",
178+
fields: {
179+
id: {
180+
from: "ID",
181+
type: "number"
182+
},
183+
predecessorId: {
184+
from: "PredecessorID",
185+
type: "number"
186+
},
187+
successorId: {
188+
from: "SuccessorID",
189+
type: "number"
190+
},
191+
type: {
192+
from: "Type",
193+
type: "number"
194+
}
195+
}
196+
}
197+
}
198+
});
199+
200+
var gantt = $("#gantt").kendoGantt({
201+
dataSource: tasksDataSource,
202+
dependencies: dependenciesDataSource,
203+
views: [
204+
"day",
205+
{
206+
type: "week",
207+
selected: true
208+
},
209+
"month"
210+
],
211+
columns: [{
212+
field: "id",
213+
title: "ID",
214+
width: 60
215+
},
216+
{
217+
field: "title",
218+
title: "Title",
219+
editable: true,
220+
sortable: true
221+
},
222+
{
223+
field: "start",
224+
title: "Start Time",
225+
format: "{0:MM/dd/yyyy}",
226+
width: 100,
227+
editable: true,
228+
sortable: true
229+
},
230+
{
231+
field: "end",
232+
title: "End Time",
233+
format: "{0:MM/dd/yyyy}",
234+
width: 100,
235+
editable: true,
236+
sortable: true
237+
}
238+
],
239+
height: 700,
240+
241+
showWorkHours: false,
242+
showWorkDays: false,
243+
244+
snap: false
245+
}).data("kendoGantt");
246+
});
247+
</script>
248+
</div>
249+
250+
```

0 commit comments

Comments
 (0)