### Bug report
When adding custom attributes to the CheckBox Taghelper, they are not added to the input element.
### Reproduction of the problem
1. Define a CheckBox Taghelper and add 'data-bind="checked: Test"' to its tag:
<kendo-checkbox name="Name" data-bind="checked: Test"></kendo-checkbox>
2. Inspect the CheckBox element and you will see that the "data-bind" attribute is missing.
3. When using the HtmlHelper version of the CheckBox, the attributes added through the HtmlAttributes() option are added as expected.
A REPL sample for reproduction: https://netcorerepl.telerik.com/mIuZlRle01kh6Ly043
### Expected/desired behavior
The specified attributes must be added to the input element of the CheckBox Taghelper.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.2.514
* **Browser: [all]
REPL to reproduce the problem following the steps below: https://netcorerepl.telerik.com/wSYNlmbA55iBcMhu20
Steps to reproduce
Type "wil" to get suggestions:
Hit tab to accept the first suggestion.
Click the arrow to display the list of options:
Observe the list of unrelated options, and the textbox now containing the value of the first option listed:
Additional information
The "normal" read request sends what is ultimately handled as a DataSourceRequest object in the controller that includes (among other things) information on how the data should be sorted. The "value mapper" request, on the other hand, sends only the raw values that need to be mapped (without any information on how they are being sorted by the DataSource). As a result, the positional index returned to the value mapper is incorrect if/when the data is sorted differently.
For example, the "normal" read request calls the controller action, it retrieves data [A, C, D, B], and the DataSourceRequest is applied to sort it as [A, B, C, D] and this is how it's displayed in the dropdown list. If the value "B" needs to be mapped, the "value mapper" request calls a similar (but different) controller action, it retrieves the same set of data [A, C, D, B] but does not make any attempt to sort it, finds "B" in the list (#4), and this is returned to the component (which then sets the dropdown's selectedIndex = 4, but in the dropdown's sorted list of data, this corresponds with the value "D", not "B" [which would be 2]).
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.
Toolbar.Items.Group.CustomTool() API of the Scheduler produces an invalid configuration.
To give more context, the Toolbar's buttonGroup items do not expose, nor should they expose a template
configuration. The currently available options advocate that each of the buttons must apply options similar to that of the ToggleButton.
Thus, making the wrapper configuration not applicable. The following dojo verifies this - https://dojo.telerik.com/@alexander64836/ayedUsAh
Toolbar.Custom.Items.Group.CustomTool() API configuration of the Scheduler produces an invalid configuration which is not serialized accordingly.
Toolbar.Items.Group API configuration of the Scheduler should expose a CustomTool() API configuration for the ButtonGroups.
The current workaround would be to declare the CustomTool via the Toolbar.Custom.Items.CustomTool() API configuration. And a ButtonGroup via the Template component:
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
.Name("scheduler")
...
.Toolbar(t => t.Custom(c =>
c.Items(itm => {
itm.CustomTool(Html.Kendo().Template().AddComponent(c => c
.ButtonGroup()
.Name("select-period")
.Items(t =>
{
t.Add().Text(string.Empty).Icon("chevron-up");
t.Add().Text(string.Empty).Icon("chevron-down");
})
));
})
)
)
)
The following Telerik REPL illustrates this approach.
Currently, the Content function for Steps in a Wizard only accepts a string value (see API here).
This means that in order to add a partial view (bound to the current model and its properties), the most straightforward way I could find was to put the partial view (and any wrappers) in its own file and add an extension method "ToHtmlString()". For example:
@model MyModel
@(Html.Kendo().Wizard().Steps(step => {
step.Add().Content(Html.Partial("~/Path/To/View/Wrapper.cshtml", Model).ToHtmlString());
})
using Microsoft.AspNetCore.Html;
using System.IO;
public static class HtmlContentExtensions
{
public static string ToHtmlString(this IHtmlContent htmlContent)
{
if (htmlContent is HtmlString htmlString)
{
return htmlString.Value;
}
using StringWriter writer = new();
htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
return writer.ToString();
}
}
@model MyModel
@(Html.Kendo().TabStrip().Items(tabstrip => {
tabstrip.Add()
.Content(@<div id="@Model.TabContainer" class="myTabWrapperClass">
@await Html.PartialAsync("~/Path/To/View.cshtml", Model)
</div>);
})
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.
The custom ordering of the filter values in the Telerik UI ASP.NET Core Grid does not function correctly when using TagHelpers.
A REPL sample for reproduction: https://netcorerepl.telerik.com/wIYNvEvn00CAqNGL14
The filter values should be presented in the same order as specified in the Filterable configuration.
Consider the use of TextWriter async methods for the HTML Helpers, for example the WriteInitializationScript methods. In certain scenarios the use of the synchronous methods causes an exception: System.InvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead.
This can be resolved by explicitly enabling synchronous operations
services.Configure<IISServerOptions>(options =>
{
options.AllowSynchronousIO = true;
});
though synchronous operations have been disabled by default at framework level as of .NET 3.0.
### Bug report
When the TimePicker's type is "modern", the "min" and "max" options cannot be set dynamically through the min(), max(), and setOptions() methods.
### Reproduction of the problem
1. Define the TimePicker with componentType: "modern".
2. Set its "min" and "max" values through the min() and max() options.
3. The "min" and "max" values are not visually updated.
A Dojo sample for reproduction: https://dojo.telerik.com/OXAqUYiw
### Expected/desired behavior
The "min" and "max" values must be dynamically updated when the TimePicker's type is "modern".
### Workaround
let timeView = $("#timepicker").data("kendoTimePicker").timeView;
timeView.options.specifiedRange = true;
timeView.options.min = new Date(2024, 0, 1, 9, 00, 00);
timeView.options.max = new Date(2024, 0, 1, 22, 00, 00);
timeView._updateRanges();
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>
### Bug report
When the Grid is grouped by a specified column, and this column has a "groupFooterTemplate" that contains aggregates from other fields, it cannot be exported to Excel. It throws a JavaScript exception.
### Reproduction of the problem
1) Group the Grid by the column "ProductName".
2) Export it to Excel through the built-in command "Export to Excel".
3) JS exception is thrown.
A Dojo sample for reproduction: https://dojo.telerik.com/UyUruyOZ
### Expected/desired behavior
The Excel export should work as expected when the Grid is grouped.
### Environment
* **Kendo UI version: 2022.2.802
* **jQuery version: 1.12.4
* **Browser: [all]
At this stage, the ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view. E.g:
@(Html.Kendo().Grid <TelerikAspNetCoreApp455.Models.OrderViewModel>()
.Name("grid")
.ToolBar(toolbar => {
toolbar.Custom().Name("Test1").ClientTemplateHandler("someHandler");
toolbar.Custom().Name("Test2").ClientTemplateView(Html.Partial("_Test2"))
})
...
)
The ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view.
The ToolBar.Custom() API configuration should expose built-in configurations for adding a handler and partial view.
Grid Hidden Column is set as exportable by default for Pdf and Excel
The Grid Hidden Column should be set as exportable by default for Pdf and Excel.
The Grid Hidden Column should not be set as exportable by default for Pdf and Excel.
Currently, the Drawer Hierarchy demo shows how to create two levels of hierarchy. Is it possible to enhance the Drawer to allow multiple nested items?
For example, the following KB article describes how to implement multi-level hierarchy, but the suggested approach requires custom JavaScript logic:
https://docs.telerik.com/kendo-ui/knowledge-base/drawer-multi-level-hierarchy
When a Grid's row is reordered and then the changes are saved - a Destroy request is sent to the server for the dataItem of the reordered row. This happens even though no changes are applied to dataItem of the reordered row.
The Grid should request the reordered item to be perished from the backend.
Note: I already opened issue #7910 in the kendo-ui-core repo for this but wasn't sure if I should report this through the Feedback Portal.
The TextArea TagHelper does not render the "maxlength" attribute when set via data annotations.
Note: this is essentially the same issue from #6884 but applies to the TextArea helper (and not the TextBox helper), so perhaps the fix for that issue just needs to be applied to the TextArea helper (it's always that easy, right? 😉).
Given the following model property:
[StringLength(500)]
[DisplayName("Example")]
public string Example { get; set; }
The Kendo TextArea helper:
<kendo-textarea for="Example" rows="3"></kendo-textarea>
...generates code without the "maxlength" attribute:
<textarea
data-val="true"
data-val-length="The field Example must be a string with a maximum length of 500."
data-val-length-max="500"
id="Example"
name="Example"
data-role="textarea"
aria-disabled="false"
rows="3"
class="!k-overflow-auto !k-flex-none k-input-inner"
autocomplete="off">
</textarea>
The default ASP.NET Core TextArea helper:
<textarea asp-for="Example" rows="3"></textarea>
...generates code with the "maxlength" attribute:
<textarea
rows="3"
data-val="true"
data-val-length="The field Example must be a string with a maximum length of 500."
data-val-length-max="500"
id="Example"
maxlength="500"
name="Example">
</textarea>
The Kendo helper should generate the "maxlength" attribute like the built-in helper.
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.