I am using the Grid with two editor template bound to viewdata to populate the components.
Now this is code that I wrote in 2017 that I recent upgraded to .NET 7 ASP Core and has work all those years with no issue. So I think this may be a regression in the grid code.
I have embedded the relevant code leaving out the grid views custom javascript since it isn't relevant.
The behavior that I am seen is that the the grids model properties that do NOT use a customer editor template are not being bound when the save event fires.
public class AlertRuleGridViewModel
{
public int Id { get; set; }
[UIHint("ComponentEditor")]
public string? Component { get; set; }
[UIHint("EmailAddress")]
public string? Email { get; set; }
[UIHint("TypeEditor")]
public string? Type { get; set; }
[UIHint("Boolean")]
public bool Enabled { get; set; }
}<div class="container alert-rules-grid">
@(Html.Kendo().Grid<AlertRuleGridViewModel>()
.Name("alert-grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(l => l.Id);
model.Field(field => field.Id).Editable(false);
model.Field(field => field.Type).DefaultValue(ViewData["defaultType"] as String);
})
.PageSize(12)
.Sort(a => a.Add("Id").Descending())
.Read(read => read.Action("GetRules", "Alerts").Data("additionalData"))
.Create(update => update.Action("UpdateRule", "Alerts"))
.Update(update => update.Action("UpdateRule", "Alerts"))
.Destroy(destroy => destroy.Action("DeleteRule", "Alerts"))
.Events(e => e.Error("gridErrorHandler"))
)
.Columns(columns =>
{
columns.Bound(b => b.Id).Title("Id").Visible(true).Width("4%");
columns.Bound(b => b.Component).Title("Component").EditorTemplateName("ComponentEditor").Visible(true);
columns.Bound(b => b.Email).Title("Email").Visible(true);
columns.Bound(b => b.Type).Title("Log Type").EditorTemplateName("TypeEditor").Visible(true);
columns.Bound(b => b.Enabled).Title("Enabled").ClientTemplate("#=renderStatus(data)#").Visible(true);
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
}
)
.ToolBar(toolBar =>
{
toolBar.ClientTemplateId("toolBarTemplate");
})
.Events(events =>
{
events.Cancel("onCancelEdit");
events.Save("onSave");
}
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Scrollable(s => s.Height("auto"))
.Resizable(resize => resize.Columns(true))
)
</div>I suspect the issue is the generated html for the input that used the editor template.
The data-bind attribute is set to "value:Component.Component" which should be "value:Component"<td class="k-table-td" role="gridcell" data-container-for="Component">
<span class="k-input k-combobox k-combobox-clearable k-input-solid k-input-md k-rounded-md k-valid" style="">
<input name="Component.Component_input" class="k-input-inner k-valid" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-autocomplete="none" aria-controls="Component_Component_listbox" data-bind="value:Component.Component_input">
<span unselectable="on" class="k-clear-value k-hidden" title="clear" role="button" tabindex="-1">
<span class="k-svg-icon k-svg-i-x" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96l45.3 45.3z"/>
</svg>
</span>
</span>
<button type="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="expand combobox" role="button" tabindex="-1">
<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M256 352 128 160h256L256 352z"/>
</svg>
</span>
</button>
<input id="Component_Component" name="Component.Component" type="text" value="" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;" data-bind="value:Component.Component"/>
<script>kendo.syncReady(function(){jQuery("#Component_Component").kendoComboBox({"dataTextField":"Name","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Name":"AppLog.Common.Test","Value":"AppLog.Common.Test"},{"Name":"AppLog.WebAPI","Value":"AppLog.WebAPI"},{"Name":"BadgeReader","Value":"BadgeReader"},{"Name":"CCS.WebUI","Value":"CCS.WebUI"},{"Name":"LVCVA.AppLog.Internal.Web","Value":"LVCVA.AppLog.Internal.Web"},{"Name":"LVCVA.AppSecurity.Domain","Value":"LVCVA.AppSecurity.Domain"},{"Name":"Registration.WPF.UI","Value":"Registration.WPF.UI"},{"Name":"spLogApplicationMessage","Value":"spLogApplicationMessage"}]});});</script>
<span class="field-validation-valid" data-valmsg-for="Component" data-valmsg-replace="true"/>
</td><td class="k-table-td" role="gridcell" data-container-for="Type">
<span title="" class="k-picker k-dropdownlist k-picker-solid k-picker-md k-rounded-md k-valid" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="Type_Type_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-describedby="e73b8727-5e28-4d9b-9faa-df8239f54aa5" style="">
<span id="e73b8727-5e28-4d9b-9faa-df8239f54aa5" unselectable="on" class="k-input-inner">
<span class="k-input-value-text"/>
</span>
<span role="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="select" type="button">
<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M256 352 128 160h256L256 352z"/>
</svg>
</span>
</span>
<input id="Type_Type" name="Type.Type" type="text" value="" data-role="dropdownlist" style="display: none;" data-bind="value:Type.Type"/>
<script>kendo.syncReady(function(){jQuery("#Type_Type").kendoDropDownList({"dataTextField":"Type","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Type":"Critical","Value":"Critical"},{"Type":"Error","Value":"Error"},{"Type":"Warning","Value":"Warning"},{"Type":"Information","Value":"Information"},{"Type":"Verbose","Value":"Verbose"},{"Type":"Start","Value":"Start"},{"Type":"Stop","Value":"Stop"},{"Type":"Suspend","Value":"Suspend"},{"Type":"Resume","Value":"Resume"}]});});</script>
<span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"/>
</td>### Bug report
When the pageSizes option is enabled, it is not displayed when the Grid is initialized inside a hidden container.
### Reproduction of the problem
1) Follow the instructions in this KB article to display a Grid inside a TabStrip component.
2) Enable the "pageSizes" setting.
3) The drop-down, which allows the user to change the page size is always hidden.
A Dojo sample for reproduction: https://dojo.telerik.com/uCORUHUc
The same example works correctly with version 2023.2.718.
### Expected/desired behavior
The pager must display the specified page sizes.
### Workaround
tabstrip.one("activate", function() {
grid.pager._lastWidth = 30;
grid.resize(true);
});### Environment
* **Kendo UI version: 2023.2.829
* **jQuery version: 1.12.4
* **Browser: [all]
### Bug report
When removing a data item through the DataSource remove() method, and then trying to add a new record in the Grid, the editable row does not close when clicking the "Save" command. The Grid is set up for InLine editing.
### Reproduction of the problem
1) Create an InLine editable Grid that binds to local data.
2) Add a custom column command that removes the respective data item by using the remove() method of the DataSource.
3) Delete a specified Grid record through the custom command.
4) Add a new record and click the built-in "Save" command.
5) The row remains in edit mode.
A Dojo sample for reproduction: https://dojo.telerik.com/IQIDuGOt
The last working version is 2024.1.130
### Expected/desired behavior
The editable row must close when clicking "Save" or "Cancel".
### Workaround
Use the Grid removeRow() method rather than the DataSource remove() method.
### Environment
* **Kendo UI version: 2024.1.319
* **jQuery version: 3.7.0
* **Browser: [all]
### Bug report
The "confirmation" attribute of the editable tag does not accept a string.
### Reproduction of the problem
Add a confirmation text as a string in the "confirmation" attribute, as per the example below:
<kendo-grid name="grid">
...
<editable mode="popup" confirmation="Are you sure you want to hide this invoice?" />
</kendo-grid>
A REPL sample for reproduction: https://netcorerepl.telerik.com/moEqPSFo32PrwW4d01
### Expected/desired behavior
The "confirmation" option must accept a string.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.2.514
* **Browser: [all]
Reproducible with the Grid's tag helper. Works as expected in the Html helper.
The toolbar does not show the RadioGroup.
A RadioGroup should appear in the toolbar, as set in the toolbar command template:
<toolbar-command-template>
<kendo-radiogroup name="test">
<kendo-radiogroup-items>
<kendo-radiogroup-item label="Factor" value="F"></kendo-radiogroup-item>
<kendo-radiogroup-item label="Equation" value="E"></kendo-radiogroup-item>
</kendo-radiogroup-items>
</kendo-radiogroup>
</toolbar-command-template>
### Bug report
When subscribing to the "requestStart"/"requestEnd" events of the DataSource after the Grid's initialization, the events do not fire during the Excel export.
### Reproduction of the problem
1. Enable the server operations of the Grid's DataSource.
2. Get a reference to the Grid and handle the DataSource "requestStart"/"requestEnd" events by using the bind() method.
3. Export the Grid's data to Excel through the built-in command.
4. The "requestStart"/"requestEnd" events do not trigger when the read request is activated.
A Dojo sample for reproduction: https://dojo.telerik.com/eyiDIGeM
### Expected/desired behavior
The "requestStart"/"requestEnd" events must trigger when exporting the Grid to Excel.
### Environment
* **Kendo UI version: 2024.3.806
* **jQuery version: 3.7.0
* **Browser: all
When the Grid is nested in a relatively positioned container, during the export the Grid gets an overflow style to its wrapping element. Then the style is removed and re-added again. This happens in a loop, which results in a vertical scrollbar constantly appearing and hiding.
Flickering caused by a scrollbar appearing and hiding
The Grid should remain unchanged during the export and no scrollbar should appear and hide during the export.
### 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]
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 opening the filter menu of a specified column through the classic ColumnMenu, the filter container is displayed with scrollbars when the dropdown of the filter operator is opened.
### Reproduction of the problem
1) Define a Grid and enable its classic ColumnMenu.
2) Open the filter menu of a specified column and then open the dropdown to select a filter operator.
3) The filter container has scrollbars. The "k-menu-popup" element has "overflow: auto";
Use the following demo to test the case and select the "classic" type for the ColumnMenu: https://demos.telerik.com/kendo-ui/grid/column-menu
The issue does not appear when using version 2024.4.1112.
### Expected/desired behavior
The filter menu container must not change its appearance when the dropdown opens.
### Workaround:
<style>
.k-menu-popup {
overflow: visible !important;
}
</style>
### 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]
### Bug report
The "Clear Sorting" and "Clear all filters" labels cannot be localized when using the "sort" and "filter" toolbar commands.
### Reproduction of the problem
A Dojo sample for reporduction: https://dojo.telerik.com/JHJGUaSH
### Expected/desired behavior
The "Clear Sorting" and "Clear all filters" messages should be exposed for localization.
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
### Bug report
When using the sort" and "filter" toolbar commands, the "sort" and "filter" events do not trigger.
### Reproduction of the problem
A Dojo sample for reporduction: https://dojo.telerik.com/ySEQTSSS
### Expected/desired behavior
The "sort" and "filter" events must trigger when sorting and filterng the columsn through the respective toolbar commands.
### Environment
* **Kendo UI version: 2025.2.520
* **jQuery version: 3.7.1
* **Browser: [all]
Hi,
I'm following this document to load data into the grid view control using local data binding.
https://demos.telerik.com/aspnet-core/grid/local-data-binding
I'm not sure this is an issue or expected grid view behavior when using local data binding. If loader-type and no-records are added. What happens is when there are no records, the Skeleton is still displayed and the no-records template is not displayed (see the attached image)
<kendo-grid mobile="Disabled" name="Grid" loader-type="GridLoaderType.Skeleton">
<columns>
<column field="ProductName" title="Product Name">
</column>
<column field="UnitPrice" format="{0:C}" title="Unit Price" width="130">
</column>
<column field="UnitsInStock" title="Units In Stock" width="130">
</column>
<column field="Discontinued" title="Discontinued" width="130">
</column>
</columns>
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
</datasource>
<filterable enabled="true">
</filterable>
<scrollable enabled="true" />
<pageable enabled="true">
</pageable>
<sortable enabled="true" />
<no-records template="string HTML template, automatically centered" />
</kendo-grid>
Thanks
Bob
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: 0The returned newIndex is incorrect.
The returned newIndex should be correct.
### 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]
Using Telerik.Ui.for.aspnetcore version 2025.4.1111, when i create a grid
@(
Html.Kendo().Grid<Land_Management_System.LASIViewModels.LASIMainRecordViewModel>()
.Name("LASIGrid")
.Height("auto")
.Editable(x => x.Enabled(true)
.Mode(GridEditMode.PopUp)
.TemplateName("_LASITabStrip")
.Window(x =>
{
x.Width("90vw").Height("90vh");
x.Resizable().Scrollable(true);
x.Actions(x => x.Minimize().Maximize().Close());
})).Events(x => x.Save("onGridSave").Edit("onGridEdit"))
.Columns(columns =>
{
columns.Bound(p => p.Id).Filterable(true).Visible(false);
columns.Bound(p => p.LASIGuid).Title("LASI Ref No").Filterable(true);
columns.Bound(p => p.UPRN).Title("UPRN").Filterable(true).Visible(false);
columns.Bound(p => p.SiteLocation).Title("Site Location").Filterable(true);
columns.Bound(p => p.Region).Title("Region").Filterable(true).Visible(false);
columns.Bound(p => p.Pre2015Council).Title("Former NIHE District").Filterable(true).Visible(false);
columns.Bound(p => p.SuperCouncil).Title("Super Council").Filterable(true);
columns.Bound(p => p.AreaOffice).Title("Area Office").Filterable(true);
columns.Bound(p => p.ParliamentaryConstituency).Title("Parliamentary Constituency").Filterable(true).Visible(false);
columns.Bound(p => p.DevelopmentLimit).Title("Development Limit").ClientTemplate("#= DevelopmentLimit ? DevelopmentLimit.Name : '' #").Filterable(true);
columns.Bound(p => p.Area).Title("Area").Filterable(true);
columns.Bound(p => p.ReferenceType).Title("Reference Type").ClientTemplate("#=ReferenceType ? ReferenceType.Name : ''#").Filterable(true);
columns.Bound(p => p.PlannerText).Title("Planner").Filterable(true);
columns.Command(command =>
{
command.Custom("Edit").Click("showEdit");
command.Custom("Details").Click("showDetails");
});
})
.Filterable(filterable => filterable
.Mode(GridFilterMode.Menu) // Enables per-column filtering
)
.Width("auto")
.Pageable()
.Groupable()
.ToolBar(t =>
{
t.Create();
})
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("grid_error_handler").RequestEnd("on_board_grid_request_end"))
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(prop => prop.Id).DefaultValue(0);
model.Field(prop => prop.DevelopmentLimit).DefaultValue(new DevelopmentLimitViewModel());
model.Field(prop => prop.ReferenceType).DefaultValue(new ReferenceTypeViewModel());
model.Field(prop => prop.Planner).DefaultValue(new UsersViewModel());
model.Field(prop => prop.Category).DefaultValue(new CategoryViewModel());
model.Field(prop => prop.TempUploadKey);
})
.Read(read => read.Action("LASIRead", "LASI"))
.Create(create => create.Action("LASICreate", "LASI"))
.Update(update => update.Action("LASIUpdate", "LASI"))
)
.NoRecords(true)
)
when i try and create a new record the save button is disabled when it fails validation, when i complete the failed validation fields the button is not re-enabling