Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
kendo-bot committed Oct 14, 2024
1 parent b1fa261 commit 934537e
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 9 deletions.
6 changes: 3 additions & 3 deletions docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Implementing "moveTop" and "moveBottom" Custom Tools
title: Implementing 'moveTop' and 'moveBottom' Custom Tools
description: An example on how to create custom tools that move the selected item to the top or the bottom of the options when using the Telerik UI for {{ site.framework }} ListBox.
type: how-to
page_title: Implementing "moveTop" and "moveBottom" Custom Tools of the ListBox
page_title: Implementing 'moveTop' and 'moveBottom' Custom Tools of the ListBox
slug: listbox-move-top-bottom-tools
tags: listbox, custom, tools, moveTop, moveBottom, toolbar, telerik, core, mvc
res_type: kb
Expand All @@ -23,7 +23,7 @@ res_type: kb

## Description

How can I create custom tools ("moveTop" and "moveBottom") that move the selected option at the top or the bottom of all ListBox options?
How can I create custom tools (*moveTop* and *moveBottom*) that move the selected option at the top or the bottom of all ListBox options?

## Solution

Expand Down
4 changes: 2 additions & 2 deletions docs/api/javascript/data/gantttask.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ The `id` of the parent task.
end: new Date("2014/6/17 11:00")
});
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(task.parentId); // outputs "1"
console.log(child.parentId); // outputs "1"
</script>

### percentComplete `String|Number|Object`
Expand All @@ -304,7 +304,7 @@ The completion percentage of the task.
end: new Date("2014/6/17 11:00")
});
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(task.percentComplete); // outputs "0.55"
console.log(parent.percentComplete); // outputs "0.55"
</script>

### start `Date`
Expand Down
10 changes: 9 additions & 1 deletion docs/api/javascript/data/schedulerdatasource.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,17 @@ If the data source is initialized by the scheduler, its [timezone](/api/javascri

The complete list of the supported timezones is available in the [List of IANA time zones](https://en.wikipedia.org/wiki/List_of_IANA_time_zones) Wikipedia page.

#### Example - configure the data source model model
#### Example - configure the data source model

<script>
// include kendo.timezones.js
var version = kendo.version;

$('<script/>', {
type:'text/javascript',
src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
}).appendTo('head');

var dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
Expand Down
26 changes: 25 additions & 1 deletion docs/api/javascript/ui/pdfviewer.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,31 @@ Specifies the url to be passed to the pdfjs processor.

### dplProcessing `Object`

Specifies the DPL configuration options.
Specifies the DPL configuration options. For a complete demo and a backend implementation, check the <a href="https://demos.telerik.com/aspnet-core/pdfviewer/dpl-processing" target="_blank">Telerik UI for ASP.NET Core DPL Processing demo</a>.

#### Example

<div id="pdfviewer"></div>
<script>
$("#pdfviewer").kendoPDFViewer({
dplProcessing: {
read: {
url: ""
},
download: {
url: ""
},
upload: {
url: ""
}
},
toolbar: {
items: [
"pager", "spacer", "open", "download"
]
}
});
</script>

### dplProcessing.read `Object`

Expand Down
42 changes: 41 additions & 1 deletion docs/api/javascript/ui/treeview.md
Original file line number Diff line number Diff line change
Expand Up @@ -1347,7 +1347,7 @@ If provided, the node that should be selected.

`jQuery` The currently selected node.

#### Example
#### Example - select a node by passing an element

<div id="treeview"></div>
<script>
Expand All @@ -1370,6 +1370,46 @@ If provided, the node that should be selected.
treeview.select($()); // clears selection
</script>

#### Example - select a node by passing a jQuery selector

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
]
});

var treeview = $("#treeview").data("kendoTreeView");
treeview.select($(".k-treeview-item").last());

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(treeview.text(treeview.select())); // logs "bar"

</script>

#### Example - select a node by passing a string

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
]
});

var treeview = $("#treeview").data("kendoTreeView");
treeview.select(".k-treeview-item:last");

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(treeview.text(treeview.select())); // logs "bar"

</script>

### setDataSource

Sets and binds a dataSource to the widget.
Expand Down
62 changes: 62 additions & 0 deletions docs/knowledge-base/daterangepicker-customize-behavior.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: Customizing DateRangePicker Behavior in Kendo UI
description: Learn how to modify the DateRangePicker control behavior to update start and end date selections accurately.
type: how-to
page_title: How to Customize DateRangePicker Selection Behavior
slug: daterangepicker-customize-behavior
tags: kendo ui, daterangepicker, custom behavior, date selection
res_type: kb
---

## Description
When using the [DateRangePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker) control, selecting an end date updates the start date field instead of the end date field. The goal is to ensure that when either the start or end date is selected, the corresponding field updates accurately, providing a seamless user experience.

This KB article also answers the following question:
- What code changes are required to update the start and end dates correctly in DateRangePicker?

## Solution
To achieve the desired behavior, implement custom logic using the [`change`](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/change) and [`open`](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/open) events of the DateRangePicker. This solution involves tracking the selected start and end dates and updating them based on user interactions.

1. **Initialize the DateRangePicker and define custom logic:**

```javascript
$(document).ready(function() {
var savedRange = {};

$("#daterangepicker").kendoDateRangePicker({
change: function() {
var range = this.range();

if (!savedRange.start && range.start) {
savedRange.start = range.start;
}

if (range.start && range.end) {
savedRange = range;
} else if (range.start) {
var newDate = range.start;

if (newDate > savedRange.start) {
savedRange.end = newDate;
} else {
savedRange = { start: newDate, end: null };
}
}
this.range(savedRange);
},
open: function() {
if (savedRange.start || savedRange.end) {
this.range(savedRange);
}
}
});
});
```
2. **Test the behavior with a dojo example:**

Visit the dojo example at [https://dojo.telerik.com/NShpKjFe](https://dojo.telerik.com/NShpKjFe) to see the custom behavior in action.

## See Also
- [DateRangePicker Change Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/change)
- [DateRangePicker Open Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/open)
- [Official Kendo UI DateRangePicker Documentation](https://docs.telerik.com/kendo-ui/controls/editors/daterangepicker/overview)
2 changes: 1 addition & 1 deletion docs/knowledge-base/use-custom-action-icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ How can I use custom icons for the action buttons of a Kendo UI for jQuery Windo

To achieve the desired scenario, use any of the following approaches:

* Use some of the [built-in Kendo UI icons, which are part of the theme sprite](https://demos.telerik.com/kendo-ui/styling/icons). Note that you can only use the `"normal"` icons that work with a `k-i-...` CSS class.
* Use some of the [built-in Kendo UI icons, which are part of the theme sprite](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons#list-of-font-icons). Note that you can only use the `"normal"` icons that work with a `k-i-...` CSS class.
* Use a custom icon, which is not provided by or related to Kendo UI.

The example below demonstrates the two options of how to use custom icons for the action buttons of a Kendo UI Window. Note that the custom Window action name takes part in the generated CSS class of the icon's `span` element in the Window title bar. For example, an action name `abc` is going to generate a `span.k-i-abc` element in the title bar. When using Kendo UI icons, there is no need to write additional CSS code. When using non-Kendo UI icons, custom CSS is required, so that the generated CSS class is assigned the desired background image.
Expand Down

0 comments on commit 934537e

Please sign in to comment.