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

Currently we use batch editing in the Grid control. The idea of batch editing is all changes are retained client side until the user presses the save button. 

When editing a cell a red dirty indicator is placed on the cell. This gives the user an indication that there are unsaved changes. however, when deleting a row, the row just goes away. There is no indication the user must still save. 

I would like to see rather than the record immediately removed a class applied to the row so we can apply some style like a strikethrough or red background color to indicate a pending delete. Also, we would be able to switch the "delete" button to an "undo" button.

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?

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

I was working with Sencha ExtJS and they have to option to make components "stateful" (http://docs.sencha.com/extjs/6.2.0/classic/Ext.state.Provider.html). This will safe user modified settings in browser (defaults to cookie but you can provide your own implementation).

Example (for grid):
* we specify width=100 for first colum
* we allow users to resize columns
* If a users resizes a column the new width will be stored in state
* ... if the user later opens the page again, values from state will overwrite "defaults" from code.

If we use this for column width, visibility and order we've a perfect customizable grid view.

I'd like to see an event for Grid contents modified (after-edit or after-add/delete, etc).  This would enable a sync with a DataSource, for instance, without further user action.  Presently, this is not easily achieved.

Currently we do not have the ability for descending to be first. It's either one, both in the asc/desc order, or none. You can changed the setting in the kendo javascript file but it'd be useful to have it be a property.

Currently if you add a row to a grid in batch edit mode any rows that have already been edited will lose their dirty flag indicator.  I would like for Kendo to handle maintaining the dirty flag for these rows.  If there is a performance concern with adding this functionality, then maybe there could be a setting to turn it on or off.

http://www.kendoui.com/forums/ui/grid/pager-controls-should-be-hidden-when-total-results-is-less-than-the-pagesize.aspx

The End-User experience for multiple column sort is awful. Please provide a UI that lets them see & change the columns they are sorting by. 

Current problems are: 
1. If the user is sorting by 3 columns. All they see is 3 columns with an up/down arrow. There is no visual indication of the actual sort order (Col1, Col2, Col3) or (Col2, Col3, Col1). 

2. Lack of Control.
This gets more confusing if you have 3 columns in a sort, then  click Col2, until it is not sorted. Then click it again to make it sort ascending. I assume it drops out of the sort, & is then added at the end. Making sort =  (Col1, Col3, Col2). 
This confusion forces you to clear everything & start the sort again. 

3. Inability to clear quickly. 
But there is no UI that offers the user a quick way to Unselect all sorted cols, so they can start the sort selection process again. Clearly we can add something to the toolbar, but ideally they wouldn't need to clear & restart their sort selection. . 

4. Unpredictable outcome.
It is not obvious to the User how to control the order of the multi-column sort. How does the sort get determined? :-
A. First column selected becomes the Primary order, the next col is the Secondary order. 
	eg: select Col1, then col2, then col3, to get (Col1, Col2, Col3) order. 
OR
B. Last column selected is the Primary. 
	eg: select Col3 then col2, then col1 to get (Col3, Col2, Col1) order.

5. Server/Database cost. 
Sorting & network round trips are expensive. Toggling from Asc / Desc / Clear. Is expensive & slow compared to setting all the columns once & clicking OK. 

6. I'd add a mockup image, but this feedback screen doesn't permit uploads. To get an idea of a potential UI, Try sorting on multiple columns in Excel. It shows like a tree, with the primary key at the top, the secondary a line lower, followed by the less significant keys below it. 
OR at min. Change the Arrow into an Arrow with a tiny number (1,2,3 etc)
7. The current approach you use to add the Sort icon is really annoying to the user, especially when they have many narrow columns of numbers. Be aware that when you add the sort icon, converting a Label into something with 3 "..." chars is unnecessary. We found it cleaner to just truncate the chars that didn't fit, the user gets to see 2 more letters of the label. Which may be enough for them to know which column it is. And it is obvious that the column was too small to display more text. 
The large padding to the left of the "ColumnMenu" icon is part of the problem, it could be much smaller. 0.5 to 0.25 char width is sufficient. 
We did a lot of usability testing around this for a different control. The outcome was nearly unanimous in favor of the change above. 

PS: I too could see benefit in having the sort indicator display to the left. But the changes above may reduce the need a bit..

include checkbox-based selection in the grid and allow the persisting of selections in paginated grid (i.e. user selects rows on page 1, switches to page 2, returns to page 1 --> previous selection is restored)

Currently Kendo UI grid don't have any way to know that grid changes its mode from edit to view in case of incell editing.
As per thread (http://www.telerik.com/forums/is-there-any-way-to-know-grid-edit-mode-changes) we have to add blur/focusout event handler to know changing mode. But some time it happen (in case of adding custom widgets through columns editor) that blur/focusout event triggered but still grid is in edit mode.
Its better to have an event when grid changes its mode from edit to view so that we can minimize issue mentioned above.

Very often in grids we want command buttons disabled (or not even visible) depending upon model data, such as Delete not being available if the data has certain values set. Something like:

columns.Command(commands => {
  commands.Edit();
  commands.Destroy().VisibleIf(model => model.IsPosted)
  });

Using HtmlAttributes would be acceptable if it was easy to access the model. I'm currently achieving this by using a client template and rendering the buttons myself, but this seems overly complex for what is a simple occurance.

The event args from column.groupHeaderTemplate (and groupFooterTemplate) should contain a function to retrieve the data for that group. Currently, they only contain "field" and "value." If you made the grouped rows available in this event, clients would be free to add multiple aggregate columns of the same type (i.e., get the "sum" of multiple values instead of being limited to a single value). I've been able to halfway implement this, but it only works correctly if I'm only grouping by one column. For example, if I'm grouped by WidgetName and then by ProductCode, my event args for ProductCode should contain a function to return data rows for only rows matching the current ProductCode and WidgetName.

The refresh button availability should be indepent from the grid being pageable. The user may want an updatable grid without having page navigator.

Right now there is a progress indicator that shows on the grid when the data is being read.  Could this indicator also be shown during save operations?  Right now when you save there is a brief delay while the save operation is taking place where to the end user it looks like nothing is happening.

Currently, kendo-styled checkboxes are not rendered for the default column editors for Boolean columns.  Instead, default browser checkboxes are rendered.

In addition, kendo-styled checkboxes are not supported (and indeed do not function correctly) in custom column editors.

This issue creates a styling consistency "blemish" on pages where we've otherwise been totally consistent with a Kendo theme.

Please alter the grid behavior so that it both renders Kendo-styled checkboxes for the default Boolean column editor, and allows them for custom column editors.

Excel-like filter always show all available options.
When one filter was already applied  - could we limit number of options to see only options that are left after previous filtration?

We should be able to filter only by already filtered rows.

As alternative - could we have some event on Excel-like filter to populate options for it every time it expands?

Add Min Width Property to Grid Column so that a user can't manually shrink a column beyond a certain width.

Please check out a bug in the material design theme for grid pageing combobox in mobile device. 

You can check this bug at http://demos.telerik.com/kendo-ui/grid/remote-data-binding 

you have to adjust "mobile:true" option and then run by mobile simulator instead of web.

When you change the page with combobox. Grid's height will be reduced by combobox height.

This bug occured only in material design theme. (I didn't check all theme. I checked material, default, bootstrap, nova, fiori, office365)