Skip to content

Commit f4d12d3

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent d74c157 commit f4d12d3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1619
-343
lines changed

‎docs-aspnet/accessibility/assets/KendoUI-VPAT2.4RevINT.doc‎

-19 KB
Binary file not shown.

‎docs-aspnet/backwards-compatibility/2024-backwards-compatibility.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ position: 1
99
# 2024 Releases
1010

1111
This article lists the breaking or important changes in the 2024 releases of {{ site.product }}.
12+
{% if site.core %}
13+
## {{ site.product }} Q4 2024
14+
15+
### Checkbox
16+
17+
The `Rounded` configuration for the HTML Helpers now expects [`Kendo.Mvc.UI.Rounded`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui/rounded) enum instead of [`Kendo.Mvc.UI.BasicRounded`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui/basicrounded), exposing an additional `Full` option.
18+
{% endif %}
1219

1320
## {{ site.product }} Q2 2024
1421

‎docs-aspnet/html-helpers/data-management/grid/scrolling/endless.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ In such cases, you have to manually update the scroll position and [`pageSize`](
108108

109109
## Known Limitations
110110

111-
Either enable endless scrolling or paging, and do not use both features simultaneously.
111+
* Either enable endless scrolling or paging, and do not use both features simultaneously.
112+
* [Scrolling to an item functionality]({% slug scrolling_to_item_aspnetcore_grid %}) is not supported in an endless scrollable Gird.
112113

113114
## See Also
114115

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

Lines changed: 178 additions & 73 deletions
Large diffs are not rendered by default.

‎docs-aspnet/html-helpers/data-management/grid/scrolling/scroll-to-item.md‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
---
2+
title: Scrolling to a Specific Item
3+
page_title: Scrolling to a Specific Item
4+
description: "Learn more about the programmatic scrolling to specific items with the Telerik UI Grid component for {{ site.framework }}."
5+
slug: scrolling_to_item_aspnetcore_grid
6+
position: 4
7+
---
8+
9+
# Scrolling to a Specific Item
10+
11+
In many scenarios where the Grid handles large datasets, it may be necessary to automatically scroll to a specific row (data item) based on external JavaScript logic or user input.
12+
13+
The Grid component supports the client-side [`scrollToItem()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/scrolltoitem) method that allows you to programmatically scroll to a specific row.
14+
15+
The `scrollToItem()` method requires the following:
16+
17+
* Specify the unique Model identifier to the [`Id()` option of the `Model()` configuration]({% slug htmlhelper_datasourcemodel %}) of the DataSource.
18+
* Ensure the target data item appears in the current Grid data items. If the Grid is pageable, the item must be available on the current page.
19+
20+
```HtmlHelper
21+
@(Html.Kendo().Grid<OrderViewModel>()
22+
.Name("grid")
23+
.DataSource(dataSource => dataSource
24+
.Ajax()
25+
.Model(model => model.Id(p => p.OrderID))
26+
.Read(read => read.Action("Orders_Read", "Grid"))
27+
)
28+
... // Additional configuration.
29+
)
30+
```
31+
{% if site.core %}
32+
```TagHelper
33+
@addTagHelper *, Kendo.Mvc
34+
35+
<kendo-grid name="grid">
36+
<datasource type="DataSourceTagHelperType.Ajax">
37+
<schema data="Data" total="Total" errors="Errors">
38+
<model id="ProductID">
39+
</model>
40+
</schema>
41+
<transport>
42+
<read url="@Url.Action("Orders_Read", "Grid")"/>
43+
</transport>
44+
</datasource>
45+
<!-- Additional configuration.-->
46+
</kendo-grid>
47+
```
48+
{% endif %}
49+
50+
## Scrolling to an Item by Passing the Id of the Item
51+
52+
To scroll the Grid programmatically to a specific data item, pass the `Id` of the item to the `scrollToItem()` method.
53+
54+
The following example shows how to scroll to the last row of the Grid when a button is clicked.
55+
56+
```HtmlHelper
57+
@(Html.Kendo().Button()
58+
.Name("btn")
59+
.Content("Scroll to last item")
60+
.Events(ev => ev.Click("onBtnClick"))
61+
)
62+
63+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
64+
.Name("grid")
65+
.Columns(columns => {
66+
columns.Bound(p => p.OrderID);
67+
columns.Bound(p => p.ShipName);
68+
columns.Bound(p => p.ShipCity);
69+
})
70+
.Scrollable()
71+
.Height(400)
72+
.DataSource(dataSource => dataSource
73+
.Ajax()
74+
.Model(model => model.Id(p => p.OrderID))
75+
.Read(read => read.Action("Orders_Read", "Grid"))
76+
)
77+
)
78+
```
79+
{% if site.core %}
80+
```TagHelper
81+
@addTagHelper *, Kendo.Mvc
82+
83+
<kendo-button name="btn" on-click="onBtnClick">
84+
Scroll to last item
85+
</kendo-button>
86+
87+
<kendo-grid name="grid" height="400">
88+
<datasource type="DataSourceTagHelperType.Ajax">
89+
<schema data="Data" total="Total" errors="Errors">
90+
<model id="OrderID"></model>
91+
</schema>
92+
<transport>
93+
<read url="@Url.Action("Orders_Read","Grid")"/>
94+
</transport>
95+
</datasource>
96+
<columns>
97+
<column field="OrderID"/>
98+
<column field="ShipName"/>
99+
<column field="ShipCity"/>
100+
</columns>
101+
<scrollable enabled="true"/>
102+
</kendo-grid>
103+
```
104+
{% endif %}
105+
```JavaScript
106+
<script>
107+
function onBtnClick() {
108+
const grid = $("#grid").data("kendoGrid"); // Get an instance of the Grid.
109+
const gridDataSoruce = grid.dataSource; // Access the Grid's DataSouce.
110+
let lastRowItem = gridDataSoruce.at(gridDataSoruce.view().length - 1); // Use the at() method of the DataSource to get the data item that corresponds to the last row.
111+
grid.scrollToItem(lastRowItem.OrderID); // Pass the "OrderID" value of the last data item to scroll the Grid to the last row.
112+
}
113+
</script>
114+
```
115+
116+
## Scrolling to an Item in Virtual Scrolling Grid
117+
118+
When the Grid is set up in [virtual scrolling mode]({% slug virtual_scrolling_aspnetcore_grid %}), you can scroll to an item that is not loaded yet using the `callback` parameter of the `scrollToItem()` method.
119+
120+
The `callback` is a function that executes when virtual scrolling is enabled. It returns the index of the target item in the dataset.
121+
122+
The following example shows how to scroll to an item that is not loaded yet when a button is clicked. The item's **OrderID** is equal to **10403** and it comes from `ViewData`.
123+
124+
```HtmlHelper
125+
@{
126+
var initialItemId = ViewData["initialItemId"];
127+
}
128+
129+
@(Html.Kendo().Button()
130+
.Name("btn")
131+
.Content("Scroll to item")
132+
.Events(ev => ev.Click("onBtnClick"))
133+
)
134+
135+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
136+
.Name("grid")
137+
.Columns(columns => {
138+
columns.Bound(p => p.OrderID);
139+
columns.Bound(p => p.ShipName);
140+
columns.Bound(p => p.ShipCity);
141+
})
142+
.Scrollable(scrollable => scrollable.Virtual(true))
143+
.Height(400)
144+
.Pageable(p =>
145+
p.Info(true)
146+
.Numeric(false)
147+
.PreviousNext(false)
148+
.Messages(m=>m.Display("Showing {2} data items"))
149+
)
150+
.DataSource(dataSource => dataSource
151+
.Ajax()
152+
.PageSize(50)
153+
.Model(model => model.Id(p => p.OrderID))
154+
.Read(read => read.Action("Orders_Read", "Grid"))
155+
)
156+
)
157+
```
158+
{% if site.core %}
159+
```TagHelper
160+
@addTagHelper *, Kendo.Mvc
161+
@{
162+
var initialItemId = ViewData["initialItemId"];
163+
}
164+
165+
<kendo-button name="btn" on-click="onBtnClick">
166+
Scroll to item
167+
</kendo-button>
168+
169+
<kendo-grid name="grid" height="400">
170+
<datasource type="DataSourceTagHelperType.Ajax" page-size="50">
171+
<schema data="Data" total="Total" errors="Errors">
172+
<model id="OrderID"></model>
173+
</schema>
174+
<transport>
175+
<read url="@Url.Action("Orders_Read","Grid")"/>
176+
</transport>
177+
</datasource>
178+
<columns>
179+
<column field="OrderID"/>
180+
<column field="ShipName"/>
181+
<column field="ShipCity"/>
182+
</columns>
183+
<pageable enabled="true" info="true" numeric="false" previous-next="false">
184+
<messages display="Showing {2} data items"/>
185+
</pageable>
186+
<scrollable enabled="true" virtual="true"/>
187+
</kendo-grid>
188+
```
189+
```GridController
190+
public IActionResult Index()
191+
{
192+
ViewData["initialItemId"] = 10403;
193+
return View();
194+
}
195+
196+
public IActionResult GetItemIndex(int? id)
197+
{
198+
var itemIndex = -1;
199+
if (id != null)
200+
{
201+
// Retrieve the data item from the Grid's data collection based on the received Id value.
202+
var dataItem = GetGridData().Select((item, i) => new { Item = item, Index = i }).FirstOrDefault(x => x.Item.OrderID == id);
203+
if(dataItem != null)
204+
{
205+
itemIndex = dataItem.Index;
206+
}
207+
}
208+
return Json(itemIndex); // Return the index of the data item.
209+
}
210+
```
211+
{% else %}
212+
```GridController
213+
public ActionResult Index()
214+
{
215+
ViewData["initialItemId"] = 10403;
216+
return View();
217+
}
218+
219+
public ActionResult GetItemIndex(int? id)
220+
{
221+
var itemIndex = -1;
222+
if (id != null)
223+
{
224+
// Retrieve the data item from the Grid's data collection based on the received Id value.
225+
var dataItem = GetGridData().Select((item, i) => new { Item = item, Index = i }).FirstOrDefault(x => x.Item.OrderID == id);
226+
if(dataItem != null)
227+
{
228+
itemIndex = dataItem.Index;
229+
}
230+
}
231+
return Json(itemIndex, JsonRequestBehavior.AllowGet); // Return the index of the data item.
232+
}
233+
```
234+
{% endif %}
235+
```JavaScript
236+
<script>
237+
function onBtnClick() {
238+
const grid = $("#grid").data("kendoGrid"); // Get an instance of the Grid.
239+
var itemId = '@initialItemId'; // Access the "OrderID" value through the ViewData.
240+
241+
grid.scrollToItem(itemId, function (options) { // Pass the id and a callback returning the index of the item.
242+
// Trigger an AJAX request that will request the index of the data item with "OrderID" equal to 10403.
243+
$.ajax({
244+
type: "POST",
245+
url: "@Url.Action("GetItemIndex", "Grid")",
246+
data: { id: itemId },
247+
success: function (index) {
248+
if(index != -1) {
249+
options.success(index);
250+
}
251+
}
252+
});
253+
});
254+
}
255+
</script>
256+
```
257+
258+
## Known Limitations
259+
260+
* Scrolling to an item in a Grid with enabled [group paging functionality]({% slug htmlhelpers_grid_aspnet_grouping %}) is not supported.
261+
* Scrolling to an item in a Gird that uses [endless scrolling mode]({% slug endless_scrolling_aspnetcore_grid %}) is not supported.
262+
* When the sum of the specified row's height and the height of all rows afterward is less than the Grid's height, the row that must be scrolled to the top will not appear at the top. In non-virtualized Grids, the Grid will be scrolled to its bottom, but the specified row will not appear at the top. In Grids with enabled virtual scrolling, the Grid will be scrolled to the bottom of the current data set, but the scroller will not be positioned at the bottom, and the row will not be positioned at the top.
263+
264+
## See Also
265+
266+
* [Scrolling to Specific Item by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/scroll-to-item)
267+
* [Client-Side Grid API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
268+
* [Server-Side Grid HtmlHelper API](/api/grid)
269+
{% if site.core %}
270+
* [Server-Side Grid TagHelper API](/api/taghelpers/grid)
271+
{% endif %}

0 commit comments

Comments
 (0)