Skip to content

Commit 0cc90ac

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 2d51053 commit 0cc90ac

File tree

4 files changed

+181
-38
lines changed

4 files changed

+181
-38
lines changed

‎docs-aspnet/_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ exclude_navigation: ["knowledge-base/*",
8383
api/Kendo.Mvc/*,
8484
api/Kendo.Mvc.UI/*,
8585
api/Kendo.Mvc.UI.Fluent/*,
86+
api/Kendo.Mvc.TagHelpers/*,
8687
getting-started-core/*]
8788

8889
navigation:

‎docs-aspnet/html-helpers/data-management/grid/search-panel.md

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,15 @@ To enable the search panel functionality, include the `Search` option to the too
2222
.Name("Grid")
2323
.ToolBar(t => t.Search()) // Enable the Search panel.
2424
...
25+
)
2526
```
2627
{% if site.core %}
2728
```TagHelper
28-
<kendo-grid name="grid" height="550">
29-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
30-
<transport>
31-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
32-
</transport>
33-
</datasource>
29+
<kendo-grid name="grid">
3430
<toolbar>
3531
<toolbar-button name="search"></toolbar-button>
3632
</toolbar>
37-
38-
<groupable enabled="true" />
39-
<sortable enabled="true" />
40-
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
41-
</pageable>
42-
<filterable enabled="true" />
43-
<columns>
44-
<column field="ContactName" title="Contact Name" width="240" />
45-
<column field="ContactTitle" title="Contact Title" />
46-
<column field="CompanyName" title="Company Name" />
47-
<column field="Country" title="Country" width="150" />
48-
</columns>
33+
...
4934
</kendo-grid>
5035
```
5136
{% endif %}
@@ -54,41 +39,52 @@ To enable the search panel functionality, include the `Search` option to the too
5439
You can also customize which fields to search through the data when a value is entered in the search input.
5540

5641
```HtmlHelper
57-
...
58-
.Search(s=>
59-
{
60-
s.Field(c => c.ContactName);
61-
s.Field(c => c.CompanyName);
62-
})
42+
@(Html.Kendo().Grid<CustomerViewModel>()
43+
.Name("Grid")
44+
.ToolBar(t => t.Search())
45+
.Search(s=>
46+
{
47+
s.Field(c => c.ContactName);
48+
s.Field(c => c.CompanyName);
49+
})
50+
...
51+
)
52+
6353
```
6454
{% if site.core %}
6555
```TagHelper
66-
<kendo-grid name="grid" height="550">
67-
<search fields="@(new string[] { "ContactName", "Country"})">
68-
</search>
56+
<kendo-grid name="grid">
57+
<toolbar>
58+
<toolbar-button name="search"></toolbar-button>
59+
</toolbar>
60+
<search fields="@(new string[] { "ContactName", "Country"})"></search>
61+
...
62+
</kendo-grid>
6963
```
7064
{% endif %}
7165

72-
## Specify the filter operator
66+
## Specify the Filter Operator
7367

7468
As of Kendo UI 2021 R3 SP1, you can specify filter operators for each filter type. With this update, you can filter non-string types.
7569

7670
The following example demonstrates how to specify which fields to include in the search
7771

7872
```HtmlHelper
7973
.Search(s => {
80-
s.Field(o => o.OrderID, "eq");
81-
s.Field(o => o.Freight, "gt");
82-
s.Field(o => o.ShipName, "contains");
83-
s.Field(o => o.ShipCity, "contains");
74+
s.Field(o => o.OrderID, "eq");
75+
s.Field(o => o.Freight, "gt");
76+
s.Field(o => o.ShipName, "contains");
77+
s.Field(o => o.ShipCity, "contains");
8478
})
8579
```
8680
{% if site.core %}
8781
```TagHelper
8882
<search fields-extended="@(new object[]
89-
{new {Name = "OrderID", Operator = "eq"},
90-
new {Name = "ShipName", Operator = "contains"},
91-
new {Name = "ShipCity", Operator = "contains"}})">
83+
{
84+
new {Name = "OrderID", Operator = "eq"},
85+
new {Name = "ShipName", Operator = "contains"},
86+
new {Name = "ShipCity", Operator = "contains"}
87+
})">
9288
</search>
9389
```
9490
{% endif %}
@@ -99,6 +95,29 @@ The code snippets from above can be seen in action in the following demo:
9995

10096
* [Search Panel of the Grid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/search-panel)
10197

98+
## Modify the Default Search Panel Message
99+
100+
The default search panel message is `Search...`. You can modify it by using the `Text()` method in the toolbar configuration.
101+
102+
```HtmlHelper
103+
@(Html.Kendo().Grid<CustomerViewModel>()
104+
.Name("Grid")
105+
.ToolBar(t => t.Search().Text("Search username..."))
106+
...
107+
)
108+
```
109+
{% if site.core %}
110+
```TagHelper
111+
<kendo-grid name="grid">
112+
<toolbar>
113+
<toolbar-button name="search" text="Search username..."></toolbar-button>
114+
</toolbar>
115+
...
116+
</kendo-grid>
117+
```
118+
{% endif %}
119+
120+
102121
## Known Limitations
103122

104123
* When filtering is enabled, the filter textboxes for all Grid columns will be populated with the value entered in the search textbox.

‎docs-aspnet/installation/upgrading/upgrade.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ To upgrade the version with NuGet or Bower:
2626

2727
1. In Visual Studio, open the NuGet Package Manager and navigate to the **Installed** tab. Click **Update** for the **Telerik.UI.for.AspNet.Core** package.
2828
* If you use Bower instead of NuGet, open the Bower Package Manager and select the **Installed** tab. Click **Update** for the **kendo-ui** package.
29-
1. In the application, manually replace any references which point to the old Kendo UI resource files such as [scripts and styles](#providing-the-client-side-resources).
29+
1. In the application, manually replace any references which point to the old Kendo UI resource files such as [scripts and styles]({% slug copyclientresources_aspnetmvc6_aspnetmvc %}).
3030

3131
> To properly load the Telerik and Kendo UI packages, both [NuGet]({% slug nuget_install_aspnetmvc6_aspnetmvc %}) and [Bower](https://docs.telerik.com/kendo-ui/intro/installation/bower-install#kendo-ui-professional) require authentication.
3232
3333
### Upgrading Manually
3434

35-
1. [Download]({% slug downloadinstall_aspnetcore %}#download) the desired version from the **Download** section of your account.
35+
1. [Download]({% slug downloadinstall_aspnetcore %}#getting-the-binaries) the desired version from the **Download** section of your account.
3636
1. Replace all scripts, styles, and images that are related to Telerik UI for ASP.NET Core with the desired version of the framework.
3737
1. Change the reference to the new `Kendo.MVC` dll. Verify that the dll refers to the correct ASP.NET Core version.
38-
1. In the application, manually replace any references which point to the old Kendo UI resource files such as [scripts and styles](#providing-the-client-side-resources).
38+
1. In the application, manually replace any references which point to the old Kendo UI resource files such as [scripts and styles]({% slug copyclientresources_aspnetmvc6_aspnetmvc %}).
3939

4040
## Switching to a Developer License
4141

‎docs-aspnet/knowledge-base/change-grid-pager-to-slider.md

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: Changing the Grid Pager to а Slider
3+
page_title: Changing the Pager in the Data Grid to а Slider
4+
description: "Learn how to change the default paging to a slider in the Telerik UI for {{ site.framework }} Grid."
5+
slug: change-grid-pager-to-slider
6+
tags: grid, pager, slider, core, mvc, telerik
7+
component: grid
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>{{ site.product }} Grid</td>
17+
</tr>
18+
<tr>
19+
<td>Progress {{ site.product }} version</td>
20+
<td>Created with the 2023.1.117 version</td>
21+
</tr>
22+
</table>
23+
24+
25+
## Description
26+
27+
How can I change the default pager of the Telerik UI for {{ site.framework }} Grid to a slider?
28+
29+
30+
## Solution
31+
32+
To achieve the desired result:
33+
34+
1. Handle the [`DataBound`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemstring) event in order to remove the default pager buttons.
35+
1. To substitute the default pager, create a Kendo UI Slider widget instance in its place.
36+
1. To prevent the Kendo UI Slider from creating numerous times, declare a flag variable.
37+
1. Change the page of the Grid DataSource by handling the [`Change`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/slidereventbuilder#changesystemstring) event of the Slider.
38+
39+
> When you apply this approach, the [`page`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page) method of the Grid's DataSource will not fire.
40+
41+
```Index.cshtml
42+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
43+
.Name("grid")
44+
.Columns(columns =>
45+
{
46+
columns.Bound(p => p.ProductName);
47+
columns.Bound(p => p.UnitPrice).Width(100);
48+
columns.Bound(p => p.UnitsInStock).Width(100);
49+
columns.Bound(p => p.Discontinued).Width(100);
50+
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
51+
})
52+
.Events(events => events.DataBound("onDataBound"))
53+
.ToolBar(toolbar => toolbar.Create())
54+
.Editable(editable => editable.Mode(GridEditMode.InLine))
55+
.Pageable()
56+
.Sortable()
57+
.Scrollable()
58+
.HtmlAttributes(new { style = "height:430px;" })
59+
.DataSource(dataSource => dataSource
60+
.Ajax()
61+
.PageSize(20)
62+
.Model(model => model.Id(p => p.ProductID))
63+
.Create(update => update.Action("EditingInline_Create", "Grid"))
64+
.Read(read => read.Action("EditingInline_Read", "Grid"))
65+
.Update(update => update.Action("EditingInline_Update", "Grid"))
66+
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
67+
)
68+
)
69+
```
70+
71+
```Script.js
72+
<script type="text/javascript">
73+
var sliderCreated = false; // Flag variable.
74+
75+
function onChange(e){
76+
var grid = $("#grid").data("kendoGrid"); // Obtain the Grid's reference.
77+
grid.dataSource.page(e.value); // Change the DataSource's page.
78+
}
79+
80+
function onDataBound(e){
81+
if(!sliderCreated){ // Assert if the Slider is created.
82+
sliderCreated = true; // Change the flag variable.
83+
var max = e.sender.dataSource.totalPages(); // Get the total number of pages.
84+
85+
86+
$(".k-grid-pager").find("a, ul").each(function(i) { // Find the Grid's pager and remove it.
87+
$(this).remove()
88+
});
89+
90+
$(".k-grid-pager").prepend($("<input id='slider' />")); // Create the Slider.
91+
$("#slider").kendoSlider({
92+
min: 1,
93+
max: max,
94+
tickPlacement: "none",
95+
change: onChange
96+
});
97+
}
98+
}
99+
</script>
100+
```
101+
102+
For the complete implementation of the suggested approach, refer to the [Telerik REPL example on changing the Grid pager to a slider](https://netcorerepl.telerik.com/cnOGGPlA21RzEjkG12).
103+
104+
## More {{ site.framework }} Grid Resources
105+
* [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})
106+
* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
107+
{% if site.core %}
108+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
109+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
110+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
111+
{% else %}
112+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
113+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
114+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
115+
{% endif %}
116+
117+
## See Also
118+
119+
* [Client-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
120+
* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
121+
* [Telerik REPL: Change the Grid Pager to a Slider](https://netcorerepl.telerik.com/cnOGGPlA21RzEjkG12)
122+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
123+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)