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 need a way to disable the _step function (kendo.web.js) from being run whenever keying up or down in a nullable NumericTextBox grid column. Without this, moving between cells is setting the value of the cell being stepped out of to zero despite no text/numerical input. Our workaround was to override the Kendo JS to skip the majority of the _step logic by checking for whether spinners were disabled:

if(that.options.spinners === false) {
	return;
}

See support ticket logged for further information and code/video example: https://www.telerik.com/account/support-tickets/view-ticket/1408355

### Reproduction of the problem
1. Run the Checkbox selection demo in IE 11.706.17134 - https://demos.telerik.com/kendo-ui/grid/checkbox-selection
2. Try clicking a checkbox

### Current behavior
Two clicks are required to change the state of the checkbox.

### Expected/desired behavior
Checkbox should be checked/unchecked with a single click

### Environment

* **Kendo UI version:** 2019.2.514
* **Browser:** [ IE 11.706.17134 ] 

Cannot read property 'groupHeaderColumnTemplate' of undefined.

I have my grid, with 4 columns:

When i grouping for Date field, the browser run this error: 

kendo.all.js:65435 Uncaught TypeError: Cannot read property 'groupHeaderColumnTemplate' of undefined
    at HTMLTableRowElement.<anonymous> (kendo.all.js:65435)
    at Function.each (jquery.min.js:2)
    at I.fn.init.each (jquery.min.js:2)
    at init._renderGroupRows (kendo.all.js:65417)
    at init.hideColumn (kendo.all.js:64983)
    at Function.KendoUtils.hideGridColumns (kendo.utils.js:330)
    at init.dataBound (eval at <anonymous> (jquery.min.js:2), <anonymous>:77:32)
    at d (jquery.min.js:2)
    at init.handlers.<computed> (kendo.all.js:9520)
    at init.trigger (kendo.all.js:124)

When clicking on CheckBox to select a line, the widget check other checkbox (on other column of the same line) inserted from column template.

I suppose that the selector that the system use is too large.

For information, i created a template for boolean column based on how kendo generate checkbox structure (just de be coherent)

See the code extracted from https://dojo.telerik.com/EqiPIkiV

 var checkBoxtemplate = function(boolValue){
   	var checkedStr = '';
    if (boolValue) {
    	checkedStr = 'checked="checked"';
    }

        
    return '<input class="k-checkbox" data-role="checkbox" ' + checkedStr + ' type="checkbox"><label class="k-checkbox-label k-no-text smi-checkbox-fordisplay"></label>';
 };
  
$("#grid").kendoGrid({
  columns: [
    {
      selectable: true, 
      width: '30px'
    },
    { field: "name" },
    { field: "age" },
    { field: "administator", 
      template: function (dataItem) { 
        return checkBoxtemplate(dataItem.administator); 
      }  
    }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30, administator: false },
    { name: "John Doe", age: 33, administator: false },
    { name: "BigBoss Doe", age: 70, administator: true }
  ],
  selectable: true
});

the Kendo grid does't accept cell value changes when using android mobile phone with the Chrome browser. You can test it on the telerik demo https:demos.telerik.com/aspnet-mvc/grid/editing.

for example change the value of the Unit Price and go to the other cell. you will see that the value will become the original value.

just by touching some where outside the border of the grid the value will change.

Hi, 

Here is the dojo to reproduce. In this dojo I've created imitation of data, that coming from server in our case. The main idea is to have a grid with lazy loading - it has 10 groups (page 1) and after scrolling down it loads 10 more groups (page 2) and etc.

Issue 1. 

After scrolling down, data from the last group is updated with some data, that is not belongs to it. Please see 'Issue1.png' attached.

Issue 2.

Groups from the first page are duplicated after scrolling down. For example, there is a group named 'C3'. After scrolling down, it is duplicated once again. Please see 'Issue2.png' attached. New groups are placed after these duplications. By the way, as groups from the 1st page are duplicated, there is more than 20 groups is shown, but the counted at the bottom of the grid says that '20 of 137' elements are show.

So it would be great, if you could fix that. Or even provide temporary fix for us.

Thank you!

When the grid is configured for InCell editing and frozen columns, it is expected the first editable cell to be opened for editing when a new record is added. 

However, when there is not an editable cell in the locked columns, it would not search in the main content. Here is an example:

https://dojo.telerik.com/ucEraQOW

A temporary workaround would be to override the editModel function and check in the second table as well:

https://dojo.telerik.com/aJEsAnud

Dear Sir / Madam,

At grid PDF export, in case of allPages: false --> Actual rows are rendered to multiple pages properly, but all pages are written on the first page.

It works well, if I set "options.pdf.multiPage" to "true", but it is not in API reference.

A solution might be if this variable is fixed to true in grid prototype "saveAsPDF" function:
          "options.multiPage = true;" instead of "options.multiPage = options.multiPage || options.allPages;"

Please see this example: https://dojo.telerik.com/usUnUziL/2

Step 1: press "Export to PDF" --> Result: wrong pdf

Step 2: press "Set multiPage: true"

Step 3: press "Export to PDF" --> Result: good pdf

Best Regards,

Szabolcs Tóth

