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.
In a Selectable grid, when only one column is shown in the grid, and the model's Id field is specified, an error occurs on selection.
If you include more than one column (must be more than one visible) it works correctly.
If the model's Id is not specified, it works correctly even with only one column visible.
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid1")
.Columns(columns => {
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Hidden(true);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Model(m => m.Id("OrderID"))
)
)
DropDownList editor in a Form component with ServerFiltering enabled causes a js exception.
@(Html.Kendo().Form<MVCFormValidation.Models.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "/Home/Index", method = "POST" })
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
i.Add()
.Field(f => f.NumberOfShares)
.Label(l => l.Text("Number Of Shares:"));
i.Add().Field(m => m.Country.Id)
.Editor(e => e.DropDownList().DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCountries", "Home");
})
.ServerFiltering(true);
}).Filter(FilterType.Contains).DataTextField("Name").DataValueField("Id"))
.Label("Country");
i.Add()
.Field(f => f.Email)
.Label(l => l.Text("Email:"));
i.Add()
.Field(f => f.DateOfBirth)
.Label(l => l.Text("Date of Birth:").Optional(true));
i.Add()
.Field(f => f.Agree)
.Label(l => l.Text("Agree to Terms:"));
});
})
)
On page load a js exception is thrown:
Uncaught Error: Syntax error, unrecognized expression: #
No exceptions.
Related: telerik/kendo#18503
Dojo example: https://dojo.telerik.com/AWiYAlIm/5
A js exception is thrown:
e.popup.fullscreen is not a function
No exceptions are thrown.
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.
<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>
The breakpoint is added at the last line (326079) of the file.
The breakpoint is added at the desired line (e.g., 3715).
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
Open a Signature Component demo and try to draw/sign fast on an Android device.
When signing fast on an Android device on the Signature component, making a signature from multiple parts by picking up the finger several times, the signature process freezes for a small period of time.
See attached videos where we tested on Android and IOS devices:
Signing/drawing should be smooth
My web page displays grids on multiple pages, and each grid has a pager with a page size control.
In recent updates the styling broke in all but one page.
In the case where I was creating the grid using Kendo UI for JQuery, it worked fine.
In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)
After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.
JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element
<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
<div class="k-pager-numbers-wrap">
<!-- ... -->
</div>
<span class="k-pager-sizes k-label">
<!-- The page-size picker goes here -->
</span>
</div>
In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:
<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
<div class="k-pager-numbers-wrap">
<!-- ... -->
<span class="k-pager-sizes k-label">
<!-- The page-size picker goes here -->
</span>
</div>
</div>
This breaks the styling. (I am using the bootstrap kendo theme) There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.
@each $size, $size-props in $kendo-pager-sizes {
$_padding-x: k-map-get($size-props, padding-x);
$_padding-y: k-map-get($size-props, padding-y);
$_item-group-spacing: k-map-get($size-props, item-group-spacing);
$_item-min-width: k-map-get($size-props, item-min-width);
$_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);
.k-pager-#{$size} {
padding-inline: $_padding-x;
padding-block: $_padding-y;
gap: $_item-group-spacing;
.k-pager-numbers-wrap {
.k-button {
min-width: $_item-min-width;
}
My current hack workaround is to add a more specific CSS rule.
@import "@progress/kendo-theme-bootstrap/dist/all.scss";
.k-pager-md .k-pager-numbers-wrap .k-dropdownlist .k-button {
min-width:inherit;
}
Using the PDFViewer with the latest version of PDF.js (3.9.179) throws js exceptions. Version 3.4.120 is the last one, with which no js exception is thrown.
Dojo example: https://dojo.telerik.com/IHedIhur/3
The file is loaded, however, js exceptions are thrown:
The --scale-factor
CSS-variable must be set, to the same value as viewport.scale
, either on the container
-element itself or higher up in the DOM. text_layer.js:480:14
No js exceptions when using PDF.js versions newer than v3.4.120.
When in an Editor, the TableEditing()
API configuration creates an instance of 2 buttons - Create a Table button, and Table Wizard button (which doesn't have any functionality). This issue occurs when we use newer versions after 2023.2.606. For example:
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools.Clear().TableEditing())
...
)
TableEditing()
API configuration creates instances of 2 buttons, one of which has no functionality.
TableEditing()
API configuration should create an instance of only 1 button
https://netcorerepl.telerik.com/wRaCuPlS39KaFyIS25
https://dojo.telerik.com/ORahihiZ/2
The second editor (NumericTextBox) in the popup is focused by default.
Since the form's focusFirst option is enabled, the first editor (textarea) in the popup should be focused by default.
As a workaround, the textarea can be focused in the editCard event handler:
function onEditCard(e) {
setTimeout(function() {
$(".k-taskboard-pane-content textarea").focus();
}, 100)
}
When RadioButtonFor Helper is bound to a Model property it does not bind when an editable Grid is placed above its declaration.
public class RadioButtonModel
{
public bool IAgreeProp { get; set; }
}
public class RadioButtonController : Controller
{
public ActionResult RadioButton()
{
RadioButtonModel myModel = new RadioButtonModel() { IAgreeProp = false };
return View(myModel);
}
}
@(Html.Kendo().Grid<GridModel>()
.Name("Collaborators")
...
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
...
@(Html.Kendo().RadioButtonFor(m => m.IAgreeProp).Label("I Agree").Value(true))
@(Html.Kendo().RadioButtonFor(m => m.IAgreeProp).Label("I Disagree").Value(false))
The RadioButtonFor Helper should bind to the specified Model property successfully.
The RadioButton Helper does not bind to the specified Model property successfully.
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.
Regression introduced with 2023.3.606
DateTimePicker shows NaN when componentType is set to "modern" and a Date with intervals is passed to the min() method.
The picker shows NaN/NaN/0NaN 12:NaN PM when the min option is set programmatically and the time is changed with intervals.
The picker should display the selected time and date after the min option is set programmatically.
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.
Dojo: https://dojo.telerik.com/oQeDIxUv
After the component is enabled, the k-disabled class remains in the tag.
The k-disabled class is removed.