Skip to content

Commit d1f5019

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent be5812f commit d1f5019

File tree

30 files changed

+967
-48
lines changed

30 files changed

+967
-48
lines changed

‎docs-aspnet/_config.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,8 @@ navigation:
500500
title: "RangeSlider"
501501
"*responsivepanel":
502502
title: "ResponsivePanel"
503+
"*pager":
504+
title: "Pager"
503505
"*panelbar":
504506
title: "PanelBar"
505507
"*pivotgrid":

‎docs-aspnet/html-helpers/data-management/pager/globalization/localization.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Localization
3+
page_title: Localization for the Telerik UI Pager HtmlHelper for {{ site.framework }}
4+
description: "Get started with the Telerik UI Pager HtmlHelper for {{ site.framework }} and learn how to localize the text of its messages."
5+
slug: localization_pager_aspnet
6+
---
7+
8+
# Localization
9+
10+
The Pager provides options for defining the text of the tooltips for its page and navigation links, information text and labels.
11+
12+
To localize the messages, set the desired strings in the `PagerMessagesSettingsBuilder` configurator.
13+
14+
The example below shows how to change the tooltip of the refresh button and the information message.
15+
16+
```
17+
@(Html.Kendo().Pager()
18+
.Name("Pager")
19+
.Events(events => events
20+
.Change("onChange")
21+
)
22+
.Messages(m=>{
23+
m.Refresh("Refresh data");
24+
m.Display("Showing {0}-{1} from {2} data items");
25+
})
26+
)
27+
28+
```
29+
30+
## See Also
31+
32+
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
33+
* [Pager Server-Side API](/api/pager)
34+
* [Pager Settings and Types]({% slug settings_pager_aspnet %})
35+
* [Responsive Pager]({% slug responsive_pager_aspnet %})
36+
* [Pager Templates]({% slug templates_pager_aspnet %})

