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.
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.
The rendering (structure and order of elements) of the th element of a column, for which a HeaderTemplate is set, does not match the Kendo UI Grid's rendering in a similar scenario. Prerequisites: HeaderTemplate, Sortable, Filterable enabled. For more context, see Ticket ID: 1639834.
Check the rendering of the header of the second column:
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid2")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).HeaderTemplate("<span class='k-link'>My Template</span>");
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Sortable()
.Filterable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
The content of the th is the following:
<a aria-hidden="true" class="k-grid-filter-menu k-grid-header-menu">
...
</a>
<span class="k-link">
...
</span>
The th content should be rendered as follows:
<span class='k-cell-inner'>
<span class='k-link'>
...
</span>
<a aria-hidden='true' class='k-grid-filter-menu k-grid-header-menu'>
...
</a>
</span>
It should match the Kendo UI Grid's rendering: https://dojo.telerik.com/oTalIGir/8
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.
https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
In addition to the Foreign Key editor template, populate a list which holds all the categories and pass it via the ViewData - you can see how this is done in the ForeignKeyColumnController.cs PopulateCategories()
method.
On the above page, the above statement is made. Other than the function call to PopulateCategories() I don't ever see the actual code run in the function shown anywhere. Can someone please add that code and/or point me to my misunderstanding?
Thank you.
Court Harris
Equity Residential
The issue is present only when a field in the model has been updated. When an invalid value is attempted to be saved, the validation is triggered. Upon pressing the Esc key, the dirty indicator should not be shown.
The expected behavior would be to not show the dirty indicator at all as the value has been returned to the initial one. Furthermore, the indicator is not positioned in the left top corner but immediately above the value.
Steps to replicate:
1. Change the value of any field.
2. Navigate to a field which has validation.
3. Set an invalid value in order to trigger the validation, respectively show a validation message.
4. Press Esc to undo the change.
5. The dirty indicator is shown and mispositioned.
Dojo sample:
https://dojo.telerik.com/iHoRaWIg
Short video demonstration:
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.
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 Grid cell does not enter edit mode on double tap on iOS in Chrome and Edge. Works correctly in Safari.
The cell does not enter edit mode.
The cell enters edit mode.
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.
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.
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.
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.
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
I use getOptions() and setOptions() to persist the state of the ajax bound grid that I have.
My toolbar is not a server one, it is this:
.ToolBar(toolbar =>toolbar.Create().HtmlAttributes(new { @class ="k-primary"}))
When I call the setOptions() method, it removes the Add button from the grid header.
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.
Hello telerik support,
recently we updated to 2023.2.718
somehow the grid column menu is not completely in german language
How can I apply german language to the complete column menu?
Best regards
Andy