In a .NET 7 project when TagHelper Grid is configured and RuntimeCompilation is employed, starting from version 2023.2.606 an unhandled exception is thrown.
When run a runtime error occurs
TagHelper Grid should exhibit the same behavior as HtmlHelper ones.
Regression introduced with 2024.1.130. Likely related to: #7650
Workaround: remove "px" from the width values, e.g.,
width: "80"
The columns ignore their width setting and each column has 1/3 of the Grid's width.
The columns widths are proportionate to the specified width values (as in R3 2023 SP1).
CheckBox is not serialized correctly when declared in the Template component.
The CheckBox is not serialized correctly when declared in the Template component.
The CheckBox should be serialized correctly when declared in the Template component.
Please ensure that FilterableMessageBuilder configurations are applied to the Filter's menu when it is placed within a ColumnMenu or expose configurations to control the messages of the Filter menu within the GridColumnMenuMessagesBuilder.
Here is an example REPL that showcases the configuration doesn't have effect
.Filterable(f => f.Messages(m =>
{
m.And("Custom And");
m.Or("Custom Or");
}))
unless ColumnMenu() is commented out.
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.
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:
There is an edge case in the Pager's responsive configuration. If the width is between 480 and 600 pixels both the DropDownList and Buttons that allow the user to navigate through the pages are hidden.
The buttons and dropdown are missing
The Pager should display a DropDownList for page selection when it is wide between 480 and 600px.
When the GroupPaging configuration is present the exported Grid doesn't have any data.
The exported Excel only contains headers and footers
The whole content of the Grid must be exported.
Grid throws an error when the Filterable Column Messages TagHelper is set.
<messages />
in a column's <filterable></filterable>
TagHelper.Setting the Messages TagHelper produces the following compilation error:
The tag is not allowed by parent tag helper. Only child tags with name(s) 'cell, operators, datasource' are allowed.
Setting the Messages TagHelper should not produce the following compilation error.
Is it possible to add an "attributes" option to the editable.window configuration that allows the addition of HTML attributes to the window?
For example:
//HtmlHelper Grid
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
...
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(wnd => wnd.HtmlAttributes(new { @class= "my-custom-window" })))
)
//Kendo UI for jQuery Grid
$("#grid").kendoGrid({
...
editable: {
mode: "popup",
window: {
attributes: {
"class": "my-custom-window"
}
}
}
});
Is it possible to implement binding of TimeSpan property to TimeDurationPicker editor?
For example:
@model TimeSpan? @(Html.Kendo().TimeDurationPickerFor(m => m))
Grid Filterable Button Title Message is not correctly serialized.
Set the Filterable.Messages.ButtonTitle() API Configuration as follows:
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
})
.Filterable(f => f.Messages(m => m.ButtonTitle("Filter")))
)
Hover the Filter Button Icon and notice that the buttonTitle message is applied instead.
The Filter ButtonTitle message shows its default message.
The Filter ButtonTitle should show the custom-provided message.
Grid PageSizes TagHelper attribute does not expose an IEnumerable overload
The Grid PageSizes TagHelper attribute exposes only an int[]
overload which prevents adding options such as "All".
In comparison to its HtmlHelper counterpart:
.Pageable(paging => paging.PageSizes(new object [] { 5, 10, 20, "All" }))
It would be a good idea to consider altering the page sizes to accept an IEnumerable overload.
The last checkbox selection is not disabled and allows all the columns to be removed if the menu options for the command column are explicitly set to false:
The last checkbox selection should be disabled without allowing all the columns to be removed if the menu options for the command column are explicitly set to false:
The following dojo depicts the aforementioned behavior.
### 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]
I have noticed that neither the HtmlHelper nor the TagHelper wrappers of the Grid's Pageable.Pagesize configuration support the all option to be configured as a page size.
This is unlike the Kendo UI for jQuery pageSize option which supports it as per the example in the API:
pageable: {
pageSizes: [2, 3, 4, "all"],
numeric: false
}
When a Grid that has a DateTime column is exported to Excel that column doesn't get its width automatically like columns bound to other types of data.
An explicit Width needs to be set for the DateTime column as evident in this Telerik REPL.
Could you please fix the columns.autoWidth of the kendo.ooxml.Workbook to work for all types of data?
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>