Skip to content

Commit de0c969

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 66d6d7b commit de0c969

File tree

7 files changed

+681
-98
lines changed

7 files changed

+681
-98
lines changed

‎docs-aspnet/html-helpers/data-management/treelist/row-templates.md‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,56 @@ The Kendo UI TreeList supports a row template that enables you to place custom c
1313
For runnable example, refer to:
1414
* [Demo on using the row template of the TreeList HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/treelist/rowtemplate)
1515

16-
The following example demonstrates how to implement a row template by using its Id:
16+
The following example demonstrates how to implement row and alter row templates by using their Ids:
1717

18-
.Columns(columns =>
19-
{
20-
columns.Add().Field(e => e.FirstName).Title("Employee").Width(280).TemplateId("photo-template").Width(180);
21-
columns.Add().Field(e => e.Country).Title("Country").Width(160).TemplateId("country-template");
22-
columns.Add().Field(e => e.HireDate).Title("Length of Service").Width(160).TemplateId("lengthOfService-template");
23-
})
18+
.RowTemplateId("rowTemplate")
19+
.AltRowTemplateId("altRowTemplate")
2420

2521
The following scripts will generate the content for the templates:
2622

2723
```
28-
<script id="photo-template" type="text/x-kendo-template">
29-
<div class='employee-photo'
30-
style='background-image: url(@Url.Content("~/content/web/treelist/people")/#: EmployeeId #.jpg);'></div>
31-
<div class='employee-name'>#: FirstName # #: LastName # <span class = 'employee-position'>#: Position #</span></div>
24+
<script id="rowTemplate" type="text/x-kendo-template">
25+
<tr data-uid='#: data.model.uid #' role="row">
26+
<td role="gridcell">
27+
#for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
28+
<span class="k-icon k-i-none"></span>
29+
#}#
30+
#if(data.hasChildren){#
31+
<span class="k-icon k-i-#=data.model.expanded? 'collapse' : 'expand'#"></span>
32+
#}#
33+
<div class='employee-photo'
34+
style='background-image: url(@Url.Content("~/content/web/treelist/people")/#: data.model.EmployeeId #.jpg);'></div>
35+
<div class='employee-name'>#: data.model.FirstName # #: data.model.LastName # <span class = 'employee-position'>#: data.model.Position #</span></div>
36+
</td>
37+
<td role="gridcell">
38+
<img class= "county-flag" src="../Content/web/country-flags/#: data.model.CountryFlag #.png" />
39+
</td>
40+
<td role="gridcell">
41+
<span class='badgeTemplate'>#: Math.floor((kendo.date.today() - data.model.HireDate)/(365*24*60*60*1000)) #</span>
42+
</td>
43+
</tr>
3244
</script>
3345
34-
<script id="country-template" type="text/x-kendo-template">
35-
<img class= "county-flag" src="../Content/web/country-flags/#: CountryFlag #.png" />
36-
</script>
37-
38-
<script id="lengthOfService-template" type="text/x-kendo-template">
39-
<span id='badge_#=EmployeeId#' class='badgeTemplate'>#: Math.floor((kendo.date.today() - HireDate)/(365*24*60*60*1000)) #</span>
46+
<script id="altRowTemplate" type="text/x-kendo-template">
47+
<tr data-uid='#: data.model.uid #' role="row" class="k-alt">
48+
<td role="gridcell">
49+
#for(var i = 0; i < (hasChildren ? level : (level + 1)); i++){#
50+
<span class="k-icon k-i-none"></span>
51+
#}#
52+
#if(data.hasChildren){#
53+
<span class="k-icon k-i-#=data.model.expanded? 'collapse' : 'expand'#"></span>
54+
#}#
55+
<div class='employee-photo'
56+
style='background-image: url(@Url.Content("~/content/web/treelist/people")/#: data.model.EmployeeId #.jpg);'></div>
57+
<div class='employee-name'>#: data.model.FirstName # #: data.model.LastName # <span class = 'employee-position'>#: data.model.Position #</span></div>
58+
</td>
59+
<td role="gridcell">
60+
<img class= "county-flag" src="../Content/web/country-flags/#: data.model.CountryFlag #.png" />
61+
</td>
62+
<td role="gridcell">
63+
<span class='badgeTemplate'>#: Math.floor((kendo.date.today() - data.model.HireDate)/(365*24*60*60*1000)) #</span>
64+
</td>
65+
</tr>
4066
</script>
4167
```
4268

