Reproducible in:
https://demos.telerik.com/aspnet-mvc/grid/editing-inline
and
https://demos.telerik.com/aspnet-core/grid/editing-inline
The input does not have a title attribute or label.
The input should either have a title attribute, like in the Kendo UI for jQuery Grid, or since we use a TextBox component as editor in MVC and Core, a label should be rendered.
columns.Command(command => command.Custom("View Email"))
.Title("Body")
.Width(150);
When the Grid is configured to use server binding, it will render an anchor element. If remote binding is used, the Grid will correctly render a button element.
Consistency in the rendering. A button element should be rendered, regardless of using server or remote binding.
When .Navigatable() is enabled, the Grid renders an aria-describedby attribute in each td element. The value of the attribute should match the id value of the respective column header. This works for standard columns bound to fields in the data, but doesn't work for a selectable column:
columns.Select();
The selectable column header element (th) does not render an id. The td elements of that column render an aria-describedby attribute, the value of which does not match any element id. This causes an accessibility issue (Ticket ID: 1530928).
Reproducible with the MVC helper:
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Select();
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable()
.Navigatable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
The selectable column header element (th) does not render an id.
The selectable column header element (th) renders an id that matches the aria-describedby attribute value of the td elements in the column.
Not sure if this is already in the works but when building mvc grids it would be helpful to have the ability to prevent a column from getting too big when the screen size is larger than the grid needs. Right now if columns are turned off and there is more space for the unlocked columns, they expand to fill the page which is normally fine but in some instances it looks silly to have a column for example that you would enter a 2 digit number in to be 300 plus px wide.
When the scrollable option is disabled, on resizing the browser window by making it more narrow, at certain point the columns stop resizing and the whole table goes out of the right border of the Grid. Reproducible with the SASS and LESS themes.
Dojo example: https://dojo.telerik.com/ItIrEzEY/3
The table goes out of wrapping element (.k-grid).
The columns resize and the table remains within the borders of the Grid.
When the Grid AutoBind() configuration is set to false, the Grid is rendering an empty cell in the row element with class .k-no-data. (Image.png)
Set AutoBind configuration of Telerik UI for Asp.Net MVC Grid to 'false'. The Grid is rendered correctly except for the empty row and the empty cell in the table body.
An empty row with one empty cell is rendered.
The tbody element should be empty.
Reproducible in the demos: https://demos.telerik.com/aspnet-mvc/grid/persist-state
The difference in the rendering is shown below. In the Kendo UI Grid's Html, there is a span with class "k-cell-inner" that wraps the ".k-link" span, whereas in the MVC Grid, only an anchor is rendered.
Kendo UI:
<th scope="col" role="columnheader" data-field="ContactName" aria-haspopup="true" rowspan="1" data-title="Contact Name" aria-label="Contact Name Press ctrl + space to group" data-index="0" id="a44eadd9-62c6-4154-9735-4351a9cb5064" class="k-header k-filterable" data-role="columnsorter" style="touch-action: none;">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">Contact Name</span>
</span>
<a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
<span class="k-icon k-i-more-vertical"></span>
</a>
</span>
</th>
MVC:
<th class="k-header k-filterable" data-field="ContactName" data-index="0" data-title="Contact Name" id="f28afe50-210a-474d-9943-113f6bd4ad15" scope="col" data-role="columnsorter" style="touch-action: none;">
<a class="k-link" href="/aspnet-mvc/grid/persiststate_customers_read?grid-sort=ContactName-asc">Contact Name</a>
<a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
<span class="k-icon k-i-more-vertical"></span>
</a>
</th>
Identical rendering.
Hi Team,
The Kendo UI Grid's toolbar with a template is not persisted when the Grid is loaded using setOptions.
With a toolbar containing a template with server tags, the toolbar content will disappear.
The Grid should retain the toolbar with the HTML contained when using setOptions.
Environment
Kendo UI version: 2022.2.510
jQuery version: all
Browser: all
Thanks!
When using the Grid Endless Scrolling, is there a way to prevent the existing records from momentarily disappearing as the spinner appears?
Using endless scrolling on a large grid (full screen), the users eye tracks down the list as the mousewheel is turned. At the moment the next page is fetched, the view of the data is disrupted as the spinner appears and the data disappears. This can be quite jarring to the senses when browsing for a specific record in the list.
On a small grid such as that on the example page (https://demos.telerik.com/kendo-ui/grid/endless-scrolling-remote) it isn't quite as jarring on the senses, but with a large grid with many columns and rows, it can be very off-putting.
Ideally, if the existing records can remain opaquely visible in the background under the spinner whilst the next page of data is being retrieved, it would produce a much cleaner user experience.
Describe the bug
Column headers do not resize properly in IE11 when scrollable is set to false. Regression introduced in 2021.3.914.
To reproduce
Steps to reproduce the behavior:
The column headers are squished to the left side.
Expected behavior
Columns headers must have the same width as the respective columns.
Workaround:
.k-ie .k-grid-header {
display: table-header-group;
}
Affected package (please remove the unneeded items)
Affected suites (please remove the unneeded items)
Affected browsers (please remove the unneeded items)
Build system information (please remove the unneeded items)
there seems to be a bug in your commands column and it's made worse when loading/saving grid layouts.
When i load a page with this grid column definition,
.Groupable() .Columns(columns => { columns.Command(cmd => cmd.Custom("Undelete") .Click("undelete")) .Width(60);
when you inspect the grid, the grid internally shows two classes for the command cell:
attributes: {class: 'k-command-cell k-command-cell'}
now, if i apply a grid layout, the problem gets worse. This sample code will cause the dom to end up with multiple k-command-cell classes on the grid's td element.
$("#UndeleteGrid").data("kendoGrid").setOptions($("#UndeleteGrid").data("kendoGrid").getOptions())
<td class="k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell" role="gridcell"><a role="button" class="k-button k-grid-Undelete" href="#" title="Undelete"><span class="k-icon k-i-undo"></span></a></td>
We set up a grid that auto-filters a name field to "does not contain" and the value it excludes is "[DEACTIVATED]". This column is also filtering out records that have a null in them if this filter is set. I had to change the datasource to return an empty string instead.
The NumericTextBox renders two input elements. In a Grid inline editing scenario: https://demos.telerik.com/aspnet-mvc/grid/editing-inline one of inputs of the NumericTextBox editor does not render a title and there is no label for the inputs. This causes an error for missing form element label in Html static analysis (Wave).
One way for this to be avoided could be using aria-labelledby attribute instead of title. The same aria-labelledby value will be assigned to both inputs pointing to a span or div that contains the input value. This way both inputs will have label and won't trigger the missing label error.
https://demos.telerik.com/aspnet-mvc/grid/persist-state
The search panel disappears from the Grid's toolbar.
The search panel is present in the Grid's toolbar.
Bug report
When the Kendo UI Grid is configured to have endless scrolling and an item is updated on the first page, the scrollbar is reset. If an update is done on a page after the first one, the scroll is correctly persisted.
Reproduction of the problem
1. Set a grid with an endless scroll.
2. Scroll down (without entering the second page).
3. Update an item on the first page.
4. The scroll is reset.
Dojo sample for reference:
https://dojo.telerik.com/EcUKIrAK
Environment
* **Kendo UI version:** 2021.1.330
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
Error is thrown when using Kendo HTML Editor Control in Kendo Grid Popup EditorTemplate in IE only
Reproduction of the problem
Place Kendo editor in Grid popup template
@(Html.Kendo().Grid<TelerikMvcApp2.Models.Person>().Name("persons")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.PersonID))
.Read(read => read.Action("GetPersons", "Home"))
.Update(up => up.Action("UpdatePerson", "Home"))
)
.Columns(columns =>
{
columns.Bound(c => c.PersonID).Width(200);
columns.Bound(c => c.Name);
columns.Bound(c => c.BirthDate).Format("{0:g}");
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
)
Person.cshtml
@(Html.Kendo().EditorFor(model => model.Text))
1. Run and open in IE
2. Click edit, make a change in the popup and Save
2. Click again on Edit
https://www.screencast.com/t/kZFZ9hZNEp
Expected/desired behavior
No error is thrown
Environment
Kendo UI version: 2020.3.118
Bug report
When there are 3 levels of filter nesting in the URL clearing of a filter does not apply
Reproduction of the problem
1. Go to https://demos.telerik.com/aspnet-mvc/grid/serverbinding
2. On “Product Name” column apply filter “Contains” with value “a”
3. On “Unit Price” column apply filter “Is greater than” with value “1”
4. On “Units In Stock” column apply filter “Is greater than” with value “1”
5. On “Product ID” column apply filter “Is greater than” with value “1”
6. Clear the filter on “Product Name” column
Expected result: no more filter on “Product Name” column
Actual result: “Product Name” column still has a filter
A workaround is provided in the following Dojo:
https://dojo.telerik.com/UJewihaX
Environment
Kendo UI version: all
Browser: all