Consider changing the design for the ColorPicker's input mode selection.

Currently, this is done through clicking a button with "up" and "down" arrow icons:

A more UI-friendly design for the mode selection would be nice to have, for instance, a radio group, dropdown, switch, etc.

When the fonts and font size dropdown is selected, it will be helpful to view the preview of fonts before applying it to text. Similarly for font size also it will be good to preview them.

In the table wizard the caption alignment dropdown looks very long than required

### Suggestion

Either the dropdown size can be collapsed, or we can describe the images to accommodate the longer size:

This just seems like a minor oversight since the Enable(bool) method exists on the DatePicker html helper and other Kendo taghelpers support the enable or enabled attribute, but there doesn't seem to be an enable-like attribute for the kendo-datepicker. Thanks!

<kendo-datepicker for="ReadOnlyDate" enable="false"></kendo-datepicker>

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.

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>);

})

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.

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>

Overview

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"))
            })
            ...
        )

Current behavior

The ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view.

Expected/desired behavior

The ToolBar.Custom() API configuration should expose built-in configurations for adding a handler and partial view.

Environment

• Kendo UI version: 2024.3.806
• Browser: [all]

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

.NET 6 introduced DateOnly and TimeOnly types, but none of the relevant date/time controls support these types.

There is already a feature request to support DateOnly in DatePicker; this feature request is about adding support for TimeOnly to TimePicker.

Request for "Resize" Event for the following Components:

• TabStrip
• Form
• GridLayout
• Responsive Panel
• Wizard

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.

At this stage, the Serialize() method depends on Newtonsoft.Json:

using Newtonsoft.Json;

namespace Kendo.Mvc.Infrastructure
{
    public class DefaultJavaScriptSerializer : IJavaScriptSerializer
    {
        public string Serialize(object value)
        {
            return JsonConvert.SerializeObject(value).Replace(@"<", @"\u003c").Replace(@">", @"\u003e");
        }
    }
}

Is it possible to remove the dependency and use the System.Text.Json serializer instead?

Is it possible to implement an option that enables the paging of the Grid View?

For example:

@(Html.Kendo().FileManager()
    .Name("filemanager")
     .Views(gridView => gridView.Grid(grid => grid.Pageable()))
     ...
)