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.
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.
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.
The attributes handler overload does not get executed when the column is initially marked as hidden.
hidden
property of the ContactTitle field to true
.The attributes handler is not executed when the column is hidden.
The attributes handler should be executed when the column is hidden.
Dojo example: https://dojo.telerik.com/uGitesaF
When the DropDownList has an initial value, the floating label overlaps with the text.
The label should be displayed above the DropDownList.
Workaround: refresh the floating label in the dataBound event handler of the component:
e.sender.label.floatingLabel.refresh()
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.
Dojo example: https://dojo.telerik.com/UWicoqeJ
The cell will display: "NO OK"
The cell should display: "OK" as it does in Excel.
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.
Drawing line is being offsetted.
Drawing line should be applied correctly.
The issue might be related to #7108
Dojo example: https://dojo.telerik.com/oDOcanIk
The checked radio button of the RadioGroup appears unchecked.
The RadioGroup check state remains the same.
Describe the bug
Scenario: a Window appended to the content of a TabStrip tab. If the content is scrolled down, when you open the Window it does not appear centered. Reproducible only with the SASS themes.
To reproduce
Steps to reproduce the behavior:
Expected behavior
The behavior with the LESS themes is the expected one. The Window appears centered and there is no offset when dragging it.
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)
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.
Creating a Telerik project for the "Standard" option is broken (VB.NET and C#):
1. The project fails building due to this error:
2. The rendered hamburger menu does not appear properly:
If a RadioGroup is used for editing a required field, the validator is fired if a selection is not made. However, when selecting a field after the validation message appears and blurring the field, the other inputs of the RadioGroup remain marked as invalid.
Open the dojo:
https://dojo.telerik.com/eSEliROr/3
When an option is selected and the input is no longer focused, the validation message should disappear. Also, the other inputs should no longer be marked as invalid.