Skip to content

Commit de188f3

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 8dc4c20 commit de188f3

File tree

6 files changed

+404
-27
lines changed

6 files changed

+404
-27
lines changed

‎docs-aspnet-core/helpers/html-helpers/upload.md‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The following example demonstrates how to define the Upload by using the Upload
2424
@(Html.Kendo().Upload()
2525
.Name("files")
2626
.Async(a => a
27-
.Save("Save", "Upload")
27+
.Save("SaveAsync", "Upload")
2828
.Remove("Remove", "Upload")
2929
.AutoUpload(true)
3030
)
@@ -46,28 +46,31 @@ public class UploadController : Controller
4646
return View();
4747
}
4848
49-
public ActionResult Save(IEnumerable<IFormFile> files)
50-
{
51-
// The Name of the Upload component is "files"
52-
if (files != null)
53-
{
54-
foreach (var file in files)
55-
{
56-
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
57-
58-
// Some browsers send file names with full path.
59-
// We are only interested in the file name.
60-
var fileName = Path.GetFileName(fileContent.FileName.Trim('"'));
61-
var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, "App_Data", fileName);
62-
63-
// The files are not actually saved in this demo
64-
//file.SaveAs(physicalPath);
65-
}
66-
}
67-
68-
// Return an empty string to signify success
69-
return Content("");
70-
}
49+
public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files)
50+
{
51+
// The Name of the Upload component is "files"
52+
if (files != null)
53+
{
54+
foreach (var file in files)
55+
{
56+
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
57+
58+
// Some browsers send file names with full path.
59+
// We are only interested in the file name.
60+
var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
61+
var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, "App_Data", fileName);
62+
63+
// The files are not actually saved in this demo
64+
using (var fileStream = new FileStream(physicalPath, FileMode.Create))
65+
{
66+
await file.CopyToAsync(fileStream);
67+
}
68+
}
69+
}
70+
71+
// Return an empty string to signify success
72+
return Content("");
73+
}
7174
7275
public ActionResult Remove(string[] fileNames)
7376
{

‎docs/knowledge-base/grid-calculate-value-on-the-fly.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: Update Calculated Cell Value on the Fly
3+
description: An example on how to update calculated cell on the fly in a Kendo UI Grid.
4+
type: how-to
5+
page_title: Update Calculated Cell Value on the Fly | Kendo UI Grid
6+
slug: grid-calculate-value-on-the-fly
7+
tags: grid, calculated, cell, value, dynamically, calculate, update, result
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>Grid for Progress® Kendo UI®</td>
17+
</tr>
18+
</table>
19+
20+
## Description
21+
22+
I have a calculated field in the Grid and would like the value to be refreshed as the users make changes.
23+
24+
## Solution
25+
26+
Handle the Grid [edit event](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit) - in the event handler get reference of the editors for the respective fields. In the change event of the editors get the new value and use it to calculate the result.
27+
28+
```html
29+
<div id="grid"></div>
30+
31+
<script>
32+
$(document).ready(function () {
33+
34+
sampleData = [
35+
{ id: 1,
36+
ProductName: "Diesel",
37+
grossSellUnitPrice: 100,
38+
quantity: 2,
39+
grossSellAmount: 200
40+
41+
},
42+
{ id: 2,
43+
ProductName: "Ad Blue",
44+
grossSellUnitPrice: 200,
45+
quantity: 2,
46+
grossSellAmount: 400
47+
},
48+
{ id: 3,
49+
ProductName: "Bio Diesel",
50+
grossSellUnitPrice: 300,
51+
quantity: 1,
52+
grossSellAmount: 300
53+
}
54+
],
55+
dataSource = new kendo.data.DataSource({
56+
data: sampleData,
57+
schema: {
58+
model: {
59+
id: "Productid",
60+
fields: {
61+
Productid: { type: "number"},
62+
ProductName: { validation: { required: true } },
63+
grossSellUnitPrice: { type: "number", validation: { required: true, min: 1}},
64+
quantity: {type: "number", validation: {required: true}},
65+
grossSellAmount: {type: "number", editable:"false"}
66+
}
67+
}
68+
},
69+
pageSize: 10
70+
});
71+
72+
$("#grid").kendoGrid({
73+
dataSource: dataSource,
74+
pageable: true,
75+
save: function(data) {
76+
if (data.model.grossSellUnitPrice && data.model.quantity) {
77+
data.model.set("grossSellAmount", data.model.grossSellUnitPrice * data.model.quantity);
78+
}
79+
},
80+
edit: function(e) {
81+
if (!e.model.isNew()) {
82+
var priceEditor = e.container.find("input[name=grossSellUnitPrice]").data("kendoNumericTextBox");
83+
var quantityEditor = e.container.find("input[name=quantity]").data("kendoNumericTextBox");
84+
85+
priceEditor.bind("change", function(e) {
86+
var price = this.value();
87+
var quantity = quantityEditor.value();
88+
89+
var totalSpan = this.element.closest("tr").find(".totalSpan");
90+
totalSpan.html(price * quantity);
91+
92+
});
93+
94+
quantityEditor.bind("change", function(e) {
95+
var price = priceEditor.value();
96+
var quantity = this.value();
97+
98+
99+
var totalSpan = this.element.closest("tr").find(".totalSpan");
100+
totalSpan.html(price * quantity);
101+
});
102+
}
103+
},
104+
toolbar: ["create"],
105+
columns: [
106+
"ProductName",
107+
{ field: "grossSellUnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
108+
{ field: "quantity"},
109+
{ field: "grossSellAmount",
110+
editor: function(cont, options) {
111+
$("<span class='totalSpan'>" + options.model.grossSellAmount + " &euro;</span>").appendTo(cont);
112+
}
113+
},
114+
115+
{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
116+
editable: "inline"
117+
});
118+
});
119+
120+
</script>
121+
```

‎docs/knowledge-base/grid-ellipsis-text-show-tooltip.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Show Ellipsis for Long Content and Display Tooltip on Hover
3+
description: An example on how to show ellipsis in a Kendo UI Grid cells where text is long.
4+
type: how-to
5+
page_title: Show Ellipsis for Long Content and Display Tooltip on Hover | Kendo UI Grid
6+
slug: grid-ellipsis-text-show-tooltip
7+
tags: grid, ellipsis, tooltip, long, text, content
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>Grid for Progress® Kendo UI®</td>
17+
</tr>
18+
</table>
19+
20+
## Description
21+
22+
I would like to show ellipsis in the Grid cells where the text does not fit the specified width. The full content should be displayed in a tooltip when hovering over the cell.
23+
24+
## Solution
25+
26+
The following example illustrates how to achieve the functionality.
27+
28+
```html
29+
<div id="grid"></div>
30+
<style>
31+
#grid{
32+
width:300px;
33+
}
34+
</style>
35+
<script>
36+
var grid = null;
37+
38+
$(document).ready(function () {
39+
var dataSource = new kendo.data.DataSource({
40+
data: [
41+
{ID:1 ,Text: "Integer arcu odio, egestas nec pretium sit amet, aliquet vel nibh. Aliquam ac ante fringilla, consectetur erat at, dapibus est. Pellentesque facilisis iaculis neque, in auctor eros fringilla ut. Proin sit amet aliquet lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer porttitor vel neque ac dapibus. Nullam bibendum, velit quis tristique placerat, nibh ante vulputate sem, vel sodales tellus felis nec mi. In hac habitasse platea dictumst. Suspendisse in lacus nec ligula elementum interdum. Mauris at bibendum elit. Mauris dignissim, quam quis blandit rutrum, nunc nulla porttitor eros, eget volutpat magna nulla eu massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce consectetur blandit est ut commodo. Vestibulum vel tellus a purus accumsan venenatis."},
42+
{ID:2 ,Text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},
43+
{ID:3 ,Text: " Duis ut nulla eget lectus posuere tempor. "},
44+
{ID:4 ,Text: ""},
45+
{ID:5 ,Text: " Duis ut"}
46+
],
47+
schema: {
48+
model: {
49+
fields: {
50+
ID: { type: "number" },
51+
Text: { type: "string" }
52+
}}
53+
},
54+
pageSize: 20
55+
});
56+
57+
grid = $("#grid").kendoGrid({
58+
dataSource: dataSource,
59+
scrollable: true,
60+
filterable: true,
61+
columns: [
62+
{ field: "ID", width: "50px" },
63+
{ field: "Text", width: "200px", attributes: {
64+
style: 'white-space: nowrap '
65+
} }]
66+
}).data("kendoGrid");
67+
68+
$("#grid").kendoTooltip({
69+
filter: "td:nth-child(2)", //this filter selects the second column's cells
70+
position: "right",
71+
content: function(e) {
72+
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
73+
var content = dataItem.Text;
74+
75+
if(content.length > 10){
76+
return content;
77+
}else{
78+
return "";
79+
}
80+
},
81+
show: function(e){
82+
if(this.content.text() !=""){
83+
$('[role="tooltip"]').css("visibility", "visible");
84+
}
85+
86+
},
87+
hide: function(){
88+
$('[role="tooltip"]').css("visibility", "hidden");
89+
}
90+
}).data("kendoTooltip");
91+
});
92+
</script>
93+
```
94+
95+
## See Also
96+
97+
* [API Reference of Kendo UI Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
98+
* [API Reference of Kendo UI Tooltip](https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip)

0 commit comments

Comments
 (0)