Skip to content

Commit 546f3c9

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent a80d797 commit 546f3c9

File tree

5 files changed

+228
-0
lines changed

5 files changed

+228
-0
lines changed

‎docs-aspnet/docs-builder-mvc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ excluded-files:
112112
- "**/knowledge-base/vs-2015-support.md"
113113
- "**/knowledge-base/trial-to-commercial-license-troubleshooting.md"
114114
- "**/knowledge-base/vs-code-extension-issues.md"
115+
- "**/knowledge-base/razor-class-library.md"
115116
- "**/html-helpers/hybrid/*"
116117
- "**/html-helpers/helper-basics/fundamentals.md"
117118
- "**/html-helpers/helper-basics/declarative-initialization.md"

‎docs-aspnet/knowledge-base/images/select-razor-class-library-template.png‎

52.9 KB
Loading

‎docs-aspnet/knowledge-base/images/support-views-pages-checkbox.png‎

20.6 KB
Loading

‎docs-aspnet/knowledge-base/razor-class-library.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Using Telerik UI HtmlHelpers and TagHelpers in a Razor Class Library Project
3+
description: Learn how to use Telerik UI for {{ site.framework }} HtmlHelpers and TagHelpers components in a Razor Class Library.
4+
type: how-to
5+
page_title: Using Telerik UI HtmlHelpers and TagHelpers in a Razor Class Library Project
6+
slug: razor-class-library
7+
tags: rcl, razor, core, telerik, htmlhelpers, taghelpers
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>{{ site.product }}</td>
17+
</tr>
18+
</table>
19+
20+
## Description
21+
22+
How can I use Telerik UI for {{ site.framework }} HtmlHelpers and TagHelpers components in a <a href="https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=visual-studio" target="_blank">Razor Class Library</a> applications?
23+
24+
## Solution
25+
26+
1. Create a new ASP.NET Core application.
27+
28+
2. Choose the Project Template:
29+
30+
* In the project template search box, type **Razor Class Library**.
31+
* Select the **Razor Class Library** template.
32+
33+
![Select Razor Class Library template](images/select-razor-class-library-template.png)
34+
35+
* In the **Additional information** dialog, ensure the **Support pages and views** option is selected, if you plan to include Razor views. By default, only Razor Pages are supported.
36+
37+
![Select Razor Class Library template](images/support-views-pages-checkbox.png)
38+
39+
3. Install Telerik UI for ASP.NET Core:
40+
41+
* Open the NuGet Package Manager.
42+
* Search for **Telerik.UI.for.AspNet.Core** and install it.
43+
44+
4. Add the Views folder:
45+
46+
* Right-click your RCL project in **Solution Explorer**.
47+
* Select **Add > New Folder**
48+
* Name the folder **Views**.
49+
50+
5. Add the `_ViewImports.cshtml` file:
51+
52+
* Right-click the Views folder
53+
* Select **Add > New Item**
54+
* Choose Razor View and name it **_ViewImports.cshtml**
55+
56+
6. Configure the `_ViewImports.cshtml` file:
57+
58+
```
59+
@using Kendo.Mvc.UI
60+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
61+
@addTagHelper *, Kendo.Mvc
62+
```
63+
64+
7. Add Razor Views:
65+
66+
* Add a new Razor view to your RCL application (for example, `~/Views/Shared/_Index.cshtml`).
67+
* Define the desired HtmlHelper or TagHelper component in the created view.
68+
69+
```HtmlHelper
70+
@(Html.Kendo().Button()
71+
.Name("button")
72+
.Content("Click")
73+
)
74+
```
75+
```TagHelper
76+
<kendo-button name="button2">Click</kendo-button>
77+
```
78+
79+
8. Reference the RCL in your main project:
80+
81+
* Right-click your main project.
82+
* Select **Add > Project Reference** and choose your RCL project.
83+
84+
9. Use the views from the RCL by referecing them in the main project:
85+
86+
```
87+
@Html.Partial("_Index")
88+
```
89+
90+
## See Also
91+
92+
* [Getting Started with Telerik UI for {{ site.framework }}](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/first-steps)
93+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2025%})
94+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs/knowledge-base/disable-autocomplete-popup-kendo-ui-grid.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Removing AutoComplete Popup from Kendo UI Grid Filter Row
3+
description: Learn how to disable the AutoComplete popup in the filter row of a Kendo UI jQuery Grid to use a simple filter box instead.
4+
type: how-to
5+
page_title: How to Disable AutoComplete Popup in Kendo UI Grid Filter Row
6+
slug: disable-autocomplete-popup-kendo-ui-grid
7+
tags: kendo ui, grid, autocomplete, filter row, disable popup
8+
res_type: kb
9+
ticketid: 1683935
10+
---
11+
12+
## Description
13+
14+
I want to use a filter box in the Kendo UI Grid filter row but without the AutoComplete popup feature. Is there a straightforward method to achieve this?
15+
16+
This knowledge base article also answers the following questions:
17+
- How can I disable the AutoComplete popup in the Kendo UI Grid filter row?
18+
- Can I prevent the AutoComplete popup from appearing in the filter row of a Kendo UI Grid?
19+
20+
## Environment
21+
22+
<table>
23+
<tbody>
24+
<tr>
25+
<td>Product</td>
26+
<td>Progress® Kendo UI® jQuery AutoComplete, <br/>
27+
Progress® Kendo UI® jQuery Grid</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
32+
## Solution
33+
34+
To disable the AutoComplete popup in the filter row of the Kendo UI Grid, bind the [`open`](/api/javascript/ui/autocomplete/events/open) event of the AutoComplete to prevent its default action. This can be achieved within the [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound) event of the Grid. The following example demonstrates how to accomplish this:
35+
36+
```javascript
37+
dataBound: function (e) {
38+
$('.k-filtercell [title="Ship Name"].k-input-inner')
39+
.data("kendoAutoComplete")
40+
.bind("open", function (e) {
41+
e.preventDefault();
42+
});
43+
},
44+
```
45+
46+
This code snippet finds the AutoComplete widget used within the filter row of the Grid (identified by the `title` attribute) and binds an event handler to its `open` event. By calling `e.preventDefault()` within the event handler, the opening of the AutoComplete suggestion box is prevented, allowing the use of a simple filter box without the popup.
47+
48+
For a practical demonstration, refer to this example: [
49+
```dojo
50+
<div id="grid"></div>
51+
<script>
52+
$(document).ready(function () {
53+
$("#grid").kendoGrid({
54+
dataBound: function (e) {
55+
$('.k-filtercell [title="Ship Name"].k-input-inner')
56+
.data("kendoAutoComplete")
57+
.bind("open", function (e) {
58+
e.preventDefault();
59+
});
60+
},
61+
dataSource: {
62+
type: "odata",
63+
transport: {
64+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
65+
},
66+
schema: {
67+
model: {
68+
fields: {
69+
OrderID: { type: "number" },
70+
Freight: { type: "number" },
71+
ShipName: { type: "string" },
72+
OrderDate: { type: "date" },
73+
ShipCity: { type: "string" },
74+
},
75+
},
76+
},
77+
pageSize: 20,
78+
serverPaging: true,
79+
serverFiltering: true,
80+
},
81+
height: 550,
82+
filterable: {
83+
mode: "row",
84+
},
85+
pageable: true,
86+
columns: [
87+
{
88+
field: "OrderID",
89+
width: 225,
90+
filterable: {
91+
cell: {
92+
showOperators: false,
93+
},
94+
},
95+
},
96+
{
97+
field: "ShipName",
98+
width: 500,
99+
title: "Ship Name",
100+
filterable: {
101+
cell: {
102+
operator: "contains",
103+
suggestionOperator: "contains",
104+
},
105+
},
106+
},
107+
{
108+
field: "Freight",
109+
width: 255,
110+
filterable: {
111+
cell: {
112+
operator: "gte",
113+
},
114+
},
115+
},
116+
{
117+
field: "OrderDate",
118+
width: 255,
119+
title: "Order Date",
120+
format: "{0:MM/dd/yyyy}",
121+
},
122+
],
123+
});
124+
});
125+
</script>
126+
```
127+
128+
## See Also
129+
130+
- [Kendo UI Grid Documentation](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
131+
- [Kendo UI AutoComplete Documentation](https://docs.telerik.com/kendo-ui/controls/editors/autocomplete/overview)
132+
- [Grid API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
133+
- [AutoComplete API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete)

0 commit comments

Comments
 (0)