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

We are not using an editable grid for this scenario.  The Kendo Grid needs to have its existing filter and sort cleared which should not result in two unnecessary reads to the server and then do a read on the datasource to get the newly added row.  We then return the data from the server in descending order by Id so the new row is at the top of the grid and selected.  If the sort for a default view and add are the same, no issues, but when they are not, the work around is complex.  What are the options and how can we make this simple task simpler to code and maintain?

It would be nice to have an option to place the filter row in the table footer instead of the header. It is possible to move it in the DOM using JavaScript, but it breaks the functionality.

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

i have a grid with number column and the template is replace the number with a text according to the number, but the sort is according to the number which is not correct.
for example: data[ status: 1 , 2 , 3 ]  the template return Cancelled for 1 Accept for 2 and in Processes for 3. it shoul be sorted in that order: Accept ,Cancelled, in Processes but actually is sort like that: Cancelled, Accept, in Processes 

With the kendoGrid, if no columns are specified, all columns are automatically rendered. However, dates (at least, I have not tested other non-strings) are rendered in non-human-readable form (at least if they are from SQL Server).

Since date rendering is tied to culture parameters, it would make sense to specify culture at the grid object level and have dates, currency, etc. render according to that. It would also be great to have filters setup for these different types applied to dynamic columns.

We use the Kendo Grid with a DataSource connected to an OData service. We also use the OOB Kendo Grid functionality to hide columns in the UI (column.hidden = true). Through testing we found out that the Kendo grid does not use the OData option of selecting specific columns for retrieval. The grid will request all columns for a table, which leads to overhead in the amount of data sent from the server to the client. We sometimes have tables with 50 columns, for which only 10 columns are shown.

I know it has been rejected and I think it was not given any good reason.  Managing dropdownnlist in datagrid is a pain and just not having pair value/text is missing and using "foreign key columns for this" is not an acceptable answer for me.


It should be a basic type of column, not a template, and show a text but be set as a value because we use the text for translation purpose, so the text cannot be the value. Even with the help from your technical support, when you have many of them in one grid, it's takes a long time to code and maintain. Such a common and basic feature should be with the basic controls of the grid.

Support custom attributes for Kendo grid
When kendo grid is applied to an html table, all custom attributes that have been applied to rows, cells or data within cells is lost.  It would be great if you could preserve these.  I realize the challenge in distinguishing between what is considered a *custom* attribute.  Perhaps enforce specific naming conventions and support preservation of those.  Perhaps anything starting with "data-" is preserved?

If an Ajax validation (sync or async) is called by a custom validation, kendo grid navigation should move to next or previous cell by pressing once tab or shift + tab key, if it's valid -as normally- or cancel edit if it is not.
+info in this thread:
http://www.telerik.com/forums/ajax-validation-with-grid

When scrolling is disabled for a grid and column resizing is enabled, resizing a column acts in a strange manner and attempts to size all columns of the grid.  I would expect that only the two columns on each side of the resize handle should have their widths altered.  Otherwise scenarios can occur where you are completely unable to resize columns.  If this would not be default functionality, I would at least suggest a flag to enable it at grid setup.

By Default the Grid filters for text columns only do the following comparisons; Equal, Contains, Starts, Ends (& Not's)

We are missing: Greater Than, Less Than, GE & LE.
Given the alphabet is ordered, it is reasonable & desirable to add these 4 comparisons to text as well as numeric & date columns. 

This empowers a filter like (Surname >= "L" AND Surname < "O")  so we can find all customers with Names starting with L, M & N

We have implemented custom 'search' functionality for Kendo grids, which uses column filtering 'behind the scenes'.  Without a hacky workaround, we are having a problem where modifying the filters list behind the scenes will trigger the filter indicator on the columns. It would be great if there was some kind of 'silent' filtering that we could add for this instead of having to write a completely custom query for searching.

When "Clear Filter" in grid column filtermenu is clicked,grid's dataSource's filter method is called even though the grid is actually not filtered with that field yet. eg. Load this page http://demos.telerik.com/kendo-ui/grid/remote-data-binding and directly click clear filter of any column field. It'll query the remote data. I don't want this behavior. Because the grid is not filtered by that field yet.

Currently in a data grid with virtual scrolling there is no way to scroll to an item. You can filter to that item, but you can't see it in the context of other data. I'm pretty sure this was available in Silverlight rad grid 7-8 years ago.

global option for grid colums that sets the format of number editor ui

global option for grid colums that sets the decimal scale of number editor ui

Show the text in the filterMenu formatted as the text in the column. More info here: http://www.telerik.com/forums/filtering-html-characters

Currently, when kendo grid is initialized from an  already populated html table, there is then no way to freeze columns as there is no datasource specified in kendo grid initialization.