Currently a DateTime property of a nested object does not get parsed when used as a column in the Grid:
public class MyClass
{
public MyOtherClass Item{get;set;}
}
public class MyOtherClass
{
public DateTime CreatedAt{get;set;}
}and Formatting cannot be applied:
columns.Bound(p => p.Item.CreatedAt).Title("Time").Format("{0:D}");
Hi Team,
I'd like to request adding a configuration to the Kendo UI Grid or ExcelExport event which would be a setting to autofit the Excel sheet columns instead of changing the workbook.sheets.columns.autowidth.
Thank you!
It will be great if we can have a very simple "out-of-the-box" way to add a Column Chooser in the toolbar, similar to the Search Feature.
Something like Syncfusion's column chooser here:
https://ej2.syncfusion.com/aspnetcore/Grid/ColumnChooser
This will help me significantly in my development effort and provide a much better experience for my paying customers.
I have hundreds of grid tables with different schemas, columns with MinScreenWidth, and hidden columns (depending on the availability of data).
On a page, it can have multiple grid tables that are dynamically generated.
I also use View Component to generate each grid table.
The current column menu isn't perfect because I want it to only act as a filter checkbox, not a menu where a user needs to click twice to access the filtering feature. (And my users need to use the filtering mechanism A LOT)
Thanks,
Luke
Add GroupPaging method to the configuration of the Custom DataSource in Telerik UI for ASP.NET Core as available for Telerik UI for ASP.NET MVC.
Example: https://demos.telerik.com/aspnet-mvc/grid/grouppaging
Bug report
The Kendo UI Grid's pager for UI for ASP.NET Core does not have an "All" option and it can't be configured in the Razor syntax.
Current behavior
Using the Kendo UI Grid's pageable.PageSizes, the ALL option is not available for UI for ASP.NET Core as it's only an Int32[].
Expected/desired behavior
The All option should be included like in the UI for ASP.NET MVC Razor Syntax.
Environment
- Kendo UI version: 2020.3.915
- Browser: all
Bug report
The Kendo UI Sortable for ASP.NET Core assumes that all selectors are by "id".
Reproduction of the problem
1. Set the .For() option of the Sortable widget to a class selector:
@(Html.Kendo().Sortable()
.For(".k-grid table")
// . . .
)2. Inspect the page source.
3. The following string is rendered:
<script>
kendo.syncReady(function () { jQuery("\\.k-grid table").kendoSortable(// options) });
</script>
Expected/desired behavior
The Sortable widget should allow for passing any jQuery selectors.
Environment
* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all]
Hi folks!
I am using the Grid's ColumnMenu with its new ComponentType-property set to "modern" like this:
@(Html.Kendo().Grid<my_fancy_web_application.ViewModels.ProjectListViewModel>()
.Name("myGrid")
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Willst Du diesen Eintrag wirklich löschen?"))
.Sortable()
.Scrollable()
.Pageable(pageable => pageable.Enabled(false))
.ColumnMenu(columnMenu => columnMenu.ComponentType("modern"))
// ... going on with some further definitions
)In the <head>-Tag of my _Layout.cshtml file, I have set the Kendo Culture to Swiss German:
<script>kendo.culture("de-CH")</script>What I now observed is, that the buttons "Apply" and "Reset" did not get translated properly and remain in English (see Column_Menu_Reset_Apply_Button.png). Whereas other messages are correctly translated.
I tried to find out which message property was set there, so that I could add it manually to the "kendo.messages.de-CH.min.js" (as by the way I still have to do for e.g. the Grid's searchbar placeholder "Search...").
In the loaded kendo.all.min.js (2021.1.330) I discovered, that there was no message property in place, and the texts were rather hard-coded:
'<div class="k-columnmenu-actions">' + '<button class="k-button" type="button">Reset</button>' + '<button class="k-button k-primary" type="button">Apply</button>' + '</div>' + '</div>'With the Chrome's dev tools and the source map, I found the above code on line 55815 by searching for the class "k-columnmenu-actions".
Could you please change the mentioned code to make use of the kendo.messages-properties and update the culture-specific kendo.messages files accordingly?
Thanks in advance!
Kind regards,
Janick
The ability to export a grid to excel has been a great addition, we would like the ability to export in CSV and XML also.
Hi!
We're using a drop down list as a grid cell's edit template, but.. our users are unable to properly edit the rows at the bottom of the grid due to drop down list going off the page, and closing when they attempt to scroll.
any ideas?
When you create a Grid using a TModel that inherits from DynamicObject, a type cast exception is thrown when setting the DataSource Model Id property.
public class Metadata : DynamicObject{
...
}
...
.DataSource(dataSource =>
{
dataSource.Ajax()
.Model(model =>
{
model.Id("Id");
});
})A type cast exception is thrown by the following line in Kendo\AspNet.Core\Kendo.Mvc\UI\DataSource\Fluent\DataSourceModelDescriptorFactoryBase.cs because ModelDynamicDataKey is not generic, so it cannot be cast to IDataKey<TModel>
dataKey = (IDataKey<TModel>)new ModelDynamicDataKey(fieldName, lambdaExpression);
The following code changes fix the issue:
DataSourceModelDescriptorFactoryBase.cs
namespace Kendo.Mvc.UI.Fluent
{
using System.Reflection;
using Extensions;
/// <summary>
/// Defines the fluent interface for configuring the <see cref="DataSource"/> Model definition.
/// </summary>
/// <typeparam name="TModel">Type of the model</typeparam>
public abstract class DataSourceModelDescriptorFactoryBase<TModel> : IHideObjectMembers
where TModel : class
{
protected readonly ModelDescriptor model;
public DataSourceModelDescriptorFactoryBase(ModelDescriptor model)
{
this.model = model;
}
/// <summary>
/// Specify the member used to identify an unique Model instance.
/// </summary>
/// <param name="fieldName">The member name.</param>
protected void Id(string fieldName)
{
IDataKey<TModel> dataKey;
if (typeof(TModel).IsDynamicObject())
{
var lambdaExpression = ExpressionBuilder.Expression<TModel, object>(fieldName);
dataKey = new ModelDynamicDataKey<TModel>(fieldName, lambdaExpression);
}
else
{
dataKey = GetDataKeyForField(fieldName);
}
dataKey.RouteKey = dataKey.Name;
model.Id = dataKey;
}
protected IDataKey<TModel> GetDataKeyForField(string fieldName)
{
var lambdaExpression = ExpressionBuilder.Lambda<TModel>(fieldName);
var fieldType = typeof(ModelDataKey<,>).MakeGenericType(new[] { typeof(TModel), lambdaExpression.Body.Type });
var constructor = fieldType.GetConstructor(new[] { lambdaExpression.GetType() });
return (IDataKey<TModel>)constructor.Invoke(new object[] { lambdaExpression });
}
}
}
ModelDynamicDataKey.cs
namespace Kendo.Mvc.UI
{
using System;
using System.Linq.Expressions;
using Microsoft.AspNetCore.Mvc.Rendering;
internal class ModelDynamicDataKey<TModel> : IDataKey<TModel>
where TModel : class
{
public ModelDynamicDataKey(string memberName, Expression<Func<TModel, object>> expression)
{
RouteKey = "id";
Name = memberName;
Expression = expression;
Value = expression.Compile();
}
public string Name
{
get;
}
public string RouteKey
{
get;
set;
}
public Func<TModel, object> Value
{
get;
}
public Expression<Func<TModel, object>> Expression
{
get;
}
public object GetValue(object dataItem)
{
try
{
return Value((TModel)dataItem);
}
catch (Microsoft.CSharp.RuntimeBinder.RuntimeBinderException)
{
return null;
}
}
public string HiddenFieldHtml(IHtmlHelper<TModel> htmlHelper)
{
return htmlHelper.Hidden(Name, null, new { id = "" }).ToString();
}
}
}
Bug Report
Ticket ID:1486632
When using groupable.sort.compare with client operations and groupPaging, a JavaScript error is thrown:
Reproduction
Environment
2020.3.915
Hi,
We have a property EnableHeaderContextAggregateMenu in Radgrid. By enabling this, we can aggregate any column in the Radgrid and show the result value in the corresponding column footer at runtime by the end user.
Do we have similar property in Kendo UI Grid? We need to implement this in Kendo UI Grid which has dynamic column data binding. We had attached a sample code here. Can you please implement the same in the code and revert?
Thanks & Regards,
Shivakumar. K
I posted this in the forums but didn't get a response so I'll try here. Per this link, and other forum posts I thought that when server operations are set to 'false' that non string types would work in the search box for the ASP MVC Core grid.
Documentation:
Another forum post reference:
https://www.telerik.com/forums/new-search-panel-and-datetime
My grid code is below. The 'PaymentType' Column is an enum and the search does not work for it. I have also tried adding this:
.Search(search=> { search.Field(f => f.PaymentType); })
but it didn't make a difference
@(Html.Kendo().Grid<B3.Services.LoanServices.LoanServiceModels.PaymentServiceModel>()
.Name("PaymentRegisterReport")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Payments_Read", "StandardReports", new { area = "Reports" }))
.PageSize(1000)
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Title("Date");
columns.Bound(p => p.LoanName).Title("Loan Name");
columns.Bound(p => p.PaymentType).Title("Payment Type");
columns.Bound(p => p.CheckNumber).Title("Check Number");
columns.Bound(p => p.Amount).Title("Amount").Format("{0:C}")
.HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align: right" });
})
.Pageable()
.Sortable()
.Filterable()
.HtmlAttributes(new { style = "font-size:12px" })
.ColumnMenu()
.ToolBar(t =>
{
t.Search();
t.Excel();
})
.Reorderable(l => l.Columns(true))
.Events( e =>
{
e.ColumnShow("saveKendoGridState");
e.ColumnHide("saveKendoGridState");
e.ColumnReorder("kendoGridColumnReorder");
})
)
The Custom() DataSource has capability to set the initial Page of the grid:
.PageSize(20)
.Page(4)While the Ajax() DataSource does not. It would be nice if it gets added.
Currently, you can use the page() method for local or .Ajax() bound grid:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page
Or query:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/query
It's kind of difficult to describe in the subject, but here's the scenario. In an ASP.NET Core 3.1 web app, we have some different Kendo Grids that are generated by using the HTML Helper. Some of these use server operations while others do not. Following the information in the Persist State demo, I'm working on changes to save the grid options (sorting, filtering, page number, etc.) when the user navigates away from a page, then restore them the next time it's loaded. With a grid we have using server operations, this is working well so far. For a grid we have using client operations, on the other hand, I'm getting unexpected results.
Example:
@(Html.Kendo().Grid(new[]
{
new { ProductName = "Product 1", UnitPrice = 3.50 },
new { ProductName = "Product 2", UnitPrice = 5.30 }
})
.Name("TestGrid")
.NoRecords(n => n.Template("No records found"))
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
<script>
$(document).ready(function () {
var grid = $("#TestGrid").data("kendoGrid");
var options = grid.getOptions();
grid.setOptions(options);
});
</script>
If you comment out the JavaScript, you get a working grid. With the JavaScript in place, this should get the options from the grid, then immediately re-apply those same options (just for testing purposes) and the grid should end up looking the same as it did before. However, the setOptions() call seems to be triggering a POST back to the same page (with the data "sort=&group=&filter=") then wiping the data from the grid and showing the "No records found" message. However, since this grid is bound to a model property and has ServerOperation(false), all of the data needed is already at the client and there is no Ajax request that exists to get this data.
This is the code from viewing the source that was rendered by the code in the View from above:
<div id="TestGrid" name="TestGrid"></div><script>kendo.syncReady(function(){jQuery("#TestGrid").kendoGrid({"noRecords":{"template":"No records found"},"columns":[{"title":"Product Name","field":"ProductName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Unit Price","field":"UnitPrice","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":2,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductName":{"editable":false,"type":"string"},"UnitPrice":{"editable":false,"type":"number"}}}},"data":{"Data":[{"ProductName":"Product 1","UnitPrice":3.5},{"ProductName":"Product 2","UnitPrice":5.3}],"Total":2}}});});</script>
<script>
$(document).ready(function () {
var grid = $("#TestGrid").data("kendoGrid");
var options = grid.getOptions();
grid.setOptions(options);
});
</script>
I'm not sure why it's attempting an Ajax request, but that appears to be what's causing the problems. With the other grid we have that *does* use server operations, I'm assuming we're not having this same problem because it does actually require an Ajax request to read the data.
When a Grid is placed inside a template (e.g. hierarchy), the # symbol needs to be escaped from strings since it is a special key for the Kendo internal logic:
https://docs.telerik.com/kendo-ui/framework/templates/overview#creating-inline-templates
This creates a problem with Unicode letters, since they are automatically encoded by the framework to values containing the # symbol on the client. Currently, a column having Unicode characters in its HtmlAttributes causes an "invalid template" error:
columns.Bound(p => p.Item).Width(200).Title("Item").HeaderHtmlAttributes(new {title = "Item with äöüÄÖÜß"});Creating a .ToolTip("Hover Text") property similar to the existing .Title("Header Text") one will resolve this issue and help users to easily provide tooltips for the column headers.
Workarounds until the issue is fixed:
Workaround 1:
columns.Bound(p => p.Item).Width(200)
.HeaderHtmlAttributes(new {
title = GetEncodedText("äöüÄÖÜß"), @class="encodedHeader" });
...
@{ string GetEncodedText(string title)
{
return Html.Encode(title).Replace("#", "\\#");
} }<script>
$(document).ready(function () {
$("div.k-grid.k-widget").each(function (i, e) {
var grid = $(e).data().kendoGrid;
grid.bind("dataBound", gridDataBound);
grid.bind("detailExpand", function (args) {
var innerGrid = args.detailRow.find("div.k-grid.k-widget").data().kendoGrid;
innerGrid.bind("dataBound", gridDataBound);
});
function gridDataBound(e) {
e.sender.element.find("th.encodedHeader").each(function (i, e) {
var headerCell = $(this);
headerCell.attr("title", $("<textarea/>").html(headerCell.attr("title")).text());
});
}
});
});
</script>2. Workaround:
columns.Bound(p => p.Item).Width(200)
.ClientHeaderTemplate("<span class='headerTemplate' title='Item with äöüÄÖÜß'>Title</span>");Event
definition:
@(Html.Kendo().Grid<OrderPosModel>()
...
.Events(e=>e.DataBound("gridDataBound"))function gridDataBound(e) {
e.sender.element.find("span.headerTemplate").each(function (i, span) {
span.parentElement.title = span.title;
});
I want to be able to expand / collapse grouped column headers in my grid (ASP.NET Core). I have found this example which achieves what I need (https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click), however the HeaderTemplate() method appears to be unavailable. See my placement below.
I am using the following packages:
KendoUIProfessional, Version="2020.3.915"
Telerik.UI.for.AspNet.Core, Version="2020.3.915"
@(Html.Kendo().Grid<RegulationViewModel> () .Name("grid") .Columns(columns => { columns.Select().Width(75).Locked(true); columns.Group(g => g .Title("Key information") .HeaderTemplate("Key info <button class='k-button' style='float: right;' onclick='onExpColClick(this)'><span class='k-icon k-i-minus'></span></button>") .Columns(i => { i.ForeignKey(p => p.ContinentId, (System.Collections.IEnumerable) ViewData["continents"], "Id", "ContinentName") .Width(110).Locked(true); i.ForeignKey(p => p.AreaId, (System.Collections.IEnumerable) ViewData["areas"], "Id", "AreaName") .Width(150).Title("Area").Locked(true); }) ); columns.ForeignKey(p => p.CountryStateProvinceId, (System.Collections.IEnumerable)ViewData["countries"], "Id", "CountryStateProvinceName") .Width(150).Locked(true); columns.Command(command => command.Destroy()).Width(100); }) .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); toolbar.Custom().Text("Mark reviewed").Name("review"); }) .Editable(editable => editable.Mode(GridEditMode.InCell)) .PersistSelection() .Navigatable() .Resizable(r => r.Columns(true)) .Reorderable(r => r.Columns(true)) .Sortable() .Filterable(f => f .Extra(false) .Messages(m => m.Info("Show items with:")) .Operators(operators => operators .ForString(str => str .Clear() .Contains("Contains")) ) ) .Scrollable(sc => sc.Virtual(true)) .Events(e => e .Edit("forceDropDown") .DataBound("onDataBound") .FilterMenuInit("filterMenuInit") ) .DataSource(dataSource => dataSource .Ajax() .Batch(true) .PageSize(20) .ServerOperation(false) .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); model.Field(p => p.ContinentId).DefaultValue((ViewData["defaultContinent"] as ContinentViewModel).Id); model.Field(p => p.AreaId).DefaultValue((ViewData["defaultArea"] as AreaViewModel).Id); model.Field(p => p.CountryStateProvinceId).DefaultValue((ViewData["defaultCountry"] as CountryStateProvinceViewModel).Id); }) .Read(read => read.Action("GetRegulations", "RegulationIndex").Type(HttpVerbs.Get)) .Create(create => create.Action("AddRegulations", "RegulationIndex").Type(HttpVerbs.Post)) .Update(update => update.Action("UpdateRegulations", "RegulationIndex").Type(HttpVerbs.Post)) .Destroy(delete => delete.Action("DeleteRegulations", "RegulationIndex").Type(HttpVerbs.Delete)) ))
Bug Report:
Whenever the foreign key column of the grid is configured for multi checkbox filtering and is nullable, the value of the "null" option is sent to the server as "NaN".
Steps to replicate:
1. Set ForeignKey column
2. Make the column nullable
3. Set the filterable.multi option to true
4. filter by the null value
A sample project with reproduction has been shared in Ticket with ID: 1463089
Bug report
Grid's items are not correctly calculated when a group is expanded and groupPaging is set to "true".
Reproduction of the problem
- Open this Dojo and run it
- Expand the "Assistant Sales Agent" group.
- Expand the "Assistant Sales Representative" group
Current behavior
On the expand of the "Assistant Sales Agent" group, the footer displays the following:
On the expand of the "Assistant Sales Representative" group, the footer displays:
The number of the displayed items is incorrectly calculated
Expected/desired behavior
The number of the displayed items should be calculated based on the number of the rows inside the opened groups
Environment
- Kendo UI version: 2020.2.617
- jQuery version: x.y
- Browser: [all]
Bug report
When the data source of the grid is set to WebAPI, the Batch option is not available.
Reproduction of the problem
1. Set the DataSource to WebAPI()
2. Attempt to enable the Batch(true) option.
Description
Reproducible only with the latest version of the suite - 2019.3.1023. The Batch option is available in the 2019.3.917 version.
Environment
* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all]