Skip to content

Commit 5dceb2e

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 1992892 commit 5dceb2e

File tree

7 files changed

+311
-34
lines changed

7 files changed

+311
-34
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ html-helpers/navigation/radiobutton/razor-page.md,
116116
html-helpers/navigation/stepper/razor-page.md,
117117
html-helpers/navigation/wizard/razor-page.md,
118118
html-helpers/scheduling/gantt/razor-page.md,
119+
html-helpers/scheduling/gantt/binding/razor-page.md,
119120
html-helpers/scheduling/scheduler/binding/razor-page.md,
120121
html-helpers/scheduling/scheduler/binding/signalr-binding.md,
121122
html-helpers/navigation/tabstrip/razor-page.md,

‎docs-aspnet/html-helpers/scheduling/gantt/binding/ajax-binding.md‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
---
2+
title: Ajax Binding
3+
page_title: Ajax Binding
4+
description: "Learn how to configure the Telerik UI Gantt for {{ site.framework }} to use Ajax binding"
5+
slug: htmlhelpers_gantt_ajaxbinding_aspnetcore
6+
position: 1
7+
---
8+
9+
# Ajax Binding
10+
11+
You can bind the Telerik UI Gantt for {{ site.framework }} using Ajax binding to load and process tasks and dependencies through server-side Action methods.
12+
13+
For a complete example, refer to the [Basic Usage Demo of the Gantt component](https://demos.telerik.com/{{ site.platform }}/gantt/basic-usage).
14+
15+
To configure the Gantt for Ajax data binding, follow the next steps:
16+
17+
1. Set up the Gantt’s DataSource configuration
18+
- Specify the action methods for the CRUD operations in the `Read`, `Create`, `Update`, and `Destroy` options of the `DataSource` and `DependencyDataSource` configurations.
19+
- Define the unique Model identifier in the `Id()` option of the `Model` configuration of each DataSource. In addition, map the required Model fields, such as `ParentID`, `Start`, `End`, `Expanded`, and more, in the `Model` configuration.
20+
- Configure the additional Gantt settings like views, columns, and more.
21+
22+
```HtmlHelper
23+
@using Kendo.Mvc.Examples.Models.Gantt;
24+
25+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
26+
.Name("gantt")
27+
.Columns(columns =>
28+
{
29+
columns.Bound(c => c.TaskID).Title("ID").Width(50);
30+
columns.Bound(c => c.Title).Editable(true).Sortable(true);
31+
columns.Group(g =>
32+
{
33+
g.Bound(c => c.Start).Width(100).Editable(true).Sortable(true);
34+
g.Bound(c => c.End).Width(100).Editable(true).Sortable(true);
35+
}).Title("Timings");
36+
})
37+
.Views(views =>
38+
{
39+
views.DayView();
40+
views.WeekView(weekView => weekView.Selected(true));
41+
views.MonthView();
42+
})
43+
.Height(700)
44+
.ShowWorkHours(false)
45+
.ShowWorkDays(false)
46+
.Snap(false)
47+
.DataSource(d => d
48+
.Model(m =>
49+
{
50+
m.Id(f => f.TaskID);
51+
m.ParentId(f => f.ParentID);
52+
m.Field(f => f.Expanded).DefaultValue(true);
53+
})
54+
.Read("Basic_Usage_ReadTasks", "Gantt")
55+
.Destroy("Basic_Usage_DestroyTask", "Gantt")
56+
.Update(update => update.Action("Basic_Usage_UpdateTask", "Gantt").Data("onUpdateCreate"))
57+
.Create(create => create.Action("Basic_Usage_CreateTask", "Gantt").Data("onUpdateCreate"))
58+
)
59+
.DependenciesDataSource(d => d
60+
.Model(m =>
61+
{
62+
m.Id(f => f.DependencyID);
63+
m.PredecessorId(f => f.PredecessorID);
64+
m.SuccessorId(f => f.SuccessorID);
65+
})
66+
.Read("Basic_Usage_ReadDependencies", "Gantt")
67+
.Create("Basic_Usage_CreateDependency", "Gantt")
68+
.Destroy("Basic_Usage_DestroyDependency", "Gantt")
69+
)
70+
)
71+
72+
<script>
73+
// Send the dates for the newly creted/updated tasks as UTC strings
74+
function onUpdateCreate(e) {
75+
e.End = e.End.toISOString();
76+
e.Start = e.Start.toISOString();
77+
}
78+
</script>
79+
```
80+
81+
{% if site.core %}
82+
83+
```TagHelper
84+
@addTagHelper *, Kendo.Mvc
85+
86+
<kendo-gantt snap="false" height="700" show-work-days="false" show-work-hours="false" name="gantt">
87+
<columns>
88+
<gantt-column field="TaskID" title="ID" width="50px">
89+
</gantt-column>
90+
<gantt-column editable="true" field="title" title="Title" width="255px">
91+
</gantt-column>
92+
<gantt-column title="Timings">
93+
<columns>
94+
<gantt-column field="start" editable="true" title="Start Date" width="100">
95+
<sortable enabled="true"/>
96+
</gantt-column>
97+
<gantt-column field="end" editable="true" title="End Date" width="100">
98+
<sortable enabled="true" />
99+
</gantt-column>
100+
</columns>
101+
</gantt-column>
102+
</columns>
103+
<views>
104+
<gantt-view type="GanttViewType.Day">
105+
</gantt-view>
106+
<gantt-view selected="true" type="GanttViewType.Week">
107+
</gantt-view>
108+
<gantt-view type="GanttViewType.Month">
109+
</gantt-view>
110+
</views>
111+
<gantt-datasource type="DataSourceTagHelperType.Ajax">
112+
<schema data="Data" total="Total" errors="Errors">
113+
<model id="TaskID" parent-id="">
114+
<fields>
115+
<field name="TaskID" type="number"></field>
116+
<field name="parentId" from="ParentID" type="number" default-value="null"></field>
117+
<field name="title" from="Title" type="string"></field>
118+
<field name="start" from="Start" type="date"></field>
119+
<field name="end" from="End" type="date"></field>
120+
<field name="summary" from="Summary" type="boolean"></field>
121+
<field name="expanded" from="Expanded" type="boolean" default-value="true"></field>
122+
<field name="percentComplete" from="PercentComplete" type="number"></field>
123+
<field name="orderId" from="OrderId" type="number"></field>
124+
</fields>
125+
</model>
126+
</schema>
127+
<transport >
128+
<read url="@Url.Action("Basic_Usage_ReadTasks","Gantt")" />
129+
<update data="onUpdateCreate" url="@Url.Action("Basic_Usage_UpdateTask","Gantt")" />
130+
<create data="onUpdateCreate" url="@Url.Action("Basic_Usage_CreateTask","Gantt")" />
131+
<destroy url="@Url.Action("Basic_Usage_DestroyTask","Gantt")" />
132+
</transport>
133+
</gantt-datasource>
134+
<dependency-datasource name="dependencies" type="DataSourceTagHelperType.Ajax">
135+
<transport>
136+
<read url="@Url.Action("Basic_Usage_ReadDependencies", "Gantt")" />
137+
<create url="@Url.Action("Basic_Usage_CreateDependency", "Gantt")" />
138+
<destroy url="@Url.Action("Basic_Usage_DestroyDependency", "Gantt")" />
139+
</transport>
140+
<schema>
141+
<model id="DependencyID">
142+
<fields>
143+
<field name="DependencyID" type="number"></field>
144+
<field name="predecessorId" from="PredecessorID" type="number"></field>
145+
<field name="successorId" from="SuccessorID" type="number"></field>
146+
<field name="type" from="Type" type="number"></field>
147+
</fields>
148+
</model>
149+
</schema>
150+
</dependency-datasource>
151+
</kendo-gantt>
152+
<script>
153+
// Send the dates for the newly creted/updated tasks as UTC strings
154+
function onUpdateCreate(e) {
155+
e.End = e.End.toISOString();
156+
e.Start = e.Start.toISOString();
157+
}
158+
</script>
159+
```
160+
{% endif %}
161+
162+
2. Define the Action methods in the Controller
163+
* Create action methods for reading, creating, updating, and deleting tasks and dependencies.
164+
* Each action method must return a JSON result using the `ToDataSourceResult(request, ModelState)` method for proper binding and validation handling.
165+
166+
```Controller
167+
public partial class GanttController : Controller
168+
{
169+
public ActionResult Basic_Usage()
170+
{
171+
return View();
172+
}
173+
174+
public virtual JsonResult Basic_Usage_ReadTasks([DataSourceRequest] DataSourceRequest request)
175+
{
176+
return Json(taskService.GetAll().ToDataSourceResult(request));
177+
}
178+
179+
public virtual JsonResult Basic_Usage_DestroyTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
180+
{
181+
if (ModelState.IsValid)
182+
{
183+
taskService.Delete(task, ModelState);
184+
}
185+
186+
return Json(new[] { task }.ToDataSourceResult(request, ModelState));
187+
}
188+
189+
public virtual JsonResult Basic_Usage_CreateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
190+
{
191+
if (ModelState.IsValid)
192+
{
193+
taskService.Insert(task, ModelState);
194+
}
195+
196+
return Json(new[] { task }.ToDataSourceResult(request, ModelState));
197+
}
198+
199+
public virtual JsonResult Basic_Usage_UpdateTask([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
200+
{
201+
if (ModelState.IsValid)
202+
{
203+
taskService.Update(task, ModelState);
204+
}
205+
206+
return Json(new[] { task }.ToDataSourceResult(request, ModelState));
207+
}
208+
209+
public virtual JsonResult Basic_Usage_ReadDependencies([DataSourceRequest] DataSourceRequest request)
210+
{
211+
return Json(dependencyService.GetAll().ToDataSourceResult(request));
212+
}
213+
214+
public virtual JsonResult Basic_Usage_DestroyDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency)
215+
{
216+
if (ModelState.IsValid)
217+
{
218+
dependencyService.Delete(dependency);
219+
}
220+
221+
return Json(new[] { dependency }.ToDataSourceResult(request, ModelState));
222+
}
223+
224+
public virtual JsonResult Basic_Usage_CreateDependency([DataSourceRequest] DataSourceRequest request, DependencyViewModel dependency)
225+
{
226+
if (ModelState.IsValid)
227+
{
228+
dependencyService.Insert(dependency);
229+
}
230+
231+
return Json(new[] { dependency }.ToDataSourceResult(request, ModelState));
232+
}
233+
}
234+
```
235+
236+
## See Also
237+
238+
* [Gantt Basic Usage Demo](https://demos.telerik.com/{{ site.platform }}/gantt/basic-usage)
239+
* [Gantt Server-Side API](/api/gantt)
240+
{% if site.core %}
241+
* [Server-Side TagHelper API of the Gantt](/api/taghelpers/gantt)
242+
{% endif %}

‎docs-aspnet/html-helpers/scheduling/gantt/binding/overview.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: Overview
3+
page_title: Data Binding
4+
description: "Learn the basics approaches for binding the Telerik UI Gantt component for {{ site.framework }}."
5+
previous_url: /helpers/scheduling/gantt/server-binding, /helpers/scheduling/gantt/binding
6+
slug: htmlhelpers_gantt_databinding
7+
position: 0
8+
---
9+
10+
# Data Binding
11+
12+
The Gantt provides a set of options for binding it to data.
13+
14+
{% if site.has_cta_panels == true %}
15+
{% include cta-panel-introduction.html %}
16+
{% endif %}
17+
18+
The supported data-binding approaches are:
19+
20+
* [Ajax binding]({% slug htmlhelpers_gantt_ajaxbinding_aspnetcore %})
21+
* [Server binding]({% slug htmlhelpers_gantt_serverbinding_aspnetcore %})
22+
{% if site.core %}
23+
* [Razor Pages binding]({% slug htmlhelpers_gantt_razorpage_aspnetcore %})
24+
{% endif %}
25+
26+
## Model Requirements
27+
28+
The model that binds to the Gantt extends the `IGanttTask` and the `IGanttDependency` interfaces, whith the following properties:
29+
30+
```IGanttTask
31+
public interface IGanttTask
32+
{
33+
string Title { get; set; }
34+
DateTime Start { get; set; }
35+
DateTime End { get; set; }
36+
decimal PercentComplete { get; set; }
37+
int OrderId { get; set; }
38+
bool Summary { get; set; }
39+
bool Expanded { get; set; }
40+
}
41+
```
42+
43+
```IGanttDependency
44+
public interface IGanttDependency
45+
{
46+
DependencyType Type { get; set; }
47+
}
48+
```
49+
50+
## See Also
51+
52+
* [Server-Side API](/api/gantt)
53+
{% if site.core %}
54+
* [Server-Side TagHelper API](/api/taghelpers/gantt)
55+
{% endif %}

‎docs-aspnet/html-helpers/scheduling/gantt/razor-page.md‎ renamed to ‎docs-aspnet/html-helpers/scheduling/gantt/binding/razor-page.md‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Razor Pages
33
page_title: Razor Pages
44
description: "An example on how to configure the Telerik UI Gantt component for {{ site.framework }} in a Razor Page."
55
slug: htmlhelpers_gantt_razorpage_aspnetcore
6-
position: 10
6+
position: 3
77
---
88

99
# Gantt in Razor Pages
@@ -27,7 +27,6 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
2727
@model IndexModel
2828
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
2929
@Html.AntiForgeryToken()
30-
3130
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
3231
.Name("gantt")
3332
.Columns(columns =>
@@ -70,7 +69,6 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
7069
.Read(r => r.Url("/Gantt/GanttIndex?handler=DependenciesRead").Data("forgeryToken"))
7170
)
7271
)
73-
7472
<script>
7573
function forgeryToken() {
7674
return kendo.antiForgeryTokens();
@@ -84,7 +82,6 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
8482
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
8583
@Html.AntiForgeryToken()
8684
@addTagHelper *, Kendo.Mvc
87-
8885
<kendo-gantt snap="false" height="700" show-work-days="false" show-work-hours="false" name="gantt">
8986
<columns>
9087
<gantt-column field="TaskID" title="ID" width="50px">
@@ -156,9 +153,7 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
156153
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
157154
@Html.AntiForgeryToken()
158155
```
159-
160156
1. Send the `AntiForgeryToken` with the Read request.
161-
162157
```JavaScript
163158
<script>
164159
function forgeryToken() {
@@ -168,7 +163,6 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
168163
```
169164
170165
Additional parameters can also be supplied.
171-
172166
```JavaScript
173167
<script>
174168
function forgeryToken() {
@@ -179,9 +173,7 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
179173
}
180174
</script>
181175
```
182-
183176
1. Within the `cshtml.cs` file, add a handler method for each data operation.
184-
185177
```C# Index.cshtml.cs
186178
public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
187179
{
@@ -246,9 +238,7 @@ To configure the CRUD operations of the Gantt DataSource within a Razor Pages ap
246238
return new JsonResult(new[] { dependency }.ToDataSourceResult(request, ModelState));
247239
}
248240
```
249-
250241
## See Also
251-
252242
* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
253243
* [Client-Side API of the Gantt](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt)
254244
* [Server-Side HtmlHelper API of the Gantt](/api/gantt)

0 commit comments

Comments
 (0)