At the moment only the Kendo UI Grid with enabled mobile option will generate a header which can react to the touch and hold gesture.

This makes column resizing impossible when a web grid is used on mobile/tablet. Can you check internally if the grid is used on a mobile browser and create the mobile headers that work with the touch and hold gesture even when the grid does not have the mobile property enabled. This should work out of the box for all grids:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/adaptive#resizing-of-columns

If you configure a Kendo Grid with client-side paging, each time you call setDataSource to update the data source then a new .k-pager-numbers-wrap DIV is added to the page controls. I've replicated the problem in Dojo at https://dojo.telerik.com/UTolOzer by taking a basic client-side paging demo, moving the dataSource configuration into a separate function (with data("kendoGrid").setDataSource), and calling that function 25 times. At the end, the source shows the UL element with the page buttons inside 25 .k-pager-numbers-wrap DIV elements.

I first noticed this problem because in my own environment, each nested DIV was shifting the page buttons left 1 pixel and overlapping the "previous page" buttons. In my Dojo example, with 25 nested DIVs the page buttons disappear completely.

I've added the following in my own code as a workaround in the dataBound event of the grid:

                            var trueParent = e.sender.pager.element.find(".k-pager-numbers-wrap").first();
                            e.sender.pager.element.find("ul").appendTo(trueParent);
                            trueParent.find(".k-pager-numbers-wrap").remove();

Currently, you cannot disable all columns in the column menu - it requires that at least one column is enabled.

However, if the grid contains any non-hidden columns which have IncludeInMenu=false, then it should be possible to disable all the remaining columns using the column menu.

• Create e.g. local data grid (id, name)
  
• add 2 records => { id: 1, name: "null", id: 2, name: "Jack" }
• Name column for id = 1 is empty

I have tested this on your example for local data grid. It can be applicable also for remote grid, treelist, etc.

I'd like the ability to choose the behavior of mutli-row selection on a virtual grid with persisted selection.

For purpose of example, assume we have a virtual grid with 50 rows (pager controls not shown), a page size of 10, and persisted selection.

1. Select row 1 on page 1.

2. Scroll down to trigger page 2 to load (rows 11-20).

3. Select row 11, page 2.

4. Current Behavior: Both row 1 and row 11 remain selected.

5. Desired Behavior: Only row 11 remains selected.

Reasoning: I believe that a virtual scrolling grid should have selection behavior identical to a single page. That means that the only way to add rows to the selection is holding down control/shift during selection. In other words, on page 1 of the above example, if I select row 1, then row 2, only row 2 remains selected. If I select row 1, then Ctrl+click/Shift+click row 2, both remain selected. For virtual scrolling where multiple pages are displayed fluidly as if a single page, it seems odd to have the selection behave differently.

Enhancement

Excel files generated by Kendo Excel Export cannot be imported by the MS ODBC Driver. The error reported in this forum thread is: External table is not in expected format.

Current behaviour

If the file is opened and resaved with Excel or if the styles.xml file is replaced with any styles.xml generated by MS Excel, the error does not occur. When compared the styles.xml of Excel does not contain a numberFormat, no other obvious major differences at first glance:

E.g.:

<numFmts count="2">
<numFmt formatCode="#" numFmtId="165" />
<numFmt formatCode="#" numFmtId="166" />
</numFmts>

Expected/desired behavior

If possible, modify the styles.xml template to enable seamless use with OleDB

Reproduction of the problem

1. In the SASS Theme builder, create а theme based on the Default theme
2. Download it and load it on a page with a Grid

Current behavior

On desktop there is a page number duplication: screenshot.
On mobile the page numbers disappear: screenshot

Expected/desired behavior

The pager should look like in the Default theme.

### Bug report

When the adaptive rendering of the Kendo UI Grid is enabled, the filterMenuOpen event is not triggered.

### Reproduction of the problem

1. Set mobile: true.

2. Attach the filterMenuOpen.

Dojo sample for reproduction:

https://dojo.telerik.com/uhiToseD

### Expected/desired behavior

filterMenuInit event should be triggered regardless of the adaptive rendering mode of the grid.

### Environment

* **Kendo UI version:** 2020.1.219
* **jQuery version:** 1.12.4
* **Browser:** [all] 

Disclaimer: I'm running an older version of Kendo UI for jQuery, so this may have been fixed. I'd like confirmation if so before updating.

Kendo version: 2017.1.118.545

I am creating a grid from a table data source rather than an endpoint call. Other pages that use endpoints to populate the datasource export Excel with no problems.

Example HTML:

<table class="table table-responsive" id="tblReportSummary">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="totalForStatus">Count</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.ReportDataSummary as IEnumerable<UtilizationListViewModel>)
{
<tr>
<td>@item.Date</td>
<td>@item.TotalForStatus</td>
</tr>
}
</tbody>
</table>

The jQuery is as follows:

             $("#tblReportSummary").kendoGrid({
                sortable: true,
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    fileName: "Utilization Data Export.xlsx"
                },
                pageable: {
                    pageSize: 20,
                    pageSizes: [20, 50, 100]
                }
            });

When I click Export, all I get is an empty Excel file.

Why isn't the data there, please?