‎docs-aspnet/html-helpers/diagrams-and-maps/diagram/editing.md‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,41 @@ To enable the editing functionality of the Diagram:
1616

1717
1. Configure the DataSource for remote CRUD operations. You have to include the model declaration. The `Id` is mandatory to indicate which of the fields is the unique identifier.
1818

19-
.DataSource(d => d
20-
.ShapeDataSource()
21-
.Model(m =>
22-
{
23-
m.Id(s => s.Id);
24-
m.Field(s => s.Id).Editable(false);
25-
m.Field(s => s.JobTitle);
26-
m.Field(s => s.Color);
27-
})
28-
.Read("ReadShapes", "DiagramData")
29-
.Create("CreateShape", "DiagramData")
30-
.Destroy("DestroyShape", "DiagramData")
31-
.Update("UpdateShape", "DiagramData")
32-
)
19+
.DataSource(d => d
20+
.ShapeDataSource()
21+
.Model(m =>
22+
{
23+
m.Id(s => s.Id);
24+
m.Field(s => s.Id).Editable(false);
25+
m.Field(s => s.JobTitle);
26+
m.Field(s => s.Color);
27+
})
28+
.Read("ReadShapes", "DiagramData")
29+
.Create("CreateShape", "DiagramData")
30+
.Destroy("DestroyShape", "DiagramData")
31+
.Update("UpdateShape", "DiagramData")
32+
)
3333

3434
1. Configure the `ConnectionsDataSource` for remote CRUD operations. Without setting the `ConnectionsDataSource`, editing is disabled.
3535

36-
.ConnectionsDataSource(d => d
37-
.Model(m =>
38-
{
39-
m.Id(c => c.Id);
40-
m.Field(c => c.Id).Editable(false);
41-
m.Field(c => c.Text).Editable(false);
42-
m.From(c => c.FromShapeId);
43-
m.To(c => c.ToShapeId);
44-
m.FromX(c => c.FromPointX);
45-
m.FromY(c => c.FromPointY);
46-
m.ToX(c => c.ToPointX);
47-
m.ToY(c => c.ToPointY);
48-
})
49-
.Read("ReadConnections", "DiagramData")
50-
.Create("CreateConnection", "DiagramData")
51-
.Destroy("DestroyConnection", "DiagramData")
52-
.Update("UpdateConnection", "DiagramData")
53-
)
36+
.ConnectionsDataSource(d => d
37+
.Model(m =>
38+
{
39+
m.Id(c => c.Id);
40+
m.Field(c => c.Id).Editable(false);
41+
m.Field(c => c.Text).Editable(false);
42+
m.From(c => c.FromShapeId);
43+
m.To(c => c.ToShapeId);
44+
m.FromX(c => c.FromPointX);
45+
m.FromY(c => c.FromPointY);
46+
m.ToX(c => c.ToPointX);
47+
m.ToY(c => c.ToPointY);
48+
})
49+
.Read("ReadConnections", "DiagramData")
50+
.Create("CreateConnection", "DiagramData")
51+
.Destroy("DestroyConnection", "DiagramData")
52+
.Update("UpdateConnection", "DiagramData")
53+
)
5454

5555
## Model Fields
5656

‎docs-aspnet/html-helpers/diagrams-and-maps/diagram/export/pdf-export.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ To enable PDF export in the Diagram:
1818

1919
1. Introduce a button and handle its `click` event. Export the Diagram within the handler.
2020

21-
```HTML
22-
<button class='export-pdf k-button'>Save as PDF</button>
23-
```
24-
```JavaScrtipt
25-
<script>
26-
$(".export-pdf").click(function () {
27-
$("#diagram").getKendoDiagram().saveAsPDF();
28-
});
29-
</script>
30-
```
21+
```HTML
22+
<button class='export-pdf k-button'>Save as PDF</button>
23+
```
24+
```JavaScrtipt
25+
<script>
26+
$(".export-pdf").click(function () {
27+
$("#diagram").getKendoDiagram().saveAsPDF();
28+
});
29+
</script>
30+
```
3131

3232
1. Include the Pako Deflate library in the page to enable compression.
3333

0 commit comments

Comments
 (0)