Reproducible in MVC with a custom toolbar tool that has a ClientTemplate.
@(Html.Kendo().Grid<TelerikMvcApp2.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
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);
})
.ToolBar(toolbar =>
{
toolbar.Save();
toolbar.Spacer();
toolbar.Custom().ClientTemplate("<span>test</span>");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.OrderID))
.Read(read => read.Action("Orders_Read", "Grid"))
.Create("Orders_Create", "Grid")
.Update("Orders_Update", "Grid")
)
)
Duplication of the "Cancel" button.
A single "Cancel" button is rendered in the toolbar.
Regression introduced in R3 2023 SP1
If an initially hidden column is shown with the showColumn API method, the column header remains hidden because of the k-hidden class that remains in the th element.
<input type="button" name="btn1" value="Show the hidden columns" onclick="btn1Click()" />
<br />
<br />
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID);
columns.Bound(p => p.Freight);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Hidden(true);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Hidden(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script>
function btn1Click() {
var grid = $("#Grid").data("kendoGrid");
grid.showColumn("ShipCity");
grid.showColumn("OrderDate");
}
</script>
The hidden columns are shown but their headers remain hidden.
As a workaround, the k-hidden class can be removed from the column header, after showing the column:
grid.showColumn("ShipCity");
$(".k-grid .k-header[data-field='ShipCity']").removeClass("k-hidden");
The columns and their headers are shown.
The ClientGroupFooterTemplate and ClientFooterTemplate configuration lead to an invalid template error when strict CSP mode is enabled. There are no corresponding methods that accept a TemplateHandler.
@(Html.Kendo().Grid<TelerikMvcApp3.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
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).ClientGroupFooterTemplate("Total:").ClientFooterTemplate("Team Total");
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Home"))
)
)
@(Html.Kendo().DeferredScriptFile())
JS exceptions on initializing the Grid and on attempting to group it by ShipCity.
CSP compatible templates.
https://demos.telerik.com/aspnet-mvc/grid/right-to-left-support
https://demos.telerik.com/kendo-ui/grid/right-to-left-support
https://demos.telerik.com/aspnet-core/grid/right-to-left-support
Incorrect rendering of the buttons.
Buttons rendered consistently with the jQuery and Core Grids.
Prerequisites: reordering a non-locked column before a locked column. There could be one or more locked columns.
This behavior appeared in v2021.3.1207.
Dojo example: https://dojo.telerik.com/UhExAXIv/5
The reorder hint appears only when you hover the left border of the ID cell. This makes dropping the header at the right spot difficult, since you have to be very precise and if you are too fast, you have to re-adjust the mouse cursor position right on top of the left border of the cell.
The reorder hint should appear when mouse cursor enters the boundaries of the target cell. For example, slowly drag ShipCity before ShipCountry. Note how the reorder hint appears once you enter the boundaries of the ShipCountry cell and you don't have to drag all the way to ShipCountry's left border.
Have a Grid bound to local data (see below code snippets and screenshot)
@model Pager_issue.Models.GridViewModel
@(Html.Kendo().Grid(Model.Items)
.Name("grid")
.Columns(columns =>
{
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(p => p.PageSizes(new[] { "5", "10", "50", "all" }).PreviousNext(false))
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
)
)
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
var model = new GridViewModel
{
Items = Enumerable.Range(0, 200).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i
})
};
return View(model);
}
When filling the Grid with data via a ViewModel, the pager doesn't show on load
The pager should be visible on load
When a UI for ASP.NET MVC Grid contains a PDF or Excel button within the Toolbar, the IconClass is being ignored.
.ToolBar(t => t.Excel().Text("Export to Excel").IconClass("icon here"))
The specific icon should be added based on the IconClass.
Not reproducible with the UI for ASP.NET Core Grid helper.
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Read(read => read.Action("Orders_Read", "Grid"))
.Total(50)
)
The "next page" and "last page" buttons in the Grid's pager are rendered as anchor Html elements, when Total is set in the DataSource. When it is not set, the buttons are rendered as button Html elements.
The rendering of the pager buttons should be consistent and they should render as button Html elements.
### Bug report
The Grid columns do not expose the ClientTemplateHandler() method. It is available in Telerik UI for ASP.NET Core since version 2023.1.314.
### Reproduction of the problem
columns.Bound(p => p.IsAlwaysIncluded).ClientTemplateHandler("myColTemplate");
<script>
function myColTemplate(data) {
return `<div>${data.IsAlwaysIncluded}</div>`
}
</script>
The ClientTemplateHandler() method must be exposed for the Grid columns.
### Environment
Telerik UI for ASP.NET MVC version: 2023.1.425
* **Browser: [all]
When the Grid is set initially with a sort operation, the icon for the column will show twice in a UI for ASP.NET MVC web application.
Using the Kendo UI Grid template, add the sorting configuration to the dataSource:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(200);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Sort(s => s.Add("OrderID").Descending())) //Added Predefined Sort
)
The icon should only appear once for the sorted column.
Regression in R1 2023 SP1.
Set a HeaderTemplate in one of the following 3 ways.
columns.Bound(p => p.Freight).HeaderTemplate("<div title='Freight'>Freight</div>");
columns.Bound(p => p.Freight).HeaderTemplate(@<text>
<div title="Freight">Freight</div>
</text>);
columns.Bound(p => p.Freight).HeaderTemplate(@<div title="Freight">Freight</div>);
In the first scenario the error is:
System.NotSupportedException: Specified method is not supported.
In the second and third scenario the error is:
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
No exception thrown when the HeaderTemplate is set.
Dragging a row from a Grid to another empty Grid is not working.
The row is not inserted in the empty Grid
The row should be inserted in the empty Grid.
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.
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.
The Kendo UI Grid's Toolbar Template UI for ASP.NET MVC documentation displays an approach used for UI for ASP.NET Core. The ClientTemplate and ClientTemplateID are not available for UI for ASP.NET MVC.
Please try the approach used in the documentation. It is not available for UI for ASP.NET MVC.
Either include the approach for UI for ASP.NET MVC, or modify the documentation.
Reproducible with a Grid nested in the content of the tab, or loaded in the tab through AJAX.
Dojo example: https://dojo.telerik.com/eJuHaTan
The rows cannot be reordered.
The rows can be reordered.
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.
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.
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.