When endless scrolling is implemented, manual DataSource operations using the DataSource APIs(query, page, sort, etc.) do not work as expected. The endless scrolling settings are causing paging issues.
The first page is only accessible, and when scrolling down the reads continue to occur.
The endless scrolling settings should not interfere with manual dataSource operations.
kendo.ui.Pager.fn._refreshClick = function (e) {
e.preventDefault();
var grid = $("#grid").getKendoGrid();
grid.dataSource.options.endless = null;
grid._endlessPageSize = 20;
grid.dataSource.pageSize(20);
}
kendo.ui.Pager.fn._refreshClick = function (e) {
e.preventDefault();
var grid = $("#grid").getKendoGrid();
window.restoreScroll = true;
window.scolledValue = grid.content[0].scrollTop;
grid.dataSource._data.empty();
grid.dataSource._pristineData = [];
grid.dataSource.read();
}
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.
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.
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.
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.
We are using the Kendo UI for different components like Grid in our APS.Net MVC application. Currently we are experiencing an issue while exporting the Kendo grid to Excel from mobile (both android and ios). It shows the following warning message. The same works when exporting from a PC without any issue. Could you please help to resolve the issue.
Bug report
PersistSelection does not work when GroupPaging is enabled. Error is thrown: "Cannot read property 'Id' of undefined"
Reproduction of the problem
Dojo: https://dojo.telerik.com/aKixuZAy
Expected/desired behavior
No error shall be thrown and rows should be persisted when GroupPaging is enabled
Environment
Kendo UI version: 2020.2.617
Browser: [all]
I was try to upgrade Telerik UI for Asp.Net to 2020.2.513 form 2019.3.1023 ,but after I done the upgrade ,
the checkbox in the grid was disappeared with nothing change in my code.
I use the simple function columns.Select(), it seems the <label for='xxx#' class='k-checkbox-label k-no-text'></label> no been build.
Is there anything I need to do after upgrade ?
Hi,
I'm experiencing a bug with the kendo grid. In my project I have a rather complicated website where a kendo grid is loaded depending an multiple criteria which can be chosen by the user through dropdowns and multiselects. Luckily, I could break it down to a simple test website and the bug still is bugging around ;)
Description: Depending on the criteria chosen, the grid loads different data which reach from zero to thousands of data rows. In my example here, it's either zero or 100 data rows (depending on the dropdown, if there is either "Empty" or "Not empty" selected). The grid loads its data if you press the button ok (by calling the Load action on the server). The result is meant to be limited to paging of 25 rows (no user choice wanted)!
Heres the code for the cshtml site:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="content">
<div>
@(Html.Kendo().DropDownList()
.Name("test_selector")
.DataTextField("Display")
.DataValueField("Value")
.BindTo(new List<DropDownVM>() {
new DropDownVM() {
Display = "Empty",
Value = "empty"
},
new DropDownVM() {
Display = "Not empty",
Value = "notEmpty"
}
})
)
</div>
<div>
@(Html.Kendo().Grid<MyProject.ViewModels.Test.TestItem>()
.Name("grid_Test")
.Columns(columns =>
{
columns.Bound(x => x.TestId).Title("TestId").Width(75);
columns.Bound(x => x.TestName).Title("TestName").Width(75);
})
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(25)
.Read(read => read.Action("Load", "Test").Data("GetSelectorData"))
)
.AutoBind(false) //Do not load Grid data initially
)
</div>
<div>
@Html.Kendo().Button().Name("Load").Content("Load")
</div>
</div>
<script type="text/javascript">
$("#Load").on("click", function (e) {
var grid = $("#grid_Test");
grid.data("kendoGrid").dataSource.read();
});
function GetSelectorData() {
var selectorData = {
type: $('#test_selector').data("kendoDropDownList").value()
}
return selectorData;
}
</script>
</body>
</html>
And the corresponding controller:
public class TestController : BaseController
{
public ActionResult Index()
{
return View();
}
public ActionResult Load([DataSourceRequest] DataSourceRequest request, string type)
{
List<TestItem> result = new List<TestItem>();
if (type == "notEmpty")
{
for (int id = 1; id <= 100; id++)
result.Add(CreateTestItem(id));
}
request.PageSize = 25;
return Json(result.ToDataSourceResult(request));
}
private TestItem CreateTestItem(int id)
{
TestItem result = new TestItem()
{
TestId = id,
TestName = "Name" + id
};
return result;
}
}
Problem: The scenario described above works actually fine as long as the
grid gets at least one data row delivered as DataSourceResult (i.e., result.Count > 0 in the Load method of the controller). The request object in the
controller's Load method also shows request.PageSize to be configured to 25. Also, if I choose "Empty" from the dropdown and press the Load-button, the request in the controller will show PageSize = 25. But if I switch the selector to "Not empty" afterwards and press Load, the request will show PageSize = 0! This results in the grid not being paged at all and showing all results on a single page (which leads to serious connectivity problems in my productive project as soon as there are several thousands of data rows).
I tried a quick workaround in the Load method of the controller by setting the PageSize manually back to 25 (which is not wanted of course, but would actually work for me at the moment):
public ActionResult Load([DataSourceRequest] DataSourceRequest request, string type)
{
List<TestItem> result = new List<TestItem>();
if (type == "notEmpty")
{
for (int id = 1; id <= 100; id++)
result.Add(CreateTestItem(id));
}
request.PageSize = 25;
return Json(result.ToDataSourceResult(request));
}
Unfortunately, this doesn't work either. The paging will be back on again and there will be only 25 data rows loaded in the grid but there is only one single page no matter how many data rows are loaded (see attached screenshot).
Do you know about this? Unfortunately I couldn't find any help for this problem so far.
Greetings!
A hidden template column that is not included in the ColumnMenu appears after showing another column
.Columns(columns =>
{
//Hidden template column
columns.Template(x =>
{
int rptIndex = Model.IndexOf(x);
string namePrefix = "Grid[" + rptIndex + "].";
Html.Hidden(namePrefix + "Id", x.Id, new { @readonly = "readonly" });
Html.Hidden(namePrefix + "Name", x.Name, new { @readonly = "readonly" });
}).Hidden().IncludeInMenu(false);
columns.Bound(x => x.Id).Width(120).Hidden(true);
columns.Bound(x => x.Name).Width(200);
columns.Bound(x => x.ReportingDateOriginal).Width(500).HtmlAttributes(new { id = "reporting-date-original" })
.Filterable(f => f.UI(GridFilterUIRole.DateTimePicker).Cell(c => c.Template("dateFilter")));
columns.Bound(x => x.Test1).Width(200).Hidden(true);
columns.Bound(x => x.TimezoneOffset).Width(200).HtmlAttributes(new { id = "reporting-date-offset" });
columns.Bound(x => x.Test2).Width(200).Hidden(true);
columns.Bound(x => x.ReportingDateAdjusted).Width(500).HtmlAttributes(new { id = "reporting-date-adjusted" })
.Filterable(f => f.UI(GridFilterUIRole.DateTimePicker).Cell(c => c.Template("dateFilter")));
columns.Bound(x => x.Test3).Width(200);
columns.Bound(x => x.Test4).Width(200).Hidden(true);
columns.Bound(x => x.Test5).Width(200);
})
The first time instead of the Id, the template column appears.
The Id column should appear and the template column should remain hidden.
A recent update has revealed some strange behaviour in some (not all) grids. In the attached screenshot, the javascript for the two buttons is on display inside the toolbar. If I move them out of the toolbar, the script no longer displays.
As a workaround, I have added this to CSS:
script {
display: none !important;
}
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:
Reported in: Ticket ID: 1524543. Reproducible in Chrome and Firefox. Not reproducible in Edge
Version 91.0.864.54.
Dojo example: https://dojo.telerik.com/iqUFarUV/3
On dragging the handle the column width automatically increases. Then if you try to decrease the width, you can't go past a certain width threshold.
The columns can be resized precisely, similarly to when their width is set in "px" instead of "%".
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.
When using template and no DataSource is set Grid NoRecords message is not rendered.
Define a 'No Records' with template similar to the following article example: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/no-records
@(Html.Kendo().Grid<Grid_Template.Controllers.GridModel>()
.Name("Grid1")
.NoRecords(n => n.Template("string HTML template, not centered"))
)
The default message for missing record is displayed: No records available.
"autoBind":false is applied to serialization
The message from the template is displayed: "string HTML template, not centered"
Workaround:
Add .DataSource(d => d.Ajax()) to the Grid configuration
@(Html.Kendo().Grid<Grid_Template.Controllers.GridModel>()
.Name("Grid1")
.NoRecords(n => n.Template("string HTML template, not centered"))
.DataSource(d => d.Ajax())
)
https://github.com/telerik/kendo-ui-core/issues/6598
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.
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.
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
### 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]
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.