Skip to content

Commit b005019

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent a5854c5 commit b005019

File tree

19 files changed

+458
-136
lines changed

19 files changed

+458
-136
lines changed

‎docs-aspnet/html-helpers/data-management/grid/binding/overview.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Depending on the configuration of its [DataSource]({% slug htmlhelpers_datasourc
1818
{% endif %}
1919
* [Remote data binding]({% slug htmlhelpers_grid_aspnetcore_ajaxbinding %})
2020
* [SignalR data binding]({% slug htmlhelpers_grid_aspnetcore_signalrbinding %})
21+
* [WebApi Binding]({% slug htmlhelpers_grid_webapi_binding %})
2122
* [Custom Binding]({% slug custombinding_grid_aspnetmvc %}){% if site.mvc %}
2223
* [Server Binding]({% slug serverbinding_grid_aspnetmvc %})
2324

@@ -54,3 +55,4 @@ Check the `Skeleton` loading type in action in the live demo below:
5455
* [OData Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/odata)
5556
* [SignalR Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/signalr)
5657
* [Custom Ajax Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/customajaxbinding)
58+
* [Web Api Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/webapi)

‎docs-aspnet/html-helpers/data-management/grid/editing/webapi.md renamed to ‎docs-aspnet/html-helpers/data-management/grid/binding/webapi-binding.md

Lines changed: 197 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,77 @@
11
---
2-
title: WebAPI Editing
3-
page_title: WebAPI Editing - Telerik UI Grid Component
4-
description: "Implement CRUD data operations with a WebAPI controller for the Kendo UI Grid for {{ site.framework }}."
5-
previous_url: /helpers/grid/webapi-editing, /helpers/data-management/grid/webapi-editing
6-
slug: webapi_editing_grid_aspnetmvc
2+
title: WebApi Binding
3+
page_title: WebApi Binding
4+
description: "Learn how to enable the WebAPI binding capabilities of the Telerik UI Grid for {{ site.framework }}."
5+
slug: htmlhelpers_grid_webapi_binding
76
---
87

9-
# WebAPI Editing
8+
# WebAPI Binding
109

11-
You can implement the CRUD (Create, Read, Update, Destroy) data operations and a [WebAPI](http://www.asp.net/web-api) controller for the Telerik UI Grid for {{ site.framework }}.
10+
Web API is an application programming interface for a web application or server which utilizes the [HTTP protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) for communication. It enables you to make the server-side of the application more monolithic when it comes to establishing communication between clients and websites to have data access.
1211

13-
For runnable examples, refer to the [demos on editing of the Grid](https://demos.telerik.com/{{ site.platform }}/grid/webapi).
12+
For runnable examples, refer to the [demos on WebAPI binding of the Grid component](https://demos.telerik.com/{{ site.platform }}/grid/webapi).
1413

1514
> Defining a Schema.Model.Id is mandatory for the proper execution of the Update, Create and Destroy of the Grid.
1615
16+
{% if site.mvc %}
17+
## Setting up the application for WebAPI Binding
18+
19+
To ensure that the application is configured for both Web API binding capabilities:
20+
21+
1. Configure Web API by calling `GlobalConfiguration.Configure` in the `Application_Start` method.
22+
```
23+
public class MvcApplication : System.Web.HttpApplication
24+
{
25+
protected void Application_Start()
26+
{
27+
GlobalConfiguration.Configure(WebApiConfig.Register);
28+
RouteConfig.RegisterRoutes(RouteTable.Routes);
29+
}
30+
}
31+
```
32+
33+
1. Create a file named `WebApiConfig.cs` inside the `App_Start` folder and configure the default WebAPI routing convention.
34+
```
35+
public static class WebApiConfig
36+
{
37+
public static void Register(HttpConfiguration config)
38+
{
39+
// Web API configuration and services.
40+
// Web API routes.
41+
config.MapHttpAttributeRoutes();
42+
config.Routes.MapHttpRoute(
43+
name: "DefaultApi",
44+
routeTemplate: "api/{controller}/{id}",
45+
defaults: new { id = RouteParameter.Optional }
46+
);
47+
}
48+
}
49+
```
50+
{% endif %}
51+
52+
## Adding a Web API Controller
53+
54+
{% if site.mvc %}
55+
To support writing and reading data using WebAPI endpoints, the `ApiController` base class needs to be inherited for a given controller instance.
56+
57+
```
58+
public class TaskController : System.Web.Http.ApiController
59+
{
60+
}
61+
```
62+
{% else %}
63+
To support writing and reading data using WebAPI endpoints, the ControllerBase base class needs to be inherited for a given controller instance.
64+
65+
```
66+
[ApiController()]
67+
[Route("api/[controller]")]
68+
public class TaskController : BaseController
69+
{
70+
}
71+
```
72+
{% endif %}
73+
## Configuring the CRUD Operations
74+
1775
{% if site.mvc %}
1876
1. Create a new ASP.NET MVC 5 application. If you have installed the [Telerik UI for ASP.NET MVC Visual Studio Extensions]({% slug overview_visualstudio_aspnetcore %}), create a Telerik UI for ASP.NET MVC Web application. Name the application `KendoGridWebApiCRUD`. If you decided not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the [introductory article]({% slug gettingstarted_aspnetmvc %}) to add Telerik UI for ASP.NET MVC to the application.
1977
1. Add a new `Entity Framework Data Model`. Right-click the `~/Models` folder in the solution explorer and pick **Add** > **New Item**. Choose **Data** > **ADO.NET Entity Data Model** in the **Add New Item** dialog. Name the model `Northwind.edmx` and click **Next**. This starts the **Entity Data Model Wizard**.
@@ -31,7 +89,7 @@ For runnable examples, refer to the [demos on editing of the Grid](https://demos
3189
![{{ site.product_short }} Adding the Controller](../images/grid-api-controller.png)
3290
{% else %}
3391
1. Add a new class to the `~/Models` folder. The following example uses the `ProductViewModel` name.
34-
92+
```
3593
public class ProductViewModel
3694
{
3795
public int ProductID { get; set; }
@@ -42,19 +100,32 @@ For runnable examples, refer to the [demos on editing of the Grid](https://demos
42100
[UIHint("Integer")]
43101
public short? UnitsInStock { get; set; }
44102
}
103+
```
45104
{% endif %}
46105
47-
1. Open `Controllers/ProductsController.cs`.
48106
1. Update the `Get` method as demonstrated by The following example.
49-
{% if site.mvc %}
50-
public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof (WebApiDataSourceRequestModelBinder))DataSourceRequest request){% else %}
51-
public DataSourceResult Get([DataSourceRequest]DataSourceRequest request){% endif %}
107+
108+
{% if site.mvc %}
109+
```
110+
public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof (WebApiDataSourceRequestModelBinder))DataSourceRequest request)
111+
{
112+
return db.Products.ToDataSourceResult(request);
113+
}
114+
```
115+
{% else %}
116+
```
117+
[HttpGet]
118+
public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
52119
{
53120
return db.Products.ToDataSourceResult(request);
54121
}
122+
```
123+
{% endif %}
55124
56125
1. Update the `Post` method as demonstrated in The following example.
57-
{% if site.mvc %}
126+
127+
{% if site.mvc %}
128+
```
58129
public HttpResponseMessage Post(Product product)
59130
{
60131
if (ModelState.IsValid)
@@ -75,19 +146,118 @@ For runnable examples, refer to the [demos on editing of the Grid](https://demos
75146
{
76147
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
77148
}
78-
}{% else %}
149+
}
150+
```
151+
{% else %}
152+
```
79153
[HttpPost]
80-
public IActionResult Post(ProductViewModel product)
154+
public IActionResult Post([FromForm] ProductViewModel product)
81155
{
82-
if (!ModelState.IsValid)
83-
{
84-
return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
85-
}
156+
if (!ModelState.IsValid)
157+
{
158+
return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
159+
}
86160

87-
service.Create(product);
161+
service.Create(product);
162+
163+
return new ObjectResult(new DataSourceResult { Data = new[] { product }, Total = 1 });
164+
}
165+
```
166+
{% endif %}
88167

89-
return new ObjectResult(new DataSourceResult { Data = new[] { product }, Total = 1 });
90-
}{% endif %}
168+
1. Update the `Put` method as demonstrated in The following example.
169+
170+
{% if site.mvc %}
171+
```
172+
public HttpResponseMessage Put(int id, TaskViewModel task)
173+
{
174+
if (ModelState.IsValid && id == task.TaskID)
175+
{
176+
try
177+
{
178+
service.Update(task, null);
179+
}
180+
catch (DbUpdateConcurrencyException)
181+
{
182+
return Request.CreateResponse(HttpStatusCode.NotFound);
183+
}
184+
185+
return Request.CreateResponse(HttpStatusCode.OK);
186+
}
187+
else
188+
{
189+
var errors = ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage);
190+
return Request.CreateResponse(HttpStatusCode.BadRequest, errors);
191+
}
192+
}
193+
```
194+
{% else %}
195+
```
196+
[HttpPut("{id}")]
197+
public IActionResult Put(int id, [FromForm] ProductViewModel product)
198+
{
199+
if (ModelState.IsValid && id == product.ProductID)
200+
{
201+
try
202+
{
203+
service.Update(product);
204+
}
205+
catch (DbUpdateConcurrencyException)
206+
{
207+
return new NotFoundResult();
208+
}
209+
return new StatusCodeResult(200);
210+
}
211+
else
212+
{
213+
return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
214+
}
215+
}
216+
```
217+
{% endif %}
218+
219+
1. Update the `Delete` method as demonstrated in the following example.
220+
221+
{% if site.mvc %}
222+
```
223+
public HttpResponseMessage Delete(int id)
224+
{
225+
ProductViewModel product = service.Read().FirstOrDefault(p => p.ProductID == id);
226+
227+
if (product == null)
228+
{
229+
return Request.CreateResponse(HttpStatusCode.NotFound);
230+
}
231+
232+
try
233+
{
234+
service.Destroy(product);
235+
}
236+
catch (DbUpdateConcurrencyException)
237+
{
238+
return Request.CreateResponse(HttpStatusCode.NotFound);
239+
}
240+
241+
return Request.CreateResponse(HttpStatusCode.OK, product);
242+
}
243+
```
244+
{% else %}
245+
```
246+
[HttpDelete("{id}")]
247+
public IActionResult Delete(int id)
248+
{
249+
try
250+
{
251+
service.Destroy(new ProductViewModel { ProductID = id } );
252+
}
253+
catch (DbUpdateConcurrencyException)
254+
{
255+
return new NotFoundResult();
256+
}
257+
return new StatusCodeResult(200);
258+
}
259+
```
260+
{% endif %}
91261
92262
1. In the view, configure the Grid to use the Products WebAPI controller.
93263
@@ -167,13 +337,12 @@ For runnable examples, refer to the [demos on editing of the Grid](https://demos
167337
```
168338
{% endif %}
169339

170-
1. Build and run the application.
340+
## Building the application
171341

172-
{% if site.mvc %}
173-
![{{ site.product_short }} The final result is a Grid with editing configured](../images/grid-inline-editing.png)
174-
{% endif %}
342+
343+
The final result is a Grid with configured editing![{{ site.product_short }} The final result is a Grid with editing configured](../images/grid-inline-editing.png)
175344

176345
## See Also
177346

178-
* [Editing Approaches by the Grid HtmlHelper for ASP.NET MVC (Demos)](https://demos.telerik.com/{{ site.platform }}/grid/editing)
347+
* [WebApi Binding for the Grid HtmlHelper for {{ site.product }} (Demos)](https://demos.telerik.com/{{ site.platform }}/grid/webapi)
179348
* [Server-Side API](/api/grid)

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ The Grid provides the following edit modes:
1616
* [Popup editing]({% slug popupediting_grid_aspnetcore %})
1717
* [Incell editing]({% slug batchediting_grid_aspnetcore %})
1818
* [Custom editors and validation]({% slug customediting_grid_aspnetcore %})
19-
* [WebAPI editing]({% slug webapi_editing_grid_aspnetmvc %})
20-
21-
2219

2320
## Getting Started
2421

‎docs-aspnet/html-helpers/data-management/grid/images/grid-inline-editing.png

-9.33 KB
Loading

‎docs-aspnet/html-helpers/editors/datetimepicker/integration.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,27 @@ To use the DateInput as the input element in a DateTimePicker, enable the [`Date
3232

3333
To customize the placeholders of the DateInput use the [`Messages`](api/kendo.mvc.ui.fluent/datetimepickermessagessettingsbuilder) configuration and set the desired DateInput messages.
3434

35+
## AutoFill functionality
36+
37+
With the DateInput integration enabled, you the AutoFill functionality can also be enabled via the [`autoFill`](api/javascript/ui/datepicker/configuration/autofill) configuration option.
38+
39+
```HtmlHelper
40+
@(Html.Kendo().DateTimePicker()
41+
.Name("dateTimePicker")
42+
.DateInput(true)
43+
.AutoFill(true)
44+
)
45+
```
46+
{% if site.core %}
47+
```TagHelper
48+
<kendo-datetimepicker name="datetimepicker"
49+
date-input="true"
50+
auto-fill="true" />
51+
```
52+
{% endif %}
53+
54+
When the AutoFill functionality is enabled you can complete any of the date segments in the DatePicker's DateInput and when the component looses focus the rest of the date will automatically be filled with the corresponding segment of the current date. For example, if the current date is 06 Jul 2023 and the user fills only the day portion as 15 and clicks on another input element the date will be autofilled to 15 Jul 2023.
55+
3556
## See Also
3657

3758
* [Server-Side API](/api/datetimepicker)

‎docs/api/javascript/ui/datepicker.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,22 @@ The duration of the open animation in milliseconds.
122122
});
123123
</script>
124124

125+
### autoFill `Boolean`*(default: false)*
126+
127+
When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus. For example, entering only the date, month or year portion of the date and blurring the component, the missing sections will be automatically completed.
128+
Requires a [DateInput](/api/javascript/ui/dateinput) for editing the value.
129+
130+
#### Example
131+
132+
<input id="datepicker" />
133+
<script>
134+
$("#datepicker").kendoDatePicker({
135+
dateInput: true
136+
autoFill: true
137+
});
138+
</script>
139+
140+
125141
### componentType `String`*(default: "classic")*
126142

127143
Specifies the component type of the widget.

‎docs/controls/datepicker/integration.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,23 @@ To use the DateInput as the input element in a DatePicker, enable the [`dateInpu
2424

2525
To customize the placeholders of the DateInput set the [`messages.dateInput`](api/javascript/ui/datepicker/configuration/messages.dateinput) configuration.
2626

27+
## AutoFill functionality
28+
29+
With the DateInput integration enabled, you the AutoFill functionality can also be enabled via the [`autoFill`](api/javascript/ui/datepicker/configuration/autofill) configuration option.
30+
31+
```dojo
32+
<input id="datepicker" />
33+
34+
<script>
35+
$("#datepicker").kendoDatePicker({
36+
dateInput: true,
37+
autoFill: true
38+
});
39+
</script>
40+
```
41+
42+
When the AutoFill functionality is enabled you can complete any of the date segments in the DatePicker's DateInput and when the component looses focus the rest of the date will automatically be filled with the corresponding segment of the current date. For example, if the current date is 06 Jul 2023 and the user fills only the day portion as 15 and clicks on another input element the date will be autofilled to 15 Jul 2023.
43+
2744
## See Also
2845

2946
* [JavaScript API Reference of the DatePicker](/api/javascript/ui/datepicker)

‎docs/intro/installation/images/license-warning.PNG

-11 KB
Binary file not shown.

0 commit comments

Comments
 (0)