Expose the ability to specify an Edit Form Type mode for the Grid similar to the Telerik UI for ASP.NET AJAX control:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/edit-form-types/defaultcs.aspx
Is it possible to implement binding of TimeSpan property to TimeDurationPicker editor?
For example:
@model TimeSpan? @(Html.Kendo().TimeDurationPickerFor(m => m))
It would be beneficial if the Grid exposes a built-in option for explicitly setting an arrow indicator for selected rows similar to the following:
Hi
I'm using the popup editor to edit rows in the grid.
I'm using following javascript method to open the popup:
function editSelectedRow(name) { var grid = $('#' + name).data('kendoGrid'); var rows = grid.select(); grid.editRow(rows[0]); }
This function is called when a row is double clicked:
$("#Binders tbody").on("dblclick", "tr[role='row']", function (e) { editSelectedRow("Binders"); });
I have this code for many years now and it was never a problem.
With the latest version of the grid this code fails (the popup doesn't open) upon making a change in the popup window. As long as no changes is done to the record in the popup, there will not be a problem.
The error received is the following:
jquery-3.7.1.min.js:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'id') TypeError: Cannot read properties of undefined (reading 'id')
at HTMLTableRowElement.<anonymous> (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814199)
at Function.each (https://code.jquery.com/jquery-3.7.1.min.js:2:3129)
at Le.fn.init.each (https://code.jquery.com/jquery-3.7.1.min.js:2:1594)
at init._persistSelectedRows (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814160)
at init.select (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1811103)
at init._displayRow (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1779176)
at https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894615
at Array.forEach (<anonymous>)
at init.refresh (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894600)
at init.trigger (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:4189) undefined
When the data in the grid is refreshed, no error will occur anymore.
HOWEVER... I also have an "Edit" button on the toolbar of the grid. That buttons uses the same 'editSelectedRow' function but when that button is used, the popup window will open, even after a change to the record!!
With other words... something goes wrong when double clicking a row after an update was made.
What has changed?
Best regards,
Peter
column-command template does not access datasource as an ordinary column template.
<kendo-grid name="grid">
<columns>
<column field="ProductID" title="ID" />
<column title="Column" template="#=columnTemplate(data.ProductID)#" />
<column title="ColumnCommand">
<commands>
<column-command name="change" template="#=columnTemplate(data.ProductID)#"></column-command>
</commands>
</column>
</columns>
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
<transport>
<read url="@Url.Action("ServerFiltering_GetProducts", "MultiSelect")" />
</transport>
</datasource>
</kendo-grid>
<script>
function columnTemplate(productID) {
if (productID % 2 == 0)
return 'even';
else
return 'odd';
}
</script>
Reproduction of the problem:
https://netcorerepl.telerik.com/myurdlbI16kA1TM213
Current behavior:
There is no way to have a dynamic template for column commands that depends on datasource.
Expected/desired behavior:
Having column-command template as column template, making it possible to access data from datasource.
Environment:
Kendo UI version: 2024.2.514
Workaround:
As an alternative solution, I'm using data-bound event, performing a for loop to all rows, but it needs to go line by line, which is not the best solution for large data.
When creating columns in a TagHelper Grid definition, the Width property allows only numbers:
<column field="OrderID" width="100">
</column>
This does not match the width property in the Kendo UI and HtmlHelpers Grid definitions which allow string values to be entered as well:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.width
That way, the developer will be able to add rem and other unit values in TagHelper syntax as well.
Also, it would be convenient if there is a new property similar to this:
<column field="OrderID" tooltip="Unique Number of the Order">
</column>
<column field="Freight"
html-attributes='new Dictionary<string, object>{ ["style"] = "width: 30rem;" }'>
</column>
The grid must allow changes to be made in specific cells, without those changes being committed/saved unless the user clicks on the "Save" button in the toolbar. Basically the users enter in some values for editable currency columns that aren't locked, and (without saving) some columns (both locked and not locked) that are not editable must be refreshed as the value in those cells depend on the edited column. Those cells have client templates and client footer templates which need to be used by whatever is refreshing their cells.
Having this functionality provided built-in will be a nice addition:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-update-particular-row-without-refresh
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();
}
}
}
With batch editing there are no indicators that the
grid is "dirty" after you hit delete, but before you hit the save
changes button. [Note, when a user edits a cell, the top corner display a
small red flag letting the end user know the cell is dirty and has not
been saved/synced to the database yet.] This should be added to let the user know the delete action has not been performed and is in a "pending" state until the save button is pressed. This would be very helpful for UX purposes.
In the meantime, I just apply my own "dirty" class to the save button so end users know to press it before leaving the page if they would like to keep their changes.
When Batch update mode is set to true, Popup editing mode should write back the data to grid and not call the update actions directly upon confirming the popup editing window.
I have a page containing a grid, in the toolbar there are following buttons:
* Add
* Edit
* Delete
When the user clicks Edit, the selected row is edited using the pop-up window. Alternatively the user can also double click the row to start editing.
On the bottom of the page there is a Save and Cancel Changes button. The save changes must update all applied changes, the cancel button must undo them.
At current when Popup editing is used and the user confirms the popup window, changes are immediately written to the database. This breaks functionality of the Cancel button. Cancel will now only apply to deletes.
I need popup functionality because I have too many columns to use in-cell editing.
Telerik is ignoring the setting batch(true) when doing popup editing, so this could even be considered a bug instead of a feature request!
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!
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
At moment the "ForeignKey" method supports only predicates. Is it possible to implement a String overload (a screenshot is attached)?