Skip to content

Commit 3c0a03a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 5d0d582 commit 3c0a03a

File tree

3 files changed

+135
-41
lines changed

3 files changed

+135
-41
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,12 @@ As of the Q2 2025 release, the `Telerik.Core.Export` package targets .NET Framew
9090

9191
{% endif %}
9292

93+
### ToolBar Buttons in Grid
94+
95+
The Grid component now provides a new property to disable or hide the inactive tools when editing. Its ToolBar buttons like `Save Changes` and `Cancel` will be hidden by default. When the `ToolBar.ShowInactiveTools` option is enabled the inactive tools will be displayed as disabled.
96+
97+
More details you can find in the dedicated [Grid ToolBar article]({% slug htmlhelpers_grid_aspnetcore_toolbar%}).
98+
9399
### Telerik.Zip
94100

95101
As of the Q2 2025 release, the following NuGet packages and assemblies no longer have a dependency to the `Telerik.Zip` library:

‎docs/knowledge-base/check-listview-item-selected.md‎

Lines changed: 31 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -41,50 +41,39 @@ How can I check if a certain value corresponds to a DataItem property of the sel
4141
1. Access its corresponding DataItem and properties by getting their index.
4242

4343
```dojo
44-
<div id="example">
45-
46-
<div class="demo-section k-content wide">
47-
<button onclick="checked()">Is <b>Queso Cabrales</b> selected?</button>
48-
<div id="listView"></div>
49-
<div id="pager" class="k-pager"> </div>
50-
</div>
51-
52-
<div class="box wide">
53-
<h4>Console Log</h4>
54-
<div class="console"></div>
55-
</div>
44+
<div id="example">
45+
<div id="listView"></div>
46+
<div id="pager" class="k-pager"></div>
5647
5748
<script type="text/x-kendo-tmpl" id="template">
5849
<div class="product">
59-
<img src="../content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
50+
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
6051
<h3>#:ProductName#</h3>
6152
</div>
6253
</script>
6354
64-
<script>
55+
<script>
6556
function checked() {
6657
var Product = "Queso Cabrales",
67-
listView = $("#listView").data("kendoListView"),
68-
selected = listView.select();
58+
listView = $("#listView").data("kendoListView"),
59+
selected = listView.select();
6960
70-
for (let i = 0; i < selected.length; i++)
71-
{
61+
for (let i = 0; i < selected.length; i++) {
7262
var index = $(selected[i]).index(),
73-
dataItem = listView.dataSource.view()[index];
74-
if (dataItem.ProductName == Product)
75-
{
63+
dataItem = listView.dataSource.view()[index];
64+
if (dataItem.ProductName == Product) {
7665
alert("Queso Cabrales is Selected");
7766
}
7867
}
7968
}
8069
81-
$(document).ready(function() {
70+
$(document).ready(function () {
8271
var dataSource = new kendo.data.DataSource({
8372
transport: {
8473
read: {
85-
url: "https://demos.telerik.com/service/v2/core/Products"
74+
url: "https://demos.telerik.com/service/v2/core/Products",
8675
}
87-
},
76+
}
8877
pageSize: 15
8978
});
9079
@@ -101,53 +90,54 @@ How can I check if a certain value corresponds to a DataItem property of the sel
10190
});
10291
10392
function onDataBound() {
104-
kendoConsole.log("ListView data bound");
93+
console.log("ListView data bound");
10594
}
10695
10796
function onChange() {
10897
var data = dataSource.view(),
109-
selected = $.map(this.select(), function(item) {
110-
return data[$(item).index()].ProductName;
111-
});
112-
113-
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
98+
selected = $.map(this.select(), function (item) {
99+
return data[$(item).index()].ProductName;
100+
});
101+
102+
console.log(
103+
"Selected: " +
104+
selected.length +
105+
" item(s), [" +
106+
selected.join(", ") +
107+
"]"
108+
);
114109
}
115110
});
116111
</script>
117112
118113
<style>
119-
.product
120-
{
114+
.product {
121115
float: left;
122116
width: 220px;
123117
height: 110px;
124118
margin: 0;
125119
padding: 5px;
126120
cursor: pointer;
127121
}
128-
.product img
129-
{
122+
.product img {
130123
float: left;
131124
width: 110px;
132125
height: 110px;
133126
}
134-
.product h3
135-
{
127+
.product h3 {
136128
margin: 0;
137129
padding: 10px 0 0 10px;
138-
font-size: .9em;
130+
font-size: 0.9em;
139131
overflow: hidden;
140132
font-weight: normal;
141133
float: left;
142134
max-width: 100px;
143135
text-transform: uppercase;
144136
}
145-
.k-pager
146-
{
137+
.k-pager {
147138
border-top: 0;
148139
}
149-
.demo-section .k-listview:after
150-
{
140+
.demo-section .k-listview:after {
151141
content: ".";
152142
display: block;
153143
height: 0;

‎docs/knowledge-base/jquery-splitter-drag-event.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Capturing Drag Events in the jQuery Splitter
3+
description: Learn how to capture drag events while using the jQuery Splitter component.
4+
type: how-to
5+
page_title: Tracking Drag Events with the jQuery Splitter Component
6+
slug: jquery-splitter-drag-event
7+
tags: splitter, kendo-ui, jquery, drag-event, draggable
8+
res_type: kb
9+
ticketid: 1689930
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Splitter for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>Current</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to capture drag events while using the jQuery Splitter component, similar to the `sizeChange` event in the Kendo UI for Angular Splitter. I have attempted to attach events to `kendoDraggable`, bind to `layoutChange`, and other methods, but none have successfully captured real-time drag events for the Splitbar.
30+
31+
This knowledge base article also answers the following questions:
32+
- How can I capture the drag event while resizing a Splitbar in the jQuery Splitter?
33+
- Is it possible to bind drag events to the Splitbar in the jQuery Splitter?
34+
- What is the correct approach to handle Splitbar drag events in the jQuery Splitter?
35+
36+
## Solution
37+
38+
To capture drag events for the Splitbar in the jQuery Splitter, you need to access the Draggable widget of the Splitbar and bind to its [`drag`](/api/javascript/ui/draggable/events/drag), [`dragstart`](/api/javascript/ui/draggable/events/dragstart), and [`dragend`](/api/javascript/ui/draggable/events/dragend) events. Below is an implementation example:
39+
40+
### Example Code
41+
```javascript
42+
$(document).ready(function() {
43+
var splitter = $("#splitter").kendoSplitter().data("kendoSplitter");
44+
45+
// Access the Draggable widget of the Splitbar
46+
splitter.resizing._resizable.draggable.bind("drag", function(e) {
47+
console.log("Drag event triggered");
48+
});
49+
50+
splitter.resizing._resizable.draggable.bind("dragend", function(e) {
51+
console.log("Drag ended");
52+
});
53+
});
54+
```
55+
56+
This approach allows you to handle the drag events as the Splitbar is moved, enabling real-time tracking during resizing.
57+
58+
### Dojo Example
59+
For a live demonstration, refer to the following Dojo example:
60+
61+
```dojo
62+
<div id="splitter">
63+
<div>Pane A</div>
64+
<div>Pane B</div>
65+
</div>
66+
<script>
67+
$(document).ready(function () {
68+
var splitter = $("#splitter")
69+
.kendoSplitter({
70+
panes: [{ collapsible: true }, {}],
71+
resize: function (e) {
72+
/* The result can be observed in the DevTools(F12) console of the browser. */
73+
console.log("Splitter pane has been resized");
74+
}
75+
})
76+
.data("kendoSplitter");
77+
78+
// Access the Draggable widget of the Splitbar
79+
splitter.resizing._resizable.draggable.bind("dragstart", function (e) {
80+
console.log("Drag started");
81+
});
82+
83+
splitter.resizing._resizable.draggable.bind("drag", function (e) {
84+
console.log(e);
85+
console.log("Drag started");
86+
});
87+
88+
splitter.resizing._resizable.draggable.bind("dragend", function (e) {
89+
console.log("Drag ended");
90+
});
91+
});
92+
</script>
93+
```
94+
95+
## See Also
96+
97+
- [Kendo UI for jQuery Splitter Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/splitter/overview)
98+
- [Kendo UI jQuery Draggable API Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/draggable)

0 commit comments

Comments
 (0)