Skip to content

Commit 848ff6b

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 0cc90ac commit 848ff6b

File tree

24 files changed

+1017
-43
lines changed

24 files changed

+1017
-43
lines changed

‎docs-aspnet/html-helpers/data-management/filemanager/drag-and-drop.md

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,28 @@ The following example demonstrates how to disable the Drag and Drop functionalit
1515

1616
```HtmlHelper
1717
@(Html.Kendo().FileManager()
18-
.Name("filemanager")
19-
.Name("filemanager")
20-
.Name("filemanager")
21-
.Name("filemanager")
22-
.Name("filemanager")
18+
.Name("filemanager")
19+
.UploadUrl("Upload", "FileManagerData")
2320
.Draggable(false)
24-
...
21+
.DataSource(ds =>
22+
{
23+
ds.Read(operation => operation
24+
.Type(HttpVerbs.Post)
25+
.Action("Read", "FileManagerData")
26+
);
27+
ds.Destroy(operation => operation
28+
.Type(HttpVerbs.Post)
29+
.Action("Destroy", "FileManagerData")
30+
);
31+
ds.Create(operation => operation
32+
.Type(HttpVerbs.Post)
33+
.Action("Create", "FileManagerData")
34+
);
35+
ds.Update(operation => operation
36+
.Type(HttpVerbs.Post)
37+
.Action("Update", "FileManagerData")
38+
);
39+
})
2540
)
2641
```
2742
{% if site.core %}

‎docs-aspnet/html-helpers/data-management/listview/accessibility/keyboard-navigation.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@ The following example demonstrates how to enable the key navigation in the ListV
2323
.HtmlAttributes(new { style="height:350px;" })
2424
)
2525
```
26+
{% if site.core %}
27+
```TagHelper
28+
<kendo-listview name="productListView"
29+
tag-name="div"
30+
template-id="template"
31+
style="height:350px;"
32+
navigatable="true">
33+
</kendo-listview>
34+
```
35+
{% endif %}
2636
```Template
2737
<script type="text/x-kendo-tmpl" id="template">
2838
<div class="product">

‎docs-aspnet/html-helpers/data-management/listview/binding/ajax-binding.md

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,22 @@ To configure the ListView for {{ site.framework }} for Ajax binding:
5959
.Pageable()
6060
)
6161
```
62+
{% if site.core %}
63+
```TagHelper
64+
<kendo-listview name="ListView"
65+
tag-name="div"
66+
template-id="template"
67+
style="height:350px;">
68+
<scrollable enabled="true" />
69+
<datasource type="DataSourceTagHelperType.Ajax" page-size="6">
70+
<transport>
71+
<read url="@Url.Action("Orders_Read", "ListView")" />
72+
</transport>
73+
</datasource>
74+
<pageable enabled="true" />
75+
</kendo-listview>
76+
```
77+
{% endif %}
6278
```Template
6379
<script type="text/x-kendo-tmpl" id="template">
6480
<div class="order">
@@ -181,17 +197,49 @@ To pass additional parameters to the action method:
181197
};
182198
}
183199
</script>
184-
200+
```
201+
{% if site.core %}
202+
```TagHelper
203+
<kendo-listview name="ListView"
204+
tag-name="div"
205+
template-id="template">
206+
<scrollable enabled="true" />
207+
<datasource type="DataSourceTagHelperType.Ajax" page-size="6">
208+
<transport>
209+
<read url="@Url.Action("Orders_Read", "ListView")" data="additionalData" />
210+
</transport>
211+
</datasource>
212+
<pageable enabled="true" />
213+
</kendo-listview>
214+
<script>
215+
function additionalData() {
216+
return {
217+
firstName: "John",
218+
lastName: "Doe"
219+
};
220+
}
221+
</script>
222+
```
223+
{% endif %}
185224
## Processing Client Data
186225
187226
By default, the Telerik UI ListView for {{ site.framework }} requests data from the server every time the user changes the page, filters the ListView, sorts, or groups. To change this behavior, disable `ServerOperation`.
188227
189-
```HtmlHelper
190-
.DataSource(dataSource => dataSource
191-
.ServerOperation(false) // All data will be requested at once and data operations will be applied client-side.
192-
.Read(read => read.Action("Orders_Read", "ListView"))
193-
)
194-
```
228+
```HtmlHelper
229+
.DataSource(dataSource => dataSource
230+
.ServerOperation(false) // All data will be requested at once and data operations will be applied client-side.
231+
.Read(read => read.Action("Orders_Read", "ListView"))
232+
)
233+
```
234+
{% if site.core %}
235+
```TagHelper
236+
<datasource type="DataSourceTagHelperType.Ajax" server-operation="false">
237+
<transport>
238+
<read url="@Url.Action("Orders_Read", "ListView")"/>
239+
</transport>
240+
</datasource>
241+
```
242+
{% endif %}
195243
196244
## See Also
197245

‎docs-aspnet/html-helpers/data-management/listview/editing.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,53 @@ The following example demonstrates how to define the item template for the Teler
114114
</div>
115115
</script>
116116
```
117+
{% if site.core %}
118+
```TagHelper
119+
<!-- Button for the Create operation. Use it to call the client ListView method add() -->
120+
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
121+
122+
<kendo-listview name="listview">
123+
</kendo-listview>
124+
125+
<script>
126+
$(function () {
127+
var listView = $("#listView").data("kendoListView");
117128
129+
$(".k-add-button").click(function (e) {
130+
listView.add();
131+
e.preventDefault();
132+
});
133+
});
134+
</script>
135+
136+
<script type="text/x-kendo-tmpl" id="template">
137+
<div class="order">
138+
<h3>#= OrderID #</h3>
139+
<dl>
140+
<dt>Ship Name:</dt>
141+
<dd>#= ShipName #</dd>
142+
</dl>
143+
<dl>
144+
<dt>Ship City:</dt>
145+
<dd>#= ShipCity #</dd>
146+
</dl>
147+
<dl>
148+
<dt>Freight:</dt>
149+
<dd>#= kendo.toString(Freight, "n2")#</dd>
150+
</dl>
151+
<dl>
152+
<dt>Order Date:</dt>
153+
<dd>#= kendo.toString(OrderDate, "D")#</dd>
154+
</dl>
155+
<!-- The following markup contains the `Edit` and `Delete` buttons -->
156+
<div class="edit-buttons">
157+
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
158+
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
159+
</div>
160+
</div>
161+
</script>
162+
```
163+
{% endif %}
118164
## Defining the Editor Template
119165

