See https://demos.telerik.com/kendo-ui/menu/scrollable

When you hover over the left or right arrow on the menu, the menu scrolls.

Our client *hates* that, and only wants the menu to scroll when you actually click on the left/right arrow.

Request:

Add an option so that we can turn OFF the scrolling on hover on the left/right scroll buttons in the menu.

Support ticket related: https://www.telerik.com/account/support-center/view-ticket/1662811

In the jquery scrollView component https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview there is no current way to enableto 'endless' or 'wrap around' option like the react component has

ref: https://www.telerik.com/kendo-react-ui/components/scrollview/endless-scrolling/

Requesting that this feature be added.

For my SPECIFIC my use case (which will probably not work for everyone), I did add a workaround for now

(not fond of it as it relies on the implementation details of the current version)

In our SCSS, I added an override to force the previous/next buttons to always be visible, even after the control hides them

...
		&.k-scrollview {

			.k-scrollview-prev, .k-scrollview-next {

				//Prevent the control from hiding these buttons when it reaches the 'end'
				//We will be using some custom logic to force the 'wrap around'
				display:flex !important; 
...

Then I subscribed click events and did some manual handling on the buttons

//After the page load & scroll view is initialized...

//note: $slides is a jquery instance that the scrollView is attached to
let scrollView = $slides.data("kendoScrollView");

let $prev = $slides.find('.k-scrollview-prev');
let $next = $slides.find('.k-scrollview-next');
$prev.on("click", function (e) {
	// NOTE: Here we are looking at an 'internal' variable, this is dependent on the version of Kendo we are using - may need to change
	// in the future
	// I figured this out by looking at the implementation in the source
	//		\src\js\kendo.scrollview.js
	let pageCount = scrollView._content.pageCount;
	let currentPage = scrollView._content.page;
	if (pageCount > 1 && currentPage === 0) {
		e.preventDefault();
		e.stopPropagation();
		scrollView.scrollTo(pageCount-1);						
	}
});

$next.on("click", function (e) {
	let pageCount = scrollView._content.pageCount;
	let currentPage = scrollView._content.page;
	if (pageCount > 1 && currentPage === pageCount - 1) {
		e.preventDefault();
		e.stopPropagation();
		scrollView.scrollTo(0);						
	}
});

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Steps to reproduce (filter):

1. Copy a date formatted as MM/dd/yy
2. Paste it into a date column filter
3. Attempt to apply filter
4. Notice that the filter is ignored

Steps to reproduce (cell edit):

1. Copy a date formatted as MM/dd/yy
2. Paste it into a cell datepicker field
3. Notice the validation flags it as an invalid date

var chart = $("#chart").data("kendoChart");
var series = [];

$(theData.Serieses).each(function (index) {
	series.push({
		name: theData.Serieses[index].Name,
		field: theData.Serieses[index].Name,
		data: theData.Serieses[index].SeriesPoints,
		xField: "X",
		yField: "Y",
		color: theData.Serieses[index].Colour,
		markers: {
			type: theData.Serieses[index].Shape
		}
	});
});
chart.setOptions({ series: series, noData: series.length == 0 });
chart.redraw();
console.log(chart.options);

When updating a chart after instantiation, because noData defaults to true, the overlay is shown immediately

if you try and set noData via setOptions then redraw(), the overlay is still in place

Honestly, this should have been marked as a breaking change as every single chart has to be updated to force noData to false just to show initially

there is no binding for noData

e.g.

        noData?: boolean | undefined;

    interface ChartOptions {
        name?: string | undefined;
        autoBind?: boolean | undefined;
        axisDefaults?: ChartAxisDefaults | undefined;
        categoryAxis?: ChartCategoryAxisItem | ChartCategoryAxisItem[] | undefined;
        chartArea?: ChartChartArea | undefined;
        dataSource?: any|any|kendo.data.DataSource | undefined;
        legend?: ChartLegend | undefined;
        panes?: ChartPane[] | undefined;
        pannable?: boolean | ChartPannable | undefined;
        pdf?: ChartPdf | undefined;
        persistSeriesVisibility?: boolean | undefined;
        plotArea?: ChartPlotArea | undefined;
        renderAs?: string | undefined;
        series?: ChartSeriesItem[] | undefined;
        seriesColors?: any;
        seriesDefaults?: ChartSeriesDefaults | undefined;
        theme?: string | undefined;
        subtitle?: string | ChartSubtitle | undefined;
        title?: string | ChartTitle | undefined;
        tooltip?: ChartTooltip | undefined;
        transitions?: boolean | undefined;
        valueAxis?: ChartValueAxisItem | ChartValueAxisItem[] | undefined;
        xAxis?: ChartXAxisItem | ChartXAxisItem[] | undefined;
        yAxis?: ChartYAxisItem | ChartYAxisItem[] | undefined;
        zoomable?: boolean | ChartZoomable | undefined;
        axisLabelClick?(e: ChartAxisLabelClickEvent): void;
        dataBound?(e: ChartDataBoundEvent): void;
        drag?(e: ChartDragEvent): void;
        dragEnd?(e: ChartDragEndEvent): void;
        dragStart?(e: ChartDragStartEvent): void;
        legendItemClick?(e: ChartLegendItemClickEvent): void;
        legendItemHover?(e: ChartLegendItemHoverEvent): void;
        legendItemLeave?(e: ChartLegendItemLeaveEvent): void;
        noteClick?(e: ChartNoteClickEvent): void;
        noteHover?(e: ChartNoteHoverEvent): void;
        noteLeave?(e: ChartNoteLeaveEvent): void;
        paneRender?(e: ChartPaneRenderEvent): void;
        plotAreaClick?(e: ChartPlotAreaClickEvent): void;
        plotAreaHover?(e: ChartPlotAreaHoverEvent): void;
        plotAreaLeave?(e: ChartPlotAreaLeaveEvent): void;
        render?(e: ChartRenderEvent): void;
        select?(e: ChartSelectEvent): void;
        selectEnd?(e: ChartSelectEndEvent): void;
        selectStart?(e: ChartSelectStartEvent): void;
        seriesClick?(e: ChartSeriesClickEvent): void;
        seriesHover?(e: ChartSeriesHoverEvent): void;
        seriesOver?(e: ChartSeriesOverEvent): void;
        seriesLeave?(e: ChartSeriesLeaveEvent): void;
        zoom?(e: ChartZoomEvent): void;
        zoomEnd?(e: ChartZoomEndEvent): void;
        zoomStart?(e: ChartZoomStartEvent): void;
    }

Line Chart Crosshair doesn't display on Tablets.

Display's fine on Desktop & also on Mobile, but tested on iPad and Android tablets the Crosshair line does not display.

kendo.2020.1.114

https://dojo.telerik.com/yBSdUQYS demonstrates the issue:

When a grid detail row is expanded, and pushUpdate() is called on it, the row collapses.

What is expected is for the grid row to remain in its prior state (expanded or collapsed.)

Until this is fixed, is there a work-around, other than manually re-expanding the detail row(s)? This is not a feasible work-around in which multiple nested grid rows are collapses and re-expanded, as this causes the UI to jump unexpectedly for the user.

Hello,

We're interested  in a date input wheel (see attached images) as it is a feature that is especially for useful for mobile users. Telerik's technical support directed us here since the date widget doesn't offer this feature currently.

Kind regards

Bug report
Line Chart Crosshair doesn't display on iPad iOS 17

Reproduction of the problem
Dojo: https://dojo.telerik.com/mGtuUvac

Expected/desired behavior
Crosshair shall display on tap

Environment
Browser: [all]

See demo page: https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker/configuration/clearbutton

The example uses "<input id="colorpicker" type="color" />".  Opening the preview reveals a black color.
Change the input-tag to div and the 'clear'-style is presented in the preview.
Or remove the color type when using the input-tag: "<input id="colorpicker" />" also correctly represents clear.

I can also locally reproduce it with Kendo UI jQuery v2024.4.1112.

Would like to request that the ability to set a 'CenterTemplate' be added to the Radial and Linear Gauge charts. We show a percentage based label using jquery by appending to the chart wrap a label to show 'x of y (z%)'. What we've seen is that when you go to export the chart, this label doesn't follow with it.

When using other charting types, for example the Arc Gauge or Circular Gauge, they do have a property called 'CenterTemplate' which allows us to do labels like above and have it export correctly.

Can the property be added to other Charts so that we can customize a label to show information such as percentage based text?

Hi Guys,

Just upgrade to the 2025.1.211 release and during testing I have spotted a fundamental issue which should have been picked up during QA.

Run the following dojo

    https://dojo.telerik.com/dBSXoLYq

Open up the filter menu on the date column and hit the icon and you will find the date pop-up is constrained within the filter menu and cannot be navigated.
See attached screenshot - DateFilter.png

Note: This also effects filtering Date Time columns as well

Is there a workaround for this or do we have to wait another couple of months for the next release because as things stand we cannot pushed this to production.

Regards
Alan.

The same way it is possible to make the search case-insensitive by setting columns.filterable.ignoreCase to true, it would be great if there was a way to add a custom filter (e.g. make the search diacritics-insensitive, with a custom function or as part of provided functionality). Thanks in advance.

The Kendo-UI Diagram widget supports moving the whole diagram using the pan() method. However, the given offset does always have to be absolute.

Consider the following example:

The diagram is zoomed in and therefore not fully visible - assume a current offset of (-100, -100). The users should be able to pan using keyboard shortcuts. Whenever pressing one of the arrow keys, the diagram is moved in the corresponding direction by e.g. 50px:

If the user presses [ArrowRight], pan() needs to be called with an offset of (-50, -100).
If the user presses [ArrowUp], pan() needs to be called with an offset of (-100, -150).

However, since I do not know how much the diagram has already been moved, I cannot set the absolute offset required.

I have seen that pan() returns the current offset when being called without arguments, but this is not documented. Is this safe to use for that purpose or is there a better alternative? If yes, the documentation should be updated.

The stack property in the Kendo Area Chart does not honor groups as separate stacking contexts.

Instead, everything gets stacked together if `stack: true` is applied.

For other chart types you can overcome this instead of just stack: true, set different stack groups, such as "A" and "B", so they do not stack together.

series: [

    {

     field: "value",

     categoryField: "year",

     name: "United States Group 1 - Series 1",

     stack: "A",  // Separate stack group

     opacity: 0.5  // Transparency for visibility

    },

    {

     field: "value1",

     categoryField: "year",

     name: "United States Group 1 - Series 2",

     stack: "A"   // Part of the same stack as the first one

    },

    {

     field: "value2",

     categoryField: "year",

     name: "United States Group 2 - Series 1",

     stack: "B"   // A different stack group

    },

    {

     field: "value3",

     categoryField: "year",

     name: "United States Group 2 - Series 2",

     stack: "B"   // Part of the second group stack

    }

]