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.
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.
After using setOptions() the HTML structure of Grids column header is different.
In the following demo:
https://demos.telerik.com/aspnet-mvc/grid/persist-state
When the button is clicked, setOptions() called for the Grid and the structure of the column headers is now different.
When setOpitons() is called with no options that may affect the headers the HTML structure of the column headers should be the same.
Ticket ID 1418725
Currently it is not possible to pass HtmlAttributes() to the ArcGauge wrapper. The other gauges have this method, the ArcGauge should be no different.
The HtmlAttributes() should be set to the widget's element.
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.
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.
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;
}
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 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
### Bug report
The built-in search tool does not render when it is defined through the Toolbar() configuration. By default, it renders as expected.
### Reproduction of the problem
@(Html.Kendo().TaskBoard()
.Name("taskBoard")
.Toolbar(t => t.Items(items =>
{
items.Add().Type("TaskBoardSearch").Command("SearchCommand").Name("search").Text("Search").Icon("search");
}))
...
)
REPL sample for reproduction:
https://netcorerepl.telerik.com/QRaTOpbm101bVWAv11
### Expected/desired behavior
The search tool should be rendered when it is set up through the Toolbar() configuration.
A possible workaround:
@(Html.Kendo().TaskBoard()
.Name("taskBoard")
.Toolbar(t => t.Items(items =>
{
items.Add().Name("search");
}))
...
)
### Environment
* **Telerik UI for ASP.NET Core version: 2023.1.117
* **Browser: [all]
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.
Is it possible to allow the integration of the Template component in the Template() option of the CustomTemplate() configuration in the Editor's Toolbar?
For example:
@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.Clear()
.CustomTemplate(x => x.Name("customButton").Template(
Html.Kendo().Template()
.AddComponent(c => c.Button()
.Name("myButton")
.Events(ev => ev.Click("onExecute"))
)
))
)
)
Regression in R2 2022 SP1.
Dojo example:https://dojo.telerik.com/eLULiTob
After deleting the last item (image or folder), the loading icon remains.
No loading icon should be shown in the popup, once all the images are removed.
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.
Please note the following MVC code:
Bug 1: The Window should have the top set by the Top() method. It does not.
Bug 2: The Window should have the top set by the HtmlAttributes() method. That does not work either.
Bug 3: The scrollable method also does nothing to the window. So this entire line seems to be omitted.
Bug 4: The window is supposed to be centered by the Kendo native code. It isn’t. The recurring editor div element is not shown until after the window centers. So the window generates, centers on the screen, then the recurring DIV is shown which expands the window downwards, then the window is shown. This makes it go off the bottom of the screen. I didn’t need vertical center anyways so I fixed this by setting the top to 40px. Which is when I ran into the above issues. However if I was not doing this, the center() issue would still be there. I fixed this in JavaScript on the event’s edit event.
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RadioButtonTemplate"))
Add a RadioButton in the RadioButtonTemplate.cshtml template:
@model GridExample.Models.OrderViewModel
@(Html.Kendo().RadioButton().Name("engine1").Checked(true).HtmlAttributes(new { @name = "engine" }).Label("1.4 Petrol, 92kW"))
@(Html.Kendo().RadioButton().Name("engine2").HtmlAttributes(new { @name = "engine" }).Label("1.8 Petrol, 118kW"))
A js exception is thrown and the popup does not open:
Chrome:
Uncaught TypeError: Cannot read properties of undefined (reading 'toString') kendo.all.js:313050
Firefox:
Uncaught TypeError: this.bindings.checked.get() is undefined kendo.all.min.js:10:102181
The issue is reproducible with a RadioButton or a RadioButtonFor helper.
No exception is thrown and the custom popup displays the RadioButton.
The Kendo Scaffolder is no longer available in the Add New Scaffolded Item dialog.
The Kendo Scaffolder works as intended.
### 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]