This improvement is for Accessibility related on Dialog window.
When we create a dialog window using the below code snippet, Screen reader is not reading the Header content or Header level of the Dialog window when we press 'H' key. NVDA screen reader is unable to find any header tags in the Kendo dialog. Users of NVDA screen reader will find it difficult to understand the UI screen. So, I request Kendo UI team include this feature to be able to configure using code for improving this accessibility feature. Thanks.
Link to Kendo dojo : Kendo Sample dojo link
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
actions: [{
text: "OK",
action: function(e){
return false;
},
primary: true
},{
text: "Cancel"
}]
});
</script>
The following issue is only present in a Firefox browser:
Changing the value of a TimePicker input field through code can sometimes cause the entire browser to scroll to the top of the page.
Was tested in:
Firefox 114.0 (64bit)
(User Agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0")
Reproduction:
Test in Dojo: https://dojo.telerik.com/UdoLAkat/4
Expected behaviour:
- After step 5. the value should just update in the TimePicker input field without causing any scrolling to happen.
I am assuming this behaviour happens because the TimeView component is attempting to scroll within its <ul> element to the option that has been selected by the .value(...) call, but since the entire TimeView component and all of its elements are hidden, Firefox somehow misinterprets the scrolling and scrolls the main viewport to the top of the page instead.
Hi
again this request is not urgent as I implemented this myself.
I'd like to have 'nextRecord' 'previousRecord' functionality in the grid widget.
We have a next/previous record button on our forms and as floating buttons to navigate the records.
As soon as we navigate to the next/previous record, the form loads the data of the concerning record.
My current implementation is as follows:
/** * * Grid with navigation code included * * selectRowByIndex: 0 based row selection by index of currently shown rows * * @author Alex Bernhard <alex.bernhard@uzh.ch> * @version 1.2.0 */ (function ($) { var kendo = window.kendo, ui = kendo.ui, Grid = ui.Grid, self = this; var NavigatableGrid = Grid.extend({ init: function (element, options) { // assign that to this var self = this; this.selectedIndex = 0; this.updateAfterLoad = false; // call the base function to create the widget Grid.fn.init.call(this, element, options); if (typeof options['updateMethod'] == 'function') { this.updateMethod = options['updateMethod']; } self.bindEvents(); }, options: { name: "NavigatableGrid", }, bindEvents: function () { this.bind("change", function () { this.setSelectedIndex(); }); this.bind("dataBound", function () { this.selectRowByIndex(this.selectedIndex); // after selecting the next row, shall update be called here? // happens only when navigating to a new page // or after search results are present if (this.updateAfterLoad) { this.updateAfterLoad = false; let selectedItem = this.dataItem(this.select()); if(selectedItem != null && selectedItem.hasOwnProperty('id')){ this.updateMethod(selectedItem.id); } } return false; }); }, updateMethod: function () { }, setSelectedIndex: function () { let dataRows = this.items(); this.selectedIndex = dataRows.index(this.select()); return this.selectedIndex; }, selectRowByIndex: function (index) { // zero based index this.clearSelection(); this.select('tr:eq(' + index + ')'); }, selectRowById: function (id) { this.clearSelection(); let view = this.dataSource.view(); let _self = this; let rows = $.grep(view, function (item) { return item.id == id; }).map(function (item) { return _self.tbody.find("[data-uid=" + item.uid + "]"); }); if (Array.isArray(rows) && typeof rows[0] !== 'undefined') { this.select(rows[0]); } }, previousRow: function () { // get current number of rows let pageSize = this.dataSource.pageSize(); let currentPage = this.dataSource.page(); // already first row of current page ? if (this.selectedIndex == 0) { let previousPage = currentPage - 1; // not the first page yet - load the previous page and read the data // after load if (previousPage > 0) { this.selectedIndex = pageSize - 1; // last row of previous page this.updateAfterLoad = true; this.dataSource.page(previousPage); } } else { // set next row index (0 based !!) this.selectedIndex = Math.max(this.selectedIndex - 1, 0); this.selectRowByIndex(this.selectedIndex); this.updateAfterLoad = false; let selectedItem = this.dataItem(this.select()); if(selectedItem != null && selectedItem.hasOwnProperty('id')){ this.updateMethod(selectedItem.id); } } }, nextRow: function () { // get current number of rows let numRows = this.items().length; let pageSize = this.dataSource.pageSize(); let numPages = this.dataSource.totalPages(); let currentPage = this.dataSource.page(); // already last row of current page ? if (this.selectedIndex == numRows -1) { let nextPage = currentPage + 1; // not the last page yet - load the next page and read the data // after load if (nextPage <= numPages) { this.dataSource.page(nextPage); this.selectedIndex = 0; this.updateAfterLoad = true; } } else { // set next row index (zero based !!) this.selectedIndex = Math.min(this.selectedIndex + 1, pageSize-1); this.selectRowByIndex(this.selectedIndex); let selectedItem = this.dataItem(this.select()); if(selectedItem != null && selectedItem.hasOwnProperty('id')){ this.updateMethod(selectedItem.id); } } } }); kendo.ui.plugin(NavigatableGrid); })(jQuery);
And an example usage is like:
accessionGrid = $("#accession-grid").kendoNavigatableGrid({ .... standard code for kendo grid // call method in form when navigating updateMethod: function(data){accessionForm.update(data)}, ..... }); // code for grid navigation function nextAccessionGridRow(){ accessionGrid.nextRow(); } function previousAccessionGridRow(){ accessionGrid.previousRow(); }
Hi
its not an urgent request as I implemented that feature already. However, I am not a good prgrammer and I would like to have this feature included by more skilled programmers.
Basically our GUI shows the data table as shown in the attached image. Now you can open quite a lot of floating windows and subwindows to work on the data. See second attachment. As this is sometimes confusing, we allow to dock/undock the windows on the left or right side of the table, depending on the relative position while clicking the dock button.
Kind regards
Alex
Allow using kendo templates in columns.attributes for example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: {
"data-id": "#:data.id#",
"data-clientid": "#:data.clientId#",
}
} ],
dataSource: [ { id:1, name: "Jane Doe", clientId:"#223" }, { id:2, name: "John Doe", clientId:"#354" }]
});
</script>
The Kendo UI ListView widget supports setting the selected items via the select method. Up to version 2022.2.802, calling select() triggered a change event. This is no longer the case.
You can see the different behaviors in these two DOJOS: 2022.2.802 vs 2023.1.117 (the item gets selected after a second to make sure the dataSource has finished loading).
Add a hidden input to store the current value in it at all times, and a visible display input that has the month/day/year or current value displayed in it; it solved all of the issues and is currently implemented on numerous other Kendo form input controls.
This will make the DateInput compatible with JQuery Unobtrusive Validation.