Skip to content

Commit f8034ed

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

File tree

3 files changed

+181
-2
lines changed

3 files changed

+181
-2
lines changed

‎docs/controls/hybrid/introduction.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,8 +358,6 @@ This added degree of control makes it a cinch to precisely style apps for differ
358358

359359
To get a better understanding of how Kendo UI hybrid Application works, check the features provided by the [application class]({% slug overview_hybridapplication %}).
360360

361-
To see a complete tutorial including guidelines and recommendations about how to build mobile applications for phones and tables with Kendo UI hybrid widgets and application tools, visit [this link](http://www.kendouimobileguide.com/).
362-
363361
## See Also
364362

365363
Articles and how-to examples on the Hybrid UI components in Kendo UI:

‎docs/knowledge-base/grid-additional-parameters-custom-datasource.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Pass additional parameters to custom DataSource
3+
description: An example on how to send additional parameters to a custom DataSource
4+
type: how-to
5+
page_title: Pass parameters to custom DataSource | Telerik Grid for ASP.NET MVC
6+
slug: grid-additional-parameters-custom-datasource
7+
tags: grid, custom, datasource, additional, parameters
8+
res_type: kb
9+
component: grid
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress Kendo UI Grid</td>
18+
</tr>
19+
<tr>
20+
<td>Telerik UI for ASP.NET MVC</td>
21+
<td>2017.3.1026</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
I have a hierarchical Grid with [Custom DataSource](http://demos.telerik.com/aspnet-mvc/grid/custom-datasource). I have a ClientHandlerDescriptor defined as [described here](https://docs.telerik.com/aspnet-mvc/getting-started/custom-datasource#common-scenarios) and would like to pass additional parameters to the ClientHandlerDescriptor.
28+
29+
## Solution
30+
31+
If you are using ClientHandlerDescriptor for reading the data you can define the JavaScript handler like below.
32+
33+
```
34+
.Transport(new
35+
{
36+
read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "function(options) {customRead(options, '#=ID#')}" },
37+
})
38+
```
39+
40+
The `customRead` JavaScript handler will accept the default `options` argument as well as the ID of the **parent Grid**.
41+
42+
```JavaScript
43+
function customRead(options, id) {
44+
$.ajax({
45+
method: "POST",
46+
url: '@Url.Action("ActionName", "ControllerName")',
47+
dataType: "json",
48+
data: {
49+
ID: id,
50+
// more data here
51+
},
52+
success: function(data) {
53+
options.success(data);
54+
}
55+
});
56+
}
57+
```
58+

‎docs/knowledge-base/grid-prevent-popup-close-on-edit.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: Prevent Grid PopUp editor from closing on update/create
3+
description: An example on how to keep the Grid popup editor open after update is finished
4+
type: how-to
5+
page_title: Keep Grid popup open | Kendo UI Grid
6+
slug: grid-prevent-popup-close-on-edit
7+
tags: grid, edit, popup, prevent, cancel, stop, close, edit, insert, create, modal, reopen, keep, open
8+
res_type: kb
9+
component: grid
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress Kendo UI Grid</td>
18+
</tr>
19+
<tr>
20+
<td>Progress Kendo UI version</td>
21+
<td>2017.3.1026</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
I want to keep popup editor open after I update or insert a record in the Grid.
28+
29+
## Solution
30+
31+
To implement the feature you can handle the Grid [edit event](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit) and attach handler for the PopUp window [close event](https://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-close).
32+
33+
In the close handler e.preventDefault() will be called to prevent the popup from closing. In order to allow the users to close the editor the flag can also be set when the cancel and close buttons are clicked.
34+
35+
The example below illustrates the approach.
36+
37+
```html
38+
<div id="grid"></div>
39+
40+
<script>
41+
$(document).ready(function () {
42+
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
43+
dataSource = new kendo.data.DataSource({
44+
transport: {
45+
read: {
46+
url: crudServiceBaseUrl + "/Products",
47+
dataType: "jsonp"
48+
},
49+
update: {
50+
url: crudServiceBaseUrl + "/Products/Update",
51+
dataType: "jsonp"
52+
},
53+
destroy: {
54+
url: crudServiceBaseUrl + "/Products/Destroy",
55+
dataType: "jsonp"
56+
},
57+
create: {
58+
url: crudServiceBaseUrl + "/Products/Create",
59+
dataType: "jsonp"
60+
},
61+
parameterMap: function (options, operation) {
62+
if (operation !== "read" && options.models) {
63+
return { models: kendo.stringify(options.models) };
64+
}
65+
}
66+
},
67+
batch: true,
68+
pageSize: 20,
69+
schema: {
70+
model: {
71+
id: "ProductID",
72+
fields: {
73+
ProductID: { editable: false, nullable: true },
74+
ProductName: { validation: { required: true } },
75+
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
76+
Discontinued: { type: "boolean" },
77+
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
78+
}
79+
}
80+
},
81+
});
82+
83+
$("#grid").kendoGrid({
84+
dataSource: dataSource,
85+
pageable: true,
86+
height: 550,
87+
toolbar: ["create"],
88+
columns: [
89+
{ field: "ProductName", title: "Product Name" },
90+
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
91+
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
92+
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
93+
{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
94+
editable: "popup",
95+
edit: function (e) {
96+
var editWindow = this.editable.element.data("kendoWindow");
97+
editWindow.bind("close", onWindowEditClose);
98+
},
99+
save: function (e) {
100+
preventCloseOnSave = true;
101+
}
102+
});
103+
});
104+
105+
var onWindowEditClose = function (e) {
106+
if (preventCloseOnSave) {
107+
e.preventDefault();
108+
preventCloseOnSave = false;
109+
}
110+
};
111+
112+
$(".k-grid-cancel").on("mousedown", function (e) {
113+
preventCloseOnSave = false;
114+
});
115+
116+
function customBoolEditor(container, options) {
117+
var guid = kendo.guid();
118+
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
119+
$('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
120+
}
121+
</script>
122+
```
123+

0 commit comments

Comments
 (0)