diff --git a/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md b/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md index 4edf792df7e..b36522d1368 100644 --- a/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md +++ b/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md @@ -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 @@ -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 diff --git a/docs/api/javascript/data/gantttask.md b/docs/api/javascript/data/gantttask.md index 8f98703266b..8c78870960c 100644 --- a/docs/api/javascript/data/gantttask.md +++ b/docs/api/javascript/data/gantttask.md @@ -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" ### percentComplete `String|Number|Object` @@ -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" ### start `Date` diff --git a/docs/api/javascript/data/schedulerdatasource.md b/docs/api/javascript/data/schedulerdatasource.md index 9fb838dbad3..2e14da7b7d2 100644 --- a/docs/api/javascript/data/schedulerdatasource.md +++ b/docs/api/javascript/data/schedulerdatasource.md @@ -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 ### dplProcessing.read `Object` diff --git a/docs/api/javascript/ui/treeview.md b/docs/api/javascript/ui/treeview.md index 3f1e379a696..e4e2619da00 100644 --- a/docs/api/javascript/ui/treeview.md +++ b/docs/api/javascript/ui/treeview.md @@ -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
+#### Example - select a node by passing a jQuery selector + + + + +#### Example - select a node by passing a string + + + + ### setDataSource Sets and binds a dataSource to the widget. diff --git a/docs/knowledge-base/daterangepicker-customize-behavior.md b/docs/knowledge-base/daterangepicker-customize-behavior.md new file mode 100644 index 00000000000..b0486aec1af --- /dev/null +++ b/docs/knowledge-base/daterangepicker-customize-behavior.md @@ -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) \ No newline at end of file diff --git a/docs/knowledge-base/use-custom-action-icons.md b/docs/knowledge-base/use-custom-action-icons.md index bd16a96317f..5bd60be701f 100644 --- a/docs/knowledge-base/use-custom-action-icons.md +++ b/docs/knowledge-base/use-custom-action-icons.md @@ -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.