Pending Review
Last Updated: 09 Jun 2023 22:53 by Nagarjuna

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>

Pending Review
Last Updated: 09 Jun 2023 11:47 by Alekdandar
Created by: Alekdandar
Comments: 0
Category: Window
Type: Feature Request
0
Currently, when using the HTML Helpers and defining a popup editor for the Grid or Scheduler, for example, there is an option to set the HtmlAttributes. The HtmlAttributes method is, however, inherited from the WidgetBuilderBase class and it sets attributes to the generated html. In the context of the editor, no html is generated as the actual popup window is created on the client when the user presses the edit/create command.

Exposing an attributes configuration would allow for the serialization of the attributes so they can be applied to the window when it is created on the client.
Pending Review
Last Updated: 09 Jun 2023 10:04 by AGB
Hi Guys

Testing the latest v2023.2.606 release I have hit a regression regarding filtering.

To demonstrate open the 'jQuery Grid Frozen Columns' demo

On the 'Order Id' column
    - Open the filter menu
    - Set the value to 10248
    - Hit the Filter button

The grid will be filtered but the Column & Filter menus remain open and the following JavaScript errors are generated

Firefox
    Uncaught TypeError: this.popup is undefined
        _closeForm https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js:10
        _reset https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js:10
        jQuery 2
            dispatch
            handle

Chrome
    Uncaught TypeError: Cannot read properties of undefined (reading 'close')
        at init._closeForm (kendo.all.js:325519:2)
        at init._submit (kendo.all.js:325519:2)
        at HTMLFormElement.dispatch (jquery.min.js:3:12445)
        at r.handle (jquery.min.js:3:9174)

Note: Not all of your demos exhibit the issue (but 100% of my grids do) so they must be something special regarding the options enable for particular grids.

Hopefully you can find and fix this bug quickly because upgrading to v2023.2.606 is not a viable option here.

Regards
Alan
Pending Review
Last Updated: 08 Jun 2023 14:17 by Bálint

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: 

  1. Create an input and initialize it as a TimePicker. 
  2. Open the TimeView dropdown element either by clicking the button next to the input field, or by code (timePicker.open())
  3. Close the TimeView dropdown element either by clicking the button next to the input field again, or clicking away from it anywhere on the page, or by code (timePicker.close())
  4. Scroll down any amount from the top of the page.
  5. Use the timePicker.value(...) function to set the value of the TimePicker field. The selected value has to be equal to any of the options available in the TimeView dropdown element.
  6. The browser will scroll to the top of the page.

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.

Pending Review
Last Updated: 07 Jun 2023 09:14 by Alex
Created by: Alex
Comments: 0
Category: Grid
Type: Feature Request
0

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();
}

Pending Review
Last Updated: 07 Jun 2023 09:03 by Alex
Created by: Alex
Comments: 0
Category: Window
Type: Feature Request
0

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

Pending Review
Last Updated: 06 Jun 2023 11:17 by Support
Created by: Support
Comments: 0
Category: Grid
Type: Feature Request
0

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>

Pending Review
Last Updated: 15 Feb 2023 07:52 by Michael D
Created by: Michael D
Comments: 1
Category: Kendo UI for jQuery
Type: Bug Report
0

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).

Pending Review
Last Updated: 09 Sep 2022 06:29 by ADMIN

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.