‎docs-aspnet/html-helpers/data-management/pager/globalization/overview.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: Overview
3+
page_title: Globalization
4+
description: "Get started with the Telerik UI Pager HtmlHelper for {{ site.framework }} and learn about the globalization options it supports."
5+
slug: globalization_pager_aspnet
6+
position: 1
7+
---
8+
9+
# Pager Globalization
10+
11+
The globalization process combines the translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support).
12+
13+
The globalization functionality of the Pager is enabled through the [localization of its messages]({% slug localization_pager_aspnet %}).
14+
15+
For more information on using localization and right-to-left languages with {{ site.product }} helpers, refer to the article on [globalization support by {{ site.product }}]({% slug overview_globalization_core %}).
16+
17+
## See Also
18+
19+
* [Globalization in {{ site.product }}]({% slug overview_globalization_core %})
20+
* [Server-Side API](/api/pager)

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI Pager HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_pager_aspnet_overview
6+
position: 1
7+
---
8+
9+
# Pager HtmlHelper Overview
10+
11+
The Telerik UI Pager HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Pager widget which enables splitting a set of data into pages with flexible and intuitive UI.
12+
13+
The user interface of the Pager is useful for paging data-bound components that have a [data source](/api/datasource) and do not have a built-in UI for paging such as the ListView or scenarios that require paging options—for example, Kendo Templates with a data source.
14+
15+
You can customize the page number templates or use an input for navigation to a specific page, toggle the visibility of previous and next buttons, include a pagesize dropdown and alter the information messages. The pager API also offers the ability to [localize its messages]({% slug localization_pager_aspnet %}).
16+
17+
* [Demo page for the Pager](https://demos.telerik.com/{{ site.platform }}/pager/index)
18+
19+
## Initializing the Pager
20+
21+
To use the Pager, you have to define a standalone data source and pass it by name to the Pager and to the data-bound control that will use it.
22+
23+
The following example demonstrates how to tie a pager to a data source and enable the `PageSizes()` functionality.
24+
25+
```View
26+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.OrderViewModel>()
27+
.Name("dataSource1")
28+
.Ajax(t=>t.Read(read => read.Action("People_Read", "Pager")).PageSize(20))
29+
)
30+
31+
@(Html.Kendo().Pager()
32+
.Name("pager")
33+
.DataSource("dataSource1")
34+
.PageSizes(true)
35+
)
36+
```
37+
```Controller
38+
using Kendo.Mvc.Extensions;
39+
using Kendo.Mvc.UI;
40+
41+
public class PagerController : BaseController
42+
{
43+
public IActionResult People_Read([DataSourceRequest]DataSourceRequest request)
44+
{
45+
var people = new List<SampleData>() {
46+
new SampleData() { Name = "Jane Doe", Age = 25, IsOnLeave = false },
47+
new SampleData() { Name = "John Doe", Age = 33, IsOnLeave = true },
48+
new SampleData() { Name = "John Smith", Age = 37, IsOnLeave = true },
49+
new SampleData() { Name = "Nathan Doe", Age = 42, IsOnLeave = false }
50+
};
51+
return Json(people.ToDataSourceResult(request));
52+
}
53+
54+
public IActionResult Index()
55+
{
56+
return View();
57+
}
58+
}
59+
```
60+
```Model
61+
public class SampleData
62+
{
63+
public int Age { get; set; }
64+
public string Name { get; set; }
65+
public bool IsOnLeave { get; set; }
66+
}
67+
```
68+
69+
## Functionality and Features
70+
71+
* [Pager Settings and Types]({% slug settings_pager_aspnet %})
72+
* [Responsive Pager]({% slug responsive_pager_aspnet %})
73+
* [Pager Templates]({% slug templates_pager_aspnet %})
74+
* [Globalization and Messages]({% slug globalization_pager_aspnet %})
75+
76+
## Events
77+
78+
You can subscribe to the Pager [events](/api/pager).
79+
80+
```
81+
@(Html.Kendo().Pager()
82+
.Name("Pager")
83+
.Events(events => events
84+
.Change("onChange")
85+
)
86+
)
87+
<script>
88+
function onChange(e){
89+
console.log("pager change event");
90+
}
91+
</script>
92+
```
93+
94+
## Referencing Existing Instances
95+
96+
To refer to an existing Pager instance use the `jQuery.data()` method. Once a reference is established, use the [Pager API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager) to control its behavior.
97+
98+
```
99+
<script>
100+
$(function() {
101+
// The Name() of the Pager is used to get its client-side instance.
102+
var pager = $("#pager").data("kendoPager");
103+
});
104+
</script>
105+
```
106+
107+
## See Also
108+
109+
* [Basic Usage of the Pager HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/pager/index)
110+
* [Pager HtmlHelper Integration for {{ site.framework }}(Demo)](https://demos.telerik.com/{{ site.platform }}/pager/integration)
111+
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
112+
* [Pager Server-Side API](/api/pager)

‎docs-aspnet/html-helpers/data-management/pager/responsive.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Responsive Pager
3+
page_title: Responsive Telerik UI Pager HtmlHelper for {{ site.framework }}
4+
description: "Get started with the Pager HtmlHelper for {{ site.framework }} and learn about its responsive feature."
5+
slug: responsive_pager_aspnet
6+
---
7+
8+
## Responsive Design
9+
10+
The Pager HtmlHelper for {{ site.framework }} is responsive by default. To disable the responsive behavior and have all of its elements visible at all times use the `Responsive()` method and pass to `false` as a parameter.
11+
12+
## Visible Elements
13+
14+
The Pager widget determines which internal elements to render based on its width. When the Pager width is greater than or equal to 600 pixels, all elements are visible:
15+
16+
- `Page Sizes Dropdown`
17+
- `Numeric Page Number Buttons` or a `Numeric Input` if the pager is an `Input` one.
18+
- `Info element`
19+
20+
## Breaking Points
21+
22+
When the Pager width is greater than or equal to 600 pixels, all elements are visible:
23+
24+
![A Pager widget at over 600px resolution](../../../images/pager-responsive/over600.png)
25+
26+
When the Pager width is greater than 480 and less than 600 pixels, the label showing the current paging information is hidden:
27+
28+
![A Pager widget between 480 and 600px resolution](../../../images/pager-responsive/480_600.png)
29+
30+
When the Pager width is greater than 360 and less than 480 pixels, the current page is represented by a native `<select/>` element. The `pageSizes` dropdown and the label showing the current paging information are hidden.
31+
32+
![A Pager widget between 360 and 480px resolution](../../../images/pager-responsive/360_480.png)
33+
34+
When the Pager width is less than 360 pixels, the current page is represented by a native `<select/>` element. The `pageSizes` dropdown and the label showing the current paging information are hidden.
35+
36+
![A Pager widget under 360 pixels](../../../images/pager-responsive/under360.png)
37+
38+
## See Also
39+
40+
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
41+
* [Pager Server-Side API](/api/pager)
42+
* [Pager Settings and Types]({% slug settings_pager_aspnet %})
43+
* [Pager Templates]({% slug templates_pager_aspnet %})
44+
* [Globalization and Messages]({% slug globalization_pager_aspnet %})

‎docs-aspnet/html-helpers/data-management/pager/settings.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Pager Settings and Types
3+
page_title: Pager Settings and Types
4+
description: "Learn how to change the settings when working with the Telerik UI Pager HtmlHelper for {{ site.framework }}."
5+
slug: settings_pager_aspnet
6+
---
7+
8+
## Types
9+
10+
The Pager has two types:
11+
12+
- `Numeric()`
13+
- `Input()`
14+
15+
The Pager is `Numeric()` by default. To configure the number of buttons that will be shown in a numeric pager, use the `ButtonCount()` method. To configure the pager to accept only use input, use the `Numeric()` method, pass `false` as its parameter and the `Input()` method with `true` as its parameter.
16+
17+
The following example shows how to enable the `Input()` pager type
18+
19+
```
20+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.OrderViewModel>()
21+
.Name("dataSource1")
22+
.Ajax(t=>t.Read(read => read.Action("People_Read", "Pager")).PageSize(20))
23+
)
24+
25+
@(Html.Kendo().Pager()
26+
.Name("pager")
27+
.DataSource("dataSource1")
28+
.Input(true)
29+
.Numeric(false)
30+
)
31+
32+
```
33+
34+
## Settings
35+
36+
The following settings enable you to determine which built-in pager elements will be rendered:
37+
38+
- `PageSizes()` - renders the dropdown that allows the user to change the page size.
39+
- `Refresh()` - renders a refresh button
40+
- `PreviousNext()` - toggles the visibility of buttons for navigating to the first, last, previous and next pages
41+
- `Info()` - toggles the visibility of the current pager information
42+
43+
44+
## See Also
45+
46+
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
47+
* [Pager Server-Side API](/api/pager)
48+
* [Responsive Pager]({% slug responsive_pager_aspnet %})
49+
* [Pager Templates]({% slug templates_pager_aspnet %})
50+
* [Globalization and Messages]({% slug globalization_pager_aspnet %})

‎docs-aspnet/html-helpers/data-management/pager/templates.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Pager Templates
3+
page_title: Pager Templates
4+
description: "Get started with the {{ site.framework }} Pager and learn about its templating options."
5+
slug: templates_pager_aspnet
6+
---
7+
8+
## Pager Templates
9+
10+
The {{ site.framework }} Pager HtmlHelper features templates for its page number links.
11+
12+
To change the look of the currently selected page number, use the `SelectTemplate()` or `SelectTemplateId()` methods.
13+
14+
To change the look of the non-selected page number links, use the `LinkTemplate()` or the `LinkTemplateId()` methods.
15+
16+
## See Also
17+
18+
* [Pager Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/pager)
19+
* [Pager Server-Side API](/api/pager)
20+
* [Pager Settings and Types]({% slug settings_pager_aspnet %})
21+
* [Responsive Pager]({% slug responsive_pager_aspnet %})
22+
* [Globalization and Messages]({% slug globalization_pager_aspnet %})

‎docs-aspnet/images/pager-responsive/360_480.png‎

2.8 KB
Loading

‎docs-aspnet/images/pager-responsive/480_600.png‎

6.94 KB
Loading

‎docs-aspnet/images/pager-responsive/over600.png‎

9.27 KB
Loading

0 commit comments

Comments
 (0)