I'm not sure if this is a bug but if you leave the size off of a column, it stretches to fill the remaining area. However I discovered that this does NOT happen if you lock one of your columns. If you do this, the column doesn't render at all.
With the latest 2022 release, the grid toolbar seems to be rendering buttons incorrectly. It is generating them with k-button and k-button-icontext classes only on them. I don't 100% know this is wrong, but i expected them to render with k-button-solid-base and k-rounded-md classes, and i'm pretty sure i saw docs saying the icontext is not used anymore.
Note: this is about the mvc wrapper.
When we are managing large volumes of data with several thousand datasource objects (grid rows) all of the rows need to be transported with each event.
This leads to errors with the json being too large to serialize.
We wish to restrict the data footprint and only return data for the page requested.
so if the grid has 100 pages and page size is 10 we only want to return the 10 rows required for the page, not 1000 rows.
This is not possible with the Kendo grid.
To work around this issue we have devised a strategy to return the the number of datasource objects Kendo grid expects up to the requested page count, but they are empty objects with no data, and then only have the last 10 rows populated with data.
It would be better for the grid control just to expect the number of results expected to the selected page and not have to add the dummy rows, so long as the total number of rows is provided so that the grid knows how many pages there are.
Our work around looks something like this in asp.net MVC
var users = cm.getUsers();
var result = new DataSourceResult();
var results = new List<user>();
int index = 0;
if (pageNum == 1)
results = users.Take(pageSize).ToList();
else
{
index = pageSize * (pageNum - 1);
results = users.Skip(index).Take(pageSize).ToList();
}
List<user> output = null;
[This is the bit that should be handled by the kendo grid, without the need for dummy rows to further reduce json size]
if (index == 0)
{
output = new List<user>(results);
}
else
{
output = new user[index].ToList();
output.AddRange(results);
}
result = output.ToDataSourceResult(request);
result.Total = users.Count();
return Json(result, JsonRequestBehavior.AllowGet);
Bug report
A regression introduced in R1 2022.
Reproduction of the problem
Reproducible with the RadioButton and RadioButtonFor helpers.
@Html.Kendo().RadioButton().Name("HealthA1").Label("Yes").Value(true).HtmlAttributes(new { id = "HealthA1_True" })
@Html.Kendo().RadioButton().Name("HealthA1").Label("No").Value(false).HtmlAttributes(new { id = "HealthA1_False" })
Current behavior
The rendering is broken: no label element is rendered, the Kendo classes are not applied to the input.
Expected/desired behavior
The RadioButton renders properly.
Environment
- Kendo UI version: 2022.1.301
- jQuery version: x.y
- Browser: [all]
If I specify "SortMode.Mixed" for a Grid's "SortMode" (via the .Sortable fluent method), the sort mode in the JavaScript initializer is set to "multiple" instead. This can even be seen on the MVC Demo page here: https://demos.telerik.com/aspnet-mvc/grid/sorting (the "mixed" demo behaves just like "multiple").
In the Kendo MVC source code for 2022.1.301, the GridSortableSettings.Serialize method appears to use the following logic:
if (SortMode != GridSortMode.SingleColumn)
{
json["mode"] = "multiple";
}
I'm using the ClientTemplate-Feature to render buttons for CRUD-actions in grids. For one entity I have to use a TreeList instead of a Grid due to parent-child relations. It would be great if I could use the same templates I use for the grid for the treelist as well.
Example:
columns.Bound(x => x.UserName)
.ClientTemplate("<a href='" + Url.Admin().Account() + "/#= Id#/edit'>#= UserName #</a>")
.Width(300);
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.
My understanding after talking to support is that a grid with a popup editor has code behind the scenes that stops adverse scrolling behavior when the popup window closes. However, under certain circumstances, this doesn't work if you have a grid nested in your popup editor that also has a popup editor. As it was described to me, this "behavior is not directly related to the Grid, but the Kendo Window. Generally, it provides the preventScroll property, but I am afraid this scenario is more complex due to the window being internally embedded into the Grid".
The exact scenario I found was that if you shrink you browser window small enough that you need to use some scrolling, scroll down your grid a little, then do something to cause the popup editor to open. Scroll down again to get to your nested grid, open that popup editor, then close it. The browser then auto scrolls to the top.
I was given this code to fix the issue (and it DOES fix it):
<script>
kendo.ui.Grid.fn._destroyEditableOrg = kendo.ui.Grid.fn._destroyEditable;
kendo.ui.Grid.fn._destroyEditable = function () {
var that = this;
if (that._editContainer) {
var kw = that._editContainer.data().kendoWindow;
kw.setOptions({
modal: false
});
}
that._destroyEditableOrg();
};
</script>The problem is that these fields aren't documented... I would never have figured this out on my own. So my feature request is that either this behavior is fixed or these properties exposed from the Grid settings.
-Steven
PS: For Telerik, the original ticket was 1589389.
Hi Team,
I would like to suggest that Progress/DevTools creates a SSO authentication service. I'll elaborate further with more details.
Thank you!
This is the same as an existing feature request, which was marked as completed but it doesn't achieve what was originally requested.
Orgchart like the one in Telerik ASP.NET Ajax
The UI for ASP.NET MVC OrgChart component is missing functionality found in the UI for ASP.NET AJAX product.
The demos only show a small organisation dataset. With a large dataset (including up to 5 levels), I found the current MVC solution becomes unusable. For example, the vertical/horizontal scroll bar becomes tiny and navigation becomes difficult.
The extra functionality available in the AJAX works around issues, such as, zooming in/out and solves other basic requirements, such as Export to PDF.
Please make the AJAX Functionality and Application Scenarios available in the MVC product.
Test Environment:
OS Version: 22H2 OS Build 22621.1702
Edge Version: Edge(Chromium) Version 114.0.1823.37 (Official build) (64-bit)
Repro-Steps:
- Open Demo for core features in ASP.NET MVC Grid control | Telerik UI for ASP.NET MVC with valid credentials in Edge browser.
- Navigate through the page using Tab key till Expand/collapse button.
- Run Tab stops and observe the issue whether focus is not moving to the "expand/collapse" button.
While navigating through the page, the Tab focus is not moving to the expand and collapse button.
While navigating through the page, the Tab focus should move to the expand and collapse button.
User Impact:
Test Environment:
OS Version: 22H2 OS Build 22621.1702
Edge Version: Edge(Chromium) Version 114.0.1823.37 (Official build) (64-bit)
Repro-Steps:
- Open ASP.NET MVC Grid Web API Binding Demo | Telerik UI for ASP.NET MVC with valid credentials in Edge browser.
- Navigate through the page using Tab key till filter buttons.
- Run Tab stops and observe the issue whether focus is moving to the filter buttons or not.
While navigating through the page, the Tab focus is not moving to the filter buttons.
While navigating through the page, the Tab focus should move to the filter buttons.
User Impact:
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;
}
Bug report
Reproduction of the problem
Inspect the Grid in the MVC demos.
Current behavior
The Grid renders the k-widget class.
Expected/desired behavior
The rendering must be consistent with jQuery and Core and the k-widget class should not be rendered. The issue is specifically in the MVC Grid. The Kendo UI for jQuery and the Core Grid no longer render this class.
Environment
- Kendo UI version: 2023.1.314
- jQuery version: x.y
- Browser: [all]
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"))
)
)
Here, I am Using a Kendo MVC Grid to show Customers data. I had applied multiple columns with anchor tag for redirection from one grid to another Page. Some how First two rows only by default showing different color than other rows. Actually First two rows by default showing :hover effect as I checked it in Inspect mode and other rows showing actual color which is applied in anchor tag link colors.
Hi Team,
1. Date column filter value shown full date instead of dd/MM/yyyy format. If I change the format filter not working.
Sample screenshot:
2. When I click on grid or some other area on the page selected filter text value like('Last month', 'Last week', 'Today', 'Yesterday') from custom date filter dropdown
Grid:
@(Html.Kendo().Grid<InteractiveReports.Model.ViewModel.UserReportResult>()
.Name("userreport")
.HtmlAttributes(new { @class = "reportgrid" })
//.ToolBar(toolBar => toolBar.Template(
//"<a id='exportpdfdata' class='k-button k-button-icontext k-grid' href='#'><span class='k-icon k-i-pdf'></span>Export to PDF</a>" +
//"<a class='k-button k-button-icontext k-grid-excel' href='#'><span class='k-icon k-i-excel'></span>Export to Excel</a>" +
//"<a id='exportcsvdata' class='k-button k-button-icontext k-grid-csv' href='#'><span class='k-icon k-i-csv'></span>Export to CSV</a>"
//))
.Excel(excel => excel
.AllPages(true)
.FileName("User Report.xlsx")
.Filterable(true)
)
.Columns(columns =>
{
columns.Bound(c => c.Team).Title("Team Name").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("TeamDropDownList")))
.Locked(true)
.ClientTemplate("<a class = 'link-button' title='Team Report' href='\\#' onclick=" + " onteamClick('#=escape(Team)#');>" + "#= Team != null && Team != '(Blanks)' ? Team : '' #" + "</a>")
.Width(200);
//columns.Bound(c => c.Team_type).Title("Team type").Filterable(ftb => ftb.Multi(true)).Width(200);
columns.Bound(c => c.Team_type).Title("Team type").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("Team_typeDropDownList")))
.Width(200).ClientTemplate("#= (Team_type == '(Blanks)') ? '' : Team_type #");
columns.Bound(c => c.Username).Title("Username")
.Width(200).ClientTemplate("#= (Username == '(Blanks)') ? '' : Username #");
columns.Bound(c => c.Title).Title("Title").Width(200).ClientTemplate("#= (Title == '(Blanks)')? '' : Title #");
columns.Bound(c => c.First_name).Title("First Name").Width(200).ClientTemplate("#= (First_name == '(Blanks)') ? '' : First_name #");
columns.Bound(c => c.Last_name).Title("Last Name").Width(200).ClientTemplate("#= (Last_name == '(Blanks)') ? '' : Last_name #");
columns.Bound(c => c.Email_address).Title("Email Address")
.Width(200).ClientTemplate("#= (Email_address == '(Blanks)') ? '' : Email_address #");
columns.Bound(c => c.Company).Title("Company").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("CompanyDropDownList")))
.Width(200).ClientTemplate("#= (Company == '(Blanks)') ? '' : Company #");
columns.Bound(c => c.User_status).Title("User Status").Filterable(ftb => ftb.Multi(true).Cell(cell => cell.ShowOperators(false).Template("User_statusDropDownList")))
.Width(200).ClientTemplate("#= (User_status == '(Blanks)') ? '' : User_status #");
columns.Bound(c => c.Total_time_logged_in).Title("Total Time Logged In").Width(200)
.ClientTemplate("#= (Total_time_logged_in == '(Blanks)') ? '' : Total_time_logged_in #");
columns.Bound(c => c.Last_login_date).Title("Last Login Date").Width(200)
//.ClientTemplate("#= Last_login_date != null ? Last_login_date : '' #")
.ClientTemplate("#= Last_login_date != null ? kendo.toString(Last_login_date, 'dd/MM/yyyy') : '' #")
.Format("{0:dd/MM/yyyy}")
//.Filterable(ftb => ftb.Cell(cell => cell.Template("datePickerFilter")));
.Filterable(f => f.Cell(c => c.ShowOperators(false).Template("dateFilterCustomization")));
columns.Bound(c => c.Last_login_time).Title("Last Login Time").Width(200)
.ClientTemplate("#= (Last_login_time == '(Blanks)') ? '' : Last_login_time #");
//.Filterable(f => f.Cell(c => c.ShowOperators(false).Template("timeFilterCustomization")));
columns.Bound(c => c.No_of_Index_Actions).Title("No. of Index Actions").Width(200)
.ClientTemplate("<a class = 'link-button' title='Index Report' href='\\#' onclick=" + " onidxActionClick('#=escape(UserId)#');>" + "#= No_of_Index_Actions != null ? No_of_Index_Actions : '' #" + "</a>")
.Filterable(ftb => ftb
.Cell(cell => cell
.Operator("eq")
.ShowOperators(false)
.Template("integerFilter_nodecimal")
)); })
.NoRecords(n => n.Template("NO DATA TO DISPLAY"))
.Events(events => events.Filter("onFiltering"))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Events(events => events.Filter("onFilter"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.PageSizes(new[] { 50, 100, 150 })
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Read(read => read.Action("GetUserReportData", "UserReport").Data("passParameter"))
.PageSize(50).Events(x => x.Error("onGridError"))
)
)
Customized Dropdown filter for date column:
var field = {};
var filter = true;
var dateformate = "DD/MM/YYYY";
const formatter = new Intl.DateTimeFormat(['ban', 'id'], { day: '2-digit', month: '2-digit', year: 'numeric' });
function dateFilterCustomization(args) {
var date = new Date();
var yesterday = new Date(date);
yesterday.setDate(date.getDate() - 1);
args.element.kendoComboBox({
dataSource: [
{ text: "Today", value: "1" },
{ text: "Yesterday", value: "2" },
{ text: "This Week", value: "3" },
{ text: "Last Week", value: "4" },
{ text: "Last Month", value: "5" },
{ text: "Since Live", value: "6" },
{ text: "Custom Date range", value: "7" },
],
placeholder: "Select",
dataTextField: "text",
dataValueField: "value",
dataTypeField: "",
valuePrimitive: true,
value: 7,
open: function (e) {
var grid = $('.reportgrid').data("kendoGrid");
var colname = e.sender.element[0].title;
field = getColName(grid.columns, colname);
if (grid.dataSource.filter() != undefined) {
var filters = checkForExistingDates(grid);
if (filters != undefined && filters.length > 0) {
var result = jQuery.grep(filters, function (item) { return item.operator == "gte" })
if (result != undefined && result.length > 0) {
$("#startDate").val(formatter.format(result[0].value));
}
else {
$("#startDate").val('');
}
result = jQuery.grep(filters, function (item) { return item.operator == "lte" })
if (result != undefined && result.length > 0) {
$("#endDate").val(formatter.format(result[0].value));
} else {
$("#endDate").val('');
}
}
else {
$("#startDate").val('');
$("#endDate").val('');
}
} else {
$("#startDate").val('');
$("#endDate").val('');
}
},
select: function (e) {
e.preventDefault();
var dataItem = e.dataItem;
var grid = $('.reportgrid').data("kendoGrid");
var colname = e.sender.element[0].title;
field = getColName(grid.columns, colname);
var vm = this;
var text = dataItem.text;
flag = parseInt(dataItem.value);
if (flag == 1) {
filterSingleDate(date);
} else if (flag == 2) {
filterSingleDate(yesterday);
} else if (flag == 3) {
getThisWeekData();
} else if (flag == 4) {
getPastWeekData();
} else if (flag == 5) {
getPastMonthData();
} else if (flag == 6) {
removeFilter(grid);
}
else if (flag == 7) {
$(".daterangemodel").modal('toggle');
}
vm.text(text);
}
});
}
function startOfLastWeek() {
var today = moment();
var daystoLastMonday = 0 - (1 - today.isoWeekday()) + 7;
var lastMonday = today.subtract('days', daystoLastMonday);
return lastMonday;
}
function EndOfLastWeek() {
var lastMonday = startOfLastWeek();
var lastSunday = lastMonday.add('days', 6);
return lastSunday;
}
function getPastWeekData() {
var startDate = startOfLastWeek();
var endDate = EndOfLastWeek();
filterData(startDate, endDate, field);
}
function getThisWeekData() {
var date = new Date();
var startDate = startOfThisWeek(date);
var endDate = endOfThisWeek(date);
filterData(startDate, endDate, field);
}
Script:
function onFilter(e) {
if (e.filter && e.filter.filters[0].field == "Last_login_date" || e.filter && e.filter.filters[0].field == "Creation_date" || e.filter && e.filter.filters[0].field == "Invitation_date" || e.filter && e.filter.filters[0].field == "Registration_date") {e.filter.filters[0].operator = function (item, value) {
var itemValue = new Date(item);
var userValue = new Date(value);
var condition = itemValue.getFullYear() == userValue.getFullYear()
&& itemValue.getMonth() == userValue.getMonth()
&& itemValue.getDate() == userValue.getDate();
return condition;
};
}
}
Model:
public class UserReportResult
{
public string Team { get; set; }
public string Team_type { get; set; }
public string Username { get; set; }
public string Title { get; set; }
public string First_name { get; set; }
public string Last_name { get; set; }
public DateTime ? Last_login_date { get; set; }
}
Can any admin tell me what is wrong??
After i upgrade my ASP.NET MVC project to Telrik UI version 2024.2.514, many component in my web app in smaller than before upgrade. Some form are broken and unable to use. Do you have any idea causes this issue?
I'm looking forward to your answser. Thanks for your support.