120166
The following example demonstrates how to define the `EditorTemplate` for the model:
@@ -160,11 +206,52 @@ The following example demonstrates how to define the `EditorTemplate` for the mo
160206
}
161207
</style>
162208
```
209+
{% if site.core %}
210+
```TagHelper
211+
@model ListViewExample.Models.OrderViewModel
212+
<div class="order">
213+
<h3 data-bind="text:OrderID"></h3>
214+
<dl>
215+
<dt>Ship Name:</dt>
216+
<dd>
217+
<input asp-for="@Model.ShipName" type="text" class="k-textbox"/>
218+
</dd>
219+
<dt>Ship City:</dt>
220+
<dd>
221+
<input asp-for="@Model.ShipCity" type="text" class="k-textbox"/>
222+
</dd>
223+
<dt>Freight</dt>
224+
<dd>
225+
<kendo-numerictextbox for="@Model.Freight">
226+
</kendo-numerictextbox>
227+
</dd>
228+
<dt>Order Date:</dt>
229+
<dd>
230+
<kendo-datapicker for="@Model.OrderDate">
231+
</kendo-datapicker>
232+
<span data-for="OrderDate" class="k-invalid-msg"></span>
233+
</dd>
163234
235+
</dl>
236+
<div class="edit-buttons">
237+
<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
238+
<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
239+
</div>
240+
</div>
241+
<style>
242+
span.k-tooltip {
243+
position:absolute;
244+
margin:6px;
245+
}
246+
</style>
247+
```
248+
{% endif %}
164249
## Enabling the Editing Functionality
165250

166251
The following example demonstrates how to enable the ListView editing.
167252

253+
> In the ListView TagHelper the editing is enabled by the `edit-template` configuration.
254+
168255
```HtmlHelper
169256
@(Html.Kendo().ListView<ListViewExample.Models.OrderViewModel>()
170257
.Name("listView")
@@ -173,6 +260,33 @@ The following example demonstrates how to enable the ListView editing.
173260
.Editable() //<-- Enable editing.
174261
)
175262
```
263+
{% if site.core %}
264+
```TagHelper
265+
<kendo-listview name="listView"
266+
tag-name="div"
267+
template-id="template"
268+
edit-template-id="editTemplate">
269+
<datasource type="DataSourceTagHelperType.Ajax" page-size="4">
270+
<transport>
271+
<create url="@Url.Action("Orders_Create", "ListView")" />
272+
<read url="@Url.Action("Orders_Read", "ListView")" />
273+
<update url="@Url.Action("Orders_Update", "ListView")" />
274+
<destroy url="@Url.Action("Orders_Destroy", "ListView" )" />
275+
</transport>
276+
<schema>
277+
<model id="ProductID">
278+
<fields>
279+
<field name="ProductName"></field>
280+
<field name="UnitPrice"></field>
281+
<field name="UnitsInStock"></field>
282+
<field name="Discontinued"></field>
283+
</fields>
284+
</model>
285+
</schema>
286+
</datasource>
287+
</kendo-listview>
288+
```
289+
{% endif %}
176290

177291
## Specifying the Action Methods
178292

@@ -198,6 +312,28 @@ The following example demonstrates how to specify the action methods which will
198312
.Pageable()
199313
)
200314
```
315+
{% if site.core %}
316+
```TagHelper
317+
<kendo-listview name="listView"
318+
tag-name="div"
319+
template-id="template"
320+
edit-template-id="editTemplate">
321+
<datasource type="DataSourceTagHelperType.Ajax" page-size="4">
322+
<transport>
323+
<create url="@Url.Action("Orders_Create", "ListView")" />
324+
<read url="@Url.Action("Orders_Read", "ListView")" />
325+
<update url="@Url.Action("Orders_Update", "ListView")" />
326+
<destroy url="@Url.Action("Orders_Destroy", "ListView" )" />
327+
</transport>
328+
<schema>
329+
<model id="ProductID"></model>
330+
</schema>
331+
</datasource>
332+
<pageable enabled="true"/>
333+
</kendo-listview>
334+
```
335+
{% endif %}
336+
201337

202338
For a quick test add a static list and copy and paste it in the controller, or use own service or data base which returns an `IEnumerable` or `IQueriable`.
203339

0 commit comments

Comments
 (0)