We are working on enterprise product, which uses Progress Telerik jQuery KendoUI components extensively purchased by our Company. In which Kendo grid is used in many modules of our product.

Now a days we are working on Accessibility (i.e. keyboard and screen reader) as part of out-of-box feature of our product.

The grid has been made accessible so that it can be navigated using the keyboard arrow keys, once it receives focus via Tab Key in order of tab index or Alt + W short cut key. In turn, this has spawned up one issue in terms of keyboard operatibility. You can now tab into the grid, use arrow keys to navigate to the cell containing action buttons and then again tab to the button that you want to activate.

This is causing confusion in terms of use of the tab key. Ideally, the tab should take focus from one widget to another. That is the tab key should have taken focus into the grid and pressing it again should have navigated away from the grid. But because of the action buttons displayed within the grid for each record, that tab also navigates controls within the grid widget. This causes numerous press of the tab key just to traverse past the grid widget.

Now due to this, user needing to press the tab key multiple times is an accessibility issue.

Also while referring Grid control demo on https://demos.telerik.com/kendo-ui/grid/editing-inline , we found the same type of behavior when traversing through “Edit” and “Delete” buttons. One of the code snippet developed by us using dojo.telerik.com can be referred on https://dojo.telerik.com/@chiragvidani/ulOzaniX/2

It would be great if this issue is addressed with a good accessible way.

 

Please find below reply received from on the accessibility forum, when we tried raising the issue to find out the remedial solution:


Reply 1 by "Glen Walker"

Just to make sure we're talking about the right type of component, a grid vs a table, a grid is like a spreadsheet where you can interact with all the cells.  I agree that a grid should be a single tab stop so that you can easily navigate to the elements after the grid.  However, I have seen implementations that once you're in the grid and in "edit mode", you can tab amongst the cells.  This is helpful if the cell contains an element that uses the arrow keys (such as a radio or select) and you want the arrows interpreted by the element and not navigate to the next cell.  You then need to get out of "edit mode" (perhaps via the escape key) in order to tab off the grid.

A table, on the other hand, doesn't let you interact with the cell directly but that doesn't mean a cell cannot have an interactive element.  That is, you can have links or buttons or inputs in a table cell and it'd still be considered a table and not a grid.  It's kind of a fine nuance.  A grid lets you interact with the cell itself and a table might let you interact with an element that is in the cell, but not with the cell itself.

There is, of course, more to this than that but I was trying to keep it basic and simple.

So, that being said, do you really have a grid or a table?

Let's say you really have a table instead of a grid, and that one of the cells in your table has several buttons, and that pattern is repeated on every row.  You would indeed have a bunch of tab stops, making it difficult to navigate beyond the table.

One possibility is if all the button actions are grouped together, they could be considered a toolbar.  A toolbar is one tab stop and you arrow between the buttons, but you'd still have the problem of having a toolbar on every row.  A toolbar would reduce the number of tab stops compared to having all separate buttons but you'd still have X number of tab stops for X rows.  One for each toolbar.

Maybe a grid in that case would be better.  Tab to the grid, tab again to whatever element follows the grid.  Tab back to the grid and use the arrow keys to navigate to the desired row.  Maybe the row goes into "edit mode" automatically when it receives focus with the arrow and then all the interactive elements in the row get a tabindex of 0.

That might be a bit non-standard and there probably isn't a good "role" to explain the behavior.  A bit of usability testing might be required.

 

Thanks,

Chirag Vidani

  

 

When endless scrolling and grouping is enabled on the KendoUI grid, collapsing large groups causes the grid to load ALL the hidden detail rows into the DOM.

 

This takes a very long time for the grid to do, as well it violates the whole point of a paging system. (ie I only want you to load X records at a time). Afterwards the performance of entire website (including the grid) will be very poor since potentially thousands of rows have been loaded into the grid and then immediately hidden. Additionally, these rows do not add any value to the user, since they are all hidden anyways.

 

When a category is collapsed, the grid should NOT add any new rows for that category to the DOM.

 

I have included a sample that demonstrates the performance issues.

The issue is reproducible when the grid consists only from Multi-header columns, the setDataSource() method has been used and one of the columns is initially hidden.

After setting the new data source, the last header gets hidden. The "display: none;" style has been applied to the "th" HTML element.

Steps to reproduce:

1. Create a grid with multi-header columns only.

2. Hide one column initially.

3. Set a new data source via the setDataSource() method.

4. The last column gets hidden.

Sample Dojo:

https://dojo.telerik.com/AcipENOt

Kendo UI version: 2019.1.220

It would be nice if additional template variables where available, the only two: pageNum & totalPages are not enough.

Consider Time of Day & Filename at a minimum.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pdf.template

 

Hello guys,

I am stuck with this problem for some time now. Everything works well with mouse, I can drag and drop column into grouping header normally. But on touchscreens I can't drag it. I am interested if anyone has had this issue?

Hi Team,

Kendo grid does not allow all columns to be hidden from column menu as it disables the check box for last column in column menu.

But if we set hidden = true and menu = false properties for column, grid hides that column from grid and column menu, but enables the checkbox to hide all columns from grid leaving it empty. After which we can't get back the columns in grid which isn't valid.

Grid should always allow at least one column to be included in grid/menu.

Please find attached screenshot and below sample link.

https://dojo.telerik.com/EHOgaJUK/2

Thanks,

Jyotika

Hi,

 

It would be great if the KendoUI Grid could be enhanced to automagically recognize when it's grouping by a date field and then offer additional options to group the dates by Day, Week, Month, Quarter, or Year.

Thank you.

Barry

Hi,

