I have a tab control, and a number of the related views contain grids.
If a grid is created in a tab view that is not visible, then the grid pager renders as if it was on a tiny mobile screen. The only way you can make it render the pager correcly is to manually resize the browser window after the grid has become visible.
I have a simple demonstration here: https://dojo.telerik.com/eCuQAqEm
The behavior is the same in both Chrome and Firefox.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/tabstrip/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section">
<div id="tabstrip">
<ul>
<li class="k-active">
Visible Grid
</li>
<li>
Hidden Grid
</li>
</ul>
<div>
<div id="visibleGrid"></div>
</div>
<div>
<div id="hiddenGrid"></div>
</div>
</div>
</div>
<script>
const data = [];
for (let i = 0; i < 100; ++i) {
data.push({
columnOne : `Item ${i} Column One`,
columnTwo : `Item ${i} Column Two`
});
}
const gridOptions = {
dataSource: data,
pageable: {
refresh: true,
pageSize: 10,
pageSizes: [10, 20, 30]
},
};
$(document).ready(function() {
$("#tabstrip").kendoTabStrip();
$("#visibleGrid").kendoGrid(gridOptions);
$("#hiddenGrid").kendoGrid(gridOptions);
});
</script>
</div>
</body>
</html>
Good morning,
currently the compatible JQuery versions are only listed in this article: https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support.
Most of the time also with great delay (as of today: 3 versions behind)
Would it be possible to include the compatible versions directly into the Release Notes of new versions?
This way we can safely upgrade JQuery along with new Kendo UI Releases.
Email address lists - and other list inputs for text items - in various apps take text input and render each item in a tag - not unlike the MultiSelect.
A widget in similar form to the MultiSelect could serve this purpose, taking string input from the text input element - as well as being able to filter on active text.
I have rigged a MultiSelect with a view model to perform this function: dojo example. Its not perfect, but seems to work ok.
- ";", "," and space characters are used as string separators to trigger parsing - and split text e.g. from pasted list
- a simple email RegEx rejects values that cant be an address
- email addresses are added to the "available item" list and selected item
- the available items can be pre-populated according to the context
- like in the MultiSelect, the pop-up list can be displayed and filtered as the user types
- the pop-up list can be used to de-select and re-select items, as well as tag clear and "clear all" buttons in the widget
- similar keyboard support is useful, "Ctrl-A", arrow keys etc.
- multi and single tag modes
In a very special case it is impossible to select a value from the ComboBox. It only occurs on iPads.
if ComboBox filter is set, virtualization is on and the datasource is set programmatically after initialization. A data item cannot be selected from the list if it is filtered before hand and the item is located at the second page inside the popup.
Steps to reproduce:
- Open https://dojo.telerik.com/UbuRecut/4 on an iPad
- Wait till data source is set
- Input filter value (Popup should open and be scrollable)
- scroll to the end of the popup
- click element at the end of the list
- No item is selected
Used Dojo Snippet:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
<input id="orders" style="width: 400px" />
<script>
$(document).ready(function() {
const ctrl = $("#orders").kendoComboBox({
template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
dataTextField: "ShipName",
dataValueField: "OrderID",
filter: 'startswith',
virtual: {
itemHeight: 26,
valueMapper: function(options) {
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
type: "GET",
dataType: "jsonp",
data: convertValues(options.value),
success: function (data) {
//the **data** is either index or array of indices.
//Example:
// 10258 -> 10 (index in the Orders collection)
// [10258, 10261] -> [10, 14] (indices in the Orders collection)
options.success(data);
}
})
}
},
height: 520,
}).data('kendoComboBox');
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
type: "GET",
dataType: "json",
success: function (data) {
ctrl.setDataSource(data.d)
}
})
});
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>
</body>
</html>
Bug Title: Columns are not programmatically associated with their table headers.
Severity: Sev2 (High)
Test Environment:
OS Version: 22H2 (OS Build 25352.1)
URL: https://ppe.oneidentity.core.azure-test.net/
Edge Dev: Version 114.0.1807.6 (Official build) dev (64-bit)
Screen Reader: Narrator
Repro steps:
1.Open kendoSample (codepen.io)
2.Navigate through tables.
Actual Result:
Table header and their data are in different tables. Columns are not associated programmatically with their headers.
Expected Result:
Columns should be associated programmatically with their headers.
Severity: Sev 2 (High)
Test Environment:
OS Version: 22H2 (OS Build 25352.1)
Edge Dev: Version 114.0.1807.6 (Official build) dev (64-bit)
Screen Reader: Narrator
Repro steps:
1.Open kendoSample (codepen.io).
2.Navigate through tables.
3.Verify whether Columns are programmatically associated with their table headers or not.
Actual Result:
Table header and their data are in different tables. Columns are not associated programmatically with their headers.
Excepted result:
Columns should be associated programmatically with their headers.
Bug Title: Filter controls are not accessible via keyboard under 'Security Groups and Service Accounts' screen.
Severity: Sev1 (Critical)
Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000
Repro steps:
1.Open https://codepen.io/oneID/pen/LYaGREP
2.Activate populate grid.
3.Try navigating to Column filter controls using keyboard.
4.Observe whether filter controls are accessible via keyboard under 'Security Groups and Service Accounts' screen or not.
Actual Result:
Keyboard focus does not remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.
Expected Result:
Keyboard focus should remain on same control after pressing 'ESC' key to close the opened ‘Filter’ popup present under 'Security Group' screen.
Hello Team,
We are currently facing challenges with the Kendo grid, which is a widely used widget or component at o9Solutions. Although we have been using Kendo for a long time, the widget is failing to meet accessibility standards for some components, which are crucial in today's world.
Regarding the Kendo grid, there is an issue where SR is reading the table twice, once for the header and once for the cells. This can cause confusion for assistive technologies like SR.
Consider the cases of horizontal scroll or fixed column cases also.
Having a single <table> is the standard. We can't create multiple tables, which will violate the good coding practices + accessibility standards.
---
I saw some posts regarding this... where it was mentioned we can remove this Scrollable() . But what are the cons of this if we remove this?
--
We want this functionality like a horizontal or vertical scroll or fixed column cases.But it needs to recognize as a single table.
Currently, the kendo.culture() method accepts only a string argument which is used for mapping an included culture file.
However, it would be beneficial if additional arguments could be passed to the method as well which may override some of the culture file's existing options. For example:
kendo.culture("bg-BG", {
numberFormat: {...},
calendars: {...}
})
Reproduction of the problem
- Follow the steps described in the link here - https://github.com/telerik/kendo-ui-core?tab=readme-ov-file#building-kendo-ui-core
- Create a custom script for validator
npx gulp custom -c validator - Try to load the script and create the components
Current behavior
The validator is not working, error is shown
jQuery.Deferred exception: $(...).kendoNumericTextBox is not a functionExpected/desired behavior
The components should work as expected when custom script is created
Kendo UI ImageEditor, jQuery version. Add Draw simple shapes and text over image like you have in the WPF image editor component.
I saw a slightly similar request but not exactly what I would like.
Thanks, Kurt Miller
Expose the ability to alter default icon content. Similar to how it can done in the Kendo UI for Angular suite - https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-svg-icons
The Kendo Spreadsheet is bound to a Kendo datasource, the datasource defines a schema, but when the JSON comes back the spreadsheet just ignores the schema properties and dumps the entire thing into the sheet.
It would be nice to not have to code up some additional workaround after already having defined the schema I want.
(No control over the JSON structure from the server)
Context: There is an item that illustrates the issue here: https://www.telerik.com/forums/kendo-datepicker-value-not-populated-after-refresh-firefox-only
In Firefox, when using the asp-for tag helper to bind a c# DateTime field to an input element, then calling kendoDatePicker() on that element, the control fails to populate on a soft-refresh (F5). Upon reloading using F5 in Firefox, the input's type is set to datetime-local, and the input 's control variation is changed to the default date picker. Then, the Kendo UI DatePicker is initialized with a blank input which normally has a type of text.
Example project and video of issue are attached.
This is the pertinent code (also happens in latest version of Kendo as well):
public class IndexViewModel
{
public DateTime DateAsDateTime { get; set; }
} public IActionResult Index()
{
return View(new IndexViewModel { DateAsDateTime = DateTime.Today });
}@model IndexViewModel
<input id="dtDate" asp-for="@Model.DateAsDateTime">
<script type="text/javascript">
$(document).ready(function () {
$("#dtDate").kendoDatePicker();
});
</script>
Hi Team,
the SignalR demos are spread out across multiple products and it is hard to get a single cohesive demo that I'm looking for.
- After fresh installation Telerik UI for ASP.NET Core PURCHASED 2024.1.319 (MAT 19, 2004) Start: Demos - Telerik UI for ASP.NET Core 2024 Q1 -> Grid -> SignalR Binding -> hundreds of JS errors -> not working.
see pic. p101.PNG - https://github.com/telerik/ui-for-aspnet-core-examples Telerik.Examples.Mvc
I replace telerik local trial nuget packages with purchased and I add kendo-ui-license.js
I can compile and run the app, but when I change data in one browser -> no changes in other browsers, i.e no SignalR - https://github.com/telerik/ui-for-aspnet-mvc-examples signalR-bound-grid not compilable
- https://github.com/telerik/kendo-ui-demos-service/tree/master/signalr-hubs
This is probably a joke? edited 6 years ago, no Kendo UI, and this can't even start to run - https://www.telerik.com/support/code-library/binding-to-signalr
download SignalRLocalHub.zip -> compile -> run -> everything (delete, edit, add) works excellently. but this is .Net Framework 4.5! and ancient package references and in addition uses Entity Data Model (EDM).
Request
Please create an example that works like 5) without problems and hundreds of JS errors, but with APS.NET Core (current net8) + SignalR (current @microsoft/signalr 8.0.0) + Kendo UI for jQuery Grid - Entity Data Model (EDM) ?
Bug report
Setting an empty string value when using an MVVM ColorPicker throws an error
Reproduction of the problem
- Open the following dojo.
- Notice that the ColorPicker produces an error when the value from the Observable object is set to an empty string.
Current behavior
Setting an empty string through the Observable object throws an error within the console.
Expected/desired behavior
Setting an empty string through the Observable object should not throw an error within the console.
Environment
- Kendo UI version: 2024.1.319
- Browser: [all]
Feature Request/Enhancement to allow series.tooltip configuration for bubble charts in chart initialization.
Since my company is a public entity we are required by law to follow ADA accessibility on our web apps. We are currently using ASP.NET Core MVC and Kendo UI for jQuery. To meet the ADA requirements I have been going through our Kendo Charts and configuring the tooltips to meet the ADA color blindness contrast ratio standard of 3:1.
It came to my attention that I cannot configure the bubble chart's series.tooltip the same way that I can a donut or pie chart. Since I am required to use a certain color of red in my chart and the default tooltip.color is black the contrast for small text does not meet the WCAG AA standard for text under 17 pt.
My feature request/enhancement is to allow charts to all have the same initialization process for things such as series.tooltip to allow easy config to meet ADA standards.
Enhancement
Currently the dialog action buttons can not hold only icons, the API does not provide means to have a button with only an icon or an icon and text. Considering the aforementioned we should extend the API to allow adding of icons inside the action buttons.
When a column is set to sticky in a grid and the user clicks edit and then cancel, that column become unsticky for that row only. This happened when I upgraded from 2022 to 2024 so the bug was created somewhere in there. To reproduce, see this dojo:
https://dojo.telerik.com/@dojolee/evOPeBey
- Shrink the right side of the screen until it is pretty small (about 700px)
- Click Run and make sure there is a horizontal scroll. If not, shrink the right and click run again.
- Scroll and notice that the first column sticks
- Click edit on the first row
- Click cancel
- Scroll and notice that the first row no longer has a sticky column.