Currently, the Kendo UI RangeSlider provides a single-colored track (.k-slider-track) with a separate style applied only to the selected range. However, in many modern design requirements, there is a need to split the track into multiple colored sections (e.g., 3 or more segments with different colors) to visually represent thresholds, ranges, or categories.
Example Use Cases:
Displaying low, medium, and high ranges with green, yellow, and red colors.
Visualizing different risk or performance levels directly on the slider track.
Providing a better UI experience by mapping ranges to business values.
Requested Feature:
Add native support to configure multiple color segments within the RangeSlider track (either via configuration options or styling hooks). Ideally, developers should be able to specify:
Number of segments.
Color for each segment.
Segment boundaries (percentage or value-based).
Workarounds Tried:
Custom CSS overlays and pseudo-elements can partially simulate the effect, but they are not reliable or fully aligned with the slider’s rendering behavior.
Impact:
This feature would enhance usability and visualization, making the RangeSlider more flexible for dashboards, financial apps, performance monitoring, and other business-critical UI scenarios.
Reference:
Please find an attached image illustrating the requested multicolored track (example with 3 segments: green, yellow, and red).
We have a column in our grid bound to a complex JSON object. When a different column's value is changed, we need to change the nested properties in the complex JSON object.
To do this, in the grid's Save event, we are calling model.set("theComplexObject.NestedProperty", newValue). However, doing this does not automatically update the UI for that row's cell. Furthermore, it never seems to mark the column dirty. Manually calling grid.refresh() will fix the issue, but the grid we are working on has a lot of columns and it adds a performance hit.
This approach works for all of our other columns that do NOT use complex objects. They correctly show the dirty flag and new model value after the save operation completes.
Below is a Dojo example with the save event wired up and a complex name column. It's worth mentioning that the dirty flag also doesn't appear to be working on the eye color column. This may be another bug introduced in a newer version of Kendo.
https://dojo.telerik.com/ZHkxwJee
We would like the ability to execute custom actions once a control has been fully initialized and rendered.
Use Case
On our login page, we use the Form control. After the Form control is created, we need to reposition our SSO buttons so that they appear beneath the default buttons rendered by the form. Without a reliable event, it is difficult to determine when the control is ready for safe modification.
Proposed Solution
Introduce a Created event (or similar) that is triggered once the control is fully rendered. This event would provide a hook for developers to perform additional UI adjustments or integrate custom functionality.
Reference
Syncfusion ASP.NET Core controls provide this functionality through a Created event.
Currenlty, styles/font-icons/index.css has this line at the bottom:
/*# sourceMappingURL=index.css.map */
But the map file is not part of the distribution files, so it's causing the browser to throw an additional request for the map file.
Currenlty, the index.css.map is present in the node_modules/@progress/kendo-font-icons/dist/index.css :
But is not part of the Kendo jQuery distribution.
The distribution should be revised and the map file should be copied.
When a pager control uses responsive mode, but renders initially as hidden, the control fails to render properly.
The control should render to the appropriate responsive mode regardless of whether the control is visible or not when it is initially rendered.
Hi Team,
I would like to request the source code from the AI Service from the Kendo UI Grid demos be available to download.
Thank you!
Hello
Starting from version 2025.2.520:
Kendo Grid with NumericTextBox cell editor and "navigatable: true" exit edit cell state on double click/hold to select number inside editor.
Earlier versions did not have this issue.
Scenario:
Inside cell with NumericTextBox editor trying to select value without exit from edit cell state.
On click cell, that already in edit mode, switch to read mode (NumericTextBox disappears)
Desirable behavior:
Copy and paste to cell without exit and enter again in edit cell state.
Select all value without loosing editing cell state.
Dojo
Views - Month - numberOfWeeks (set to 6 weeks), do not need to see previous or next month week. Only show days of the selected month.
This is OK:
This is not, unnecessary week of Aug 03. The extra week adds to a busy calendar clutter.
When building with NPM, the glob is mismatched. This is currently related to the source code build.
Receiving the specific error message:
[!] SyntaxError: The requested module 'glob' does not provide an export named 'default'
When a user edits a cell/row and presses enter, the cell is marked as dirty. However, the Save and Cancel buttons remain disabled, thus the user should focus on a different cell before being able to save changes.
The cell is closed and marked as dirty, the 'Save changes and 'Cancel changes' buttons remain disabled.
The buttons should be enabled once the cell is marked as dirty.
cellClose: function(e){
e.sender._toggleToolbarEditingItemsVisibility()
},
Hi team,
I think there is a bug in the dependency detection.
In the attached "config_buged.js" i have chosen some components. The component "chiplist" was partially checked due to dependency.
When lunching my application I got the error :
Message: e(...).kendoChipList is not a function
at init._createList (kendo.custom.min.js:91:8505)
at new init (kendo.custom.min.js:91:3218)
at init._attachGroupable (kendo.custom.min.js:133:96797)
at init._groupable (kendo.custom.min.js:133:96348)
at init._continueInit (kendo.custom.min.js:133:33864)
at new init (kendo.custom.min.js:133:33735)
at HTMLDivElement.<anonymous> (kendo.custom.min.js:1:42737)
at jQuery.each (jquery-3.1.1.js:368:19)
at jQuery.fn.init.each (jquery-3.1.1.js:157:17)
at e.fn.<computed> [as kendoGrid] (kendo.custom.min.js:1:42713)
I was forced to totaly check the "chipList" component as seen in the attached file config.json
When the workbook is exported to Excel, it is currently not possible to display the progress for example, in percentage of exported data.
You are returning a "jquery promise", you can call the ".notify" function while the process is running and tell us that you are at step X of Y, when running these settimeout.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
}
]
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 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.
It will be really useful if we could include a new 'filtering mode' in which operators like 'and' or 'or' are allowed in the filtering input box.
For instance, using the "doesnotcontain" with 'march or july or september' will allow users to exclude multiple conditions in a single filter
In my application, I have grids with dozens of hidden fields.
It would be beneficial if I could filter the available columns similar to what's available in the Windows Forms column chooser:
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.
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?