We are using Fusion software and the grid ARIA attributes of rows are "aria-describedby". This results in the invalid/wrong action tips for Fusion users. If we change it to "aria-labelledby" it works well. 

Currently, we have to override the private method _tmpl so we can edit the hardcoded attribute. We need to be able to change this part of the source:

It would be great if we can configure them from the grid settings.

Then the _tmpl function will change like this:


Thank you in advance.

Hi,

Bring up an RTL kendo Grid which has resizable true and filter mode is "row".

then try to resize the grid from filter-row of grid. we will see an internal js error.

 

you can copy and paste this code in a dojo sample and resize grid from the point is shown in the attached picture.

    <div class="k-rtl"><div id="grid"></div></div>
    <script>
        $("#grid").kendoGrid({
          columns: [
              { field: "name" },
              { field: "age" }
          ],
          filterable: {
              mode: "menu, row"
          },
          resizable: true,
          dataSource: {
           data: [
            { id: 1, name: "Jane Doe", age: 30 },
            { id: 2, name: "John Doe", age: 33 }
           ],
           schema:{
            model: {
             id: "id",
             fields: {
               age: { type: "number"}
             }
            }
           }
          }
      });
    </script>

Hello Support Team,

with jQuery 3.3.1 the resizable option set to true is not working with the configuration in the example below. When removing other options like "toolbar" or "scrollable" it works. :D 

See the following example: https://dojo.telerik.com/IkigawaX

With jQuery 1.x everything works fine.

Regards

Alexander

The autofix column feature does not work properly if you enable sorting on the grid. You can see the issue if you open the Dojo for the following demo: https://docs.telerik.com/kendo-ui/knowledge-base/grid-autofit-all-columns-width

If you sort e.g. by column "Ship Country" and sort ascending you will see the name of the column ending with "..." but not the icon for the sort direction. If you press the column again and sort descending than everything works as expected - the column width increases and the icon is show.

I tested the problem in multiple browsers, but the main browser I have to support will be the IE.

BR,
Christian 

The following event-handler does not work when run in a mobile environment (iPad). Otherwise it works as expected:

Result: all columns a set to their minimum width.

 

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [

// ...       

],

        columnShow: function (event) {

            console.time('autoFitColumn');
            for (var i = 0; i < this.columns.length; i++) {

                var col = this.columns[i];
                             this.autoFitColumn(i);
            }
            console.timeEnd('autoFitColumn');
        },
      // ...
        filterable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        pageable: true,
        reorderable: true,
        scrollable: true,
        columnMenu: true,
        mobile: true,
    }); 

Link to GitHub issue - https://github.com/telerik/kendo-ui-core/issues/4705

### Reproduction of the problem:

1. Run this dojo
2. Collapse one or more of the subCategory groups
3. Collapse the category Group
4. Expand Category


### Current behavior

The aggregate rows are missing and the locked and unlocked content is misaligned

### Expected/desired behavior

Rows should be aligned

Hallo,

i have a grid with a lot of data for a better representation i show some related values with a template in the cell below each other. 
This solution is not optimal because I don't have the filter and sort function in the column header for every single field. 
Enclosed an example https://www.igniteui.com/grid/multi-row-layout which illustrates my wish.
I would be happy if you implement this feature in a future release.

Hi,

In my kendo grid , when i apply a filter to 2 columns, first i apply filter to numeric column which results in no value and then after that i applies the filter to a string column combined with numeric column which also results to no value, Nothing is displayed. But when i remove the value from textbox of numeric column and enter filter, no data being displayed as string column filter is there but in case i remove the value from textbox of string column and enter filter , numeric column filter also got removed.

I also checked the kendo functionality , but not getting any solution for this problem.

With the latest version, we could see extra options in Grid filter. Is there any way by which we can make it configurable? 

I hope other developers realize the importance of this feature and vote for it.

It would be nice (in fact, important to have) an event that we can hook into, after the Edit event fires but before the editor template (more relevant when the editor is a custom popup template).

Let me explain.  On my custom editor template, I have a few dropdownlists that are not defined as foreign keys from the grid datasource.  The dropdowns are defined on the template, usually with a Read action on it.  This read action fires when the template is rendered.  In the Edit event, I need to set some of the elements as different or hidden or shown based on the selected value from more than one dropdown.  This is needed so that some other elements are shown/hidden when the popup is rendered.  The problem is, The edit event is too early to know the selected items in these dropdowns since the data for these ddls are not loaded yet.  Since I need values from multiple dropdowns, hooking into individual databound events of the ddls won't work either.

So, if we had an event something like "BeforeRender" on the grid that fires after all the datasources are loaded and databound for all relevant elements on the editor template, but before the template is rendered onscreen that would be great.  Then, we can hook into this event and when we do, all the datasources for all the dropdowns, comboboxes etc. are loaded and databound already. We can use the items from these elements to show/hide other elements.

when putting grid into new item creation state it should be possible to put new item with some predefined fields.

Current it is realy difficult to achieve that:

using datasource and insert do not contain isNew on model, also put it on top of grid page is difficult, not possible

using model.set. on edit event causing fireing save event when it should be fired only when item is realy saved.

Consider a grid with grouping and pagination. When we collapse a group, the items from next page should take up the space left be the hidden rows, i.e., grouping should work across pages and not just the current page. Otherwise, grouping is a useless feature in a grid with pagination. This should work for client as well as server pagination and also for virtual scroll.

Hello,

from our development I could collect some suggestions for improvement, which we would be pleased about in the future:

MVC
-> Grid
-> Export to Excel
- Do not show columns in export - currently only possible with Javascript
- Display additional columns in the export that are only displayed in the export and not in the interface