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.
Currenty, when the Grid is in InCell edit mode, if a column binds to a boolean field, it is required a custom logic to display the field as a checkbox, which is always in edit mode and can be updated through a single click. Here is a REPL sample that shows the example:
https://netcorerepl.telerik.com/GJOhEIkj47P2xHf709
My opinion is that this functionality should work correctly out of the box without additional coding. If this is not available, then there should be an applicable sample code.
Is it possible to make an example where EF, Dirty works, no double click required and the checkbox always looks like a checkbox?
Starting with version 2025.2.520, the toolbar tools like "Save changes" and "Cancel changes" are hidden by default. When the ShowInactiveTools(true) option is set, the inactive tools are displayed as disabled until a change in the Grid's data is made (for example, the tools are active when the edited cell is closed).
Is it possible to create an option that enables the previous behavior of the inactive toolbar tools - to keep the tools always active and visible no matter if there is a change or not?
For example:
.ToolBar(toolbar =>toolbar
.Items(itm =>
{
itm.Create();
itm.Save();
})
.EnableInactiveTools(true)
)
### Bug report
When using the default column checkbox filter menu and the data requested from the server takes time to load, the filter menu popup does not resize correctly when opening the menu for the first time.
The issue started to occur in version 2025.1.211.
### Reproduction of the problem
1) Enable the checkbox filter menu of a specified column. The Grid binds to remote data and the data operations are perfomed on the server.
2) Open the filter menu when the Grid is loaded.
3) The Read request triggers and a loader is displayed to indicate that the data is loading:
4) The options are loaded, but the popup container does not expand as expected:
5) Close the filter menu and opend it again:
### Expected/desired behavior
The filter menu popup must display all options when the data is loaded.
### Workaround
<style>
.k-animation-container-shown {
overflow: visible !important;
}
</style>
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
The rowReorder
event does not return the correct newIndex
when dragging a row from a lower row index to a higher row index.
Chai
and drop after Chang
. Note oldIndex
is 0, newIndex
is 2, which is unexpected as indices are 0-basedChang
and drop before Chai
and the indices are correct - oldIndex: 1
, newIndex: 0
The returned newIndex
is incorrect.
The returned newIndex
should be correct.
Expose additional API configurations for the Grid's ToolBar
As of recent releases, the Kendo UI Grid Toolbar has been substituted with the Kendo UI Toolbar. This change allows users to add the majority ToolBar.items API options apart from the built-in tools.
As noted within the Kendo UI for jQuery API documentation for the Grid's Toolbar:
"Apart from the built-in tools, the Grid fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself."
The inherited ToolBar.items API options are not available for the server-side Telerik UI Grid for ASP.NET Core and MVC wrappers as well.
It would be beneficial to the customers if the inherited ToolBar.items API options are available for the server-side Telerik UI Grid for ASP.NET Core and MVC wrappers as well.
I'm in the process of rewriting all Kendo components to use CSP compatible templates. I'm looking at https://docs.telerik.com/aspnet-core/html-helpers/template/overview which shows how we'd use TemplateComponentName() for popup editors and that we would need to rewrite everything in the popup editor to use Kendo Template's AddHtml or AddComponent methods.
Original:
<div class="mb-2 row required">
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
<div class="mb-2 row">
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
Rewritten:
@(Html.Kendo().Template()
.AddHtml("<div class='mb-2 row required'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
.AddHtml("<div class='mb-2 row'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
)
While this works, this markup seems much harder to read than the original. Could this be made to be simpler? Ideally I'd like to be able to drop my existing mix of html and kendo components in one method and it'd parse through to render the template properly.
### Bug report
When an Editor component in inline mode is set as an editor in an InCell editable Grid, the Grid cell does not enter edit mode on "click". The issue occurs since version 2023.1.314.
### Reproduction of the problem
1) Create an InCell editable Grid.
2) Set an Editor component in inline mode as an editor to a specified Grid column.
3) Try to edit the cell.
4) The cell flashes and does not enter edit mode.
A Dojo sample for reporduction: https://dojo.telerik.com/zQUvDQEq (check out the "ProductName" column)
### Expected/desired behavior
The Grid column that uses Editor component in inline mode must be editable.
### Environment
* **Kendo UI version: since 2023.1.314
* **jQuery version: 3.4.1
* **Browser: [all]
As a result of an EF Core issue, the ToDataSourceResult() is not able to perform the query when the DataSourceRequest object contains grouping.
The problem occurs using the query below, assembled by Telerik routine:
var temp = _db.Pessoa
.OrderBy(item => item.Email)
.Skip(0)
.Take(40)
.GroupBy(item => item.Email)
.OrderBy(g => g.Key)
.Select(g => new AggregateFunctionsGroup
{
Key = g.Key,
ItemCount = g.Count(),
HasSubgroups = false,
Member = "Email",
AggregateFunctionsProjection = new
{
Count_Referencia = _db.Pessoa
.Select(t => new
{
t.IdPessoa,
t.Referencia,
t.Nome_RazaoSocial,
t.Apelido_Fantasia,
t.CPF_CNPJ,
t.RG_IE,
t.Email
})
.OrderBy(item => item.Email)
.Where(item => item.Email == g.Key)
.Count()
},
Items = g
})
.ToList();
In the routine where the AggregateFunctionsGroup is created, the Items property must not only be the query itself, but also the fields specified in the main Select. Or, the call to the Select() method must simply be added:
var temp = _db.Pessoa
.OrderBy(item => item.Email)
.Skip(0)
.Take(40)
.GroupBy(item => item.Email)
.OrderBy(g => g.Key)
.Select(g => new AggregateFunctionsGroup
{
Key = g.Key,
ItemCount = g.Count(),
HasSubgroups = false,
Member = "Email",
AggregateFunctionsProjection = new
{
Count_Referencia = _db.Pessoa
.Select(t => new
{
t.IdPessoa,
...
})
.OrderBy(item => item.Email)
.Where(item => item.Email == g.Key)
.Count()
},
Items = g.Select(t => new
{
t.IdPessoa,
...
})
})
.ToList();
This way, the issue does not occur.
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
Current configuration: server-side filtering
Desired behavior:
When ParseFormats is set in the DatePicker editor used in the Grid popup, the picker does not show the field value to which it is bound.
public DateOnly? OrderDate { get; set; }
.Model(model =>
{
model.Id(p => p.OrderID);
model.Field(p => p.OrderDate).DefaultValue(new DateOnly());
})
@model DateOnly?
@(Html.Kendo().DatePickerFor(m => m).ParseFormats(new string[] { "MM/dd/yyyy" }).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }))
When editing a record. The value of the OrderDate field is not displayed in the DatePicker.
If you remove the ParseFormats option from the DatePicker, it shows the value as expected.
The field value should be displayed in the picker, even when ParseFormats is set.
### Bug report
When the Grid is initialized in a hidden container (for example, in a non-selected tab of a TabStrip) and its initial data binding is disabled (autoBind: false), the pager information is not visible when the data is loaded afterward.
### Reproduction of the problem
1. Initialize a Grid into a non-selected tab of a TabStrip and set its autoBind option to "false".
2. Select the tab and check how the empty Grid is rendered.
3. Call the read() method of the Grid's DataSource in the browser console to request the data.
4. The data is loaded, but the pager information remains hidden.
A Dojo sample for reproduction: https://dojo.telerik.com/njVgBvza
### Expected/desired behavior
The pager information must be available when the data is loaded into the Grid.
### Environment
* **Kendo UI version: 2024.4.1112
* **jQuery version: 3.7.1
* **Browser: [all]
By default, when the "paste" command is added, the default option is "insert" mode ("Paste (Insert)"). Is it possible to add an option that allows setting the default paste mode to "replace" ("Paste (Replace)")?
Is it possible to implement template options for the "update" and "cancel" column commands of the Grid?
For example:
$("#grid").kendoGrid({
columns: [{
command: [{
name: "edit",
template: {
update: "<button class='customUpdate'>Save</button>",
cancel: "<button class='customCancel'>Cancel</button>",
}
}]
}],
...
});