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.
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.
Hi Team,
I'd like to request a similar example based on the virtualization of local data demo for UI for ASP.NET MVC.
Thank you!
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.
Dojo example: https://dojo.telerik.com/InUYAheR/4
Drag and drop a row from Grid2 to Grid1 by following the steps below:
Grid1's first row values get updated, instead of the drop target row values. This is because e.target in the DropTarget's "drop" event does not return the actual target you drop over.
If you click and drag in the middle of the Grid2 row, drag it and drop it over a row in Grid1, the drag and drop functionality works as expected: e.target returns the correct target.
e.target should consistently return the target you drop over, regardless of where in the dragged row you have clicked.
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!
In the Less themes the textboxes and the other editors (e.g., NumericTextBox) in the popup of the Grid are misaligned. The rendering of the textboxes in the MVC and Core Grid is different when compared to the Kendo UI for jQuery Grid.
Reproducible in the Popup Editing demos (Core and MVC).
The width of the TextBox does not match the width of the NumericTextBox.
The rendering differs:
<span class="k-widget k-textbox k-valid" style=""><input data-val="true" data-val-required="The Product name field is required." id="ProductName" name="ProductName" value="" data-role="textbox" aria-disabled="false" class="k-input k-valid" autocomplete="off" data-bind="value:ProductName" style="width: 100%;"></span>
vs
<input type="text" id="ProductName" name="ProductName" title="Product Name" required="required" autocomplete="off" data-bind="value:ProductName" class="k-textbox k-valid">
Identical rendering and alignment.
Hi Team,
I would like to request better integration when grouping using a viewModel. When grouping by defining the field in the group event using a model from EF, the Grid should continue to use the viewModel instead of the model's field. This would provide the Grid's group templates to be retained.
Please take a look at the following gif which shows the current behavior using the viewModel's RoomLocation field vs. the model's HomeRoom.RoomLocation.
Thank you!
Hi Team,
I'd like to request adding aggregation to the Kendo UI Grid Custom Ajax Binding Live Demo.
Thank you!
Implement stacking columns on smaller screens, e.g., https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/grid-stack-responsive-columns-on-small-screens
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.
I've been using the "Change" event to handle a Single Row Selection grid as that seems to be the event to use to determine when the user selects a row.
I just tried adding "persistSelection(true)" to my grid but it seems to be triggering a change event when I switch to another page and back to the previous page, or do an external $(this).data('kendoGrid').dataSource.read() on the grid.
How can I only get a change event when the USER selects a row, not the persistedSelection selecting the row?
Or at least detetect where it came from it in my Change event?
Thanks,
Bryan
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.