When my company's users create a new "customer site" they upload the customer's logo and then choose some colours that will form the basis of theming for the customer's site.  In that way, a customer will 'feel' like they have their own branded experience when using 'their' website.

The colours are inevitably based on the customer's logo.  To use the colour picker component, I have to train my users to go to Paint, load the logo, choose the colour using the colour picker, go into the palette and 'copy the crazy 6-digit numbers that may contain letters of the alphabet that starts with a #' and paste that into the colour picker of our web site.

Rather, I would prefer if they could simply use an eyedropper from the ColorPicker component using functionality similar to https://imagecolorpicker.com/en  It would save training and greatly improve the useability of my website.

Can I put that forward as being a feature request?

Thanks

Dave A

Implement an AllowCustom option in the MultiSelect, which would make possible to select a custom value that is not present in the data.

This option is available in the Kendo UI for Angular MultiSelect:
https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent#allowcustom
https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values

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>

### Bug report

When using the @Html.EditorFor(m => m) configuration to initialize a MultiSelect TagHelper editor, and passing a specified value for its "id" attribute, the "name" attribute of the <select> element contains a prefix.

### Reproduction of the problem

1. Set the MultiSelect TagHelper as an editor editor of a specified Model property and set the "id" attribute using ViewData:

//Model
[UIHint("CustomMultiSelect")]
public IEnumerable<string> Names { get; set; }

//~.Views/Shared/EditorTemplates/CustomMultiSelect.cshtml
@model IEnumerable<string>
@{
    var id = ViewData["id"]?.ToString();
}
<kendo-multiselect for="@Model" placeholder="some custom behavior" bind-to='ViewData["Data"] as List<string>' id='@id'></kendo-multiselect>

2. Define @Html.EditorFor(a=>a.Names, new{id="customId"}) in a form:

@model MyModel

<form id="myForm" data-method="POST"  asp-action="Save" asp-controller="Home"  class="k-form k-form-md">
    <div class="k-form-layout k-d-grid">
        <div class="k-form-field">
            @Html.EditorFor(a=>a.Names, new{id="customId"})
        </div>
    </div>
    ...
</form>

3. When the MultiSelect is loaded, its "name" attribute is "Names.Names" rather than "Names":

When using the HtmlHelper version of the MultiSelect, the "name" attribute is correct:

//~.Views/Shared/EditorTemplates/CustomMultiSelect.cshtml
@model IEnumerable<string>
@{
    var id = ViewData["id"]?.ToString();
}
@(Html.Kendo().MultiSelectFor(m => m)
  .Placeholder("some custom behavior")
  .BindTo((List<string>)ViewData["Data"])
  .HtmlAttributes(new { id = @id })
)

### Expected/desired behavior

When using the @Html.EditorFor(m => m) configuration, the "name" attribute of the MultiSelect TagHelper must match the Model property name when the "id" attribute is set to a custom value.

### Environment

* **Telerik UI for ASP.NET Core version: 2024.3.806
* **Browser: [all]

### Bug report

On mobile devices, when the TaskBoard columns are filled with cards, the users have trouble scrolling horizontally through the columns. When they attempt to scroll the screen, they accidentally drag cards instead of scrolling the columns. This makes navigation in the TaskBoard quite difficult, particularly for projects with a large number of cards.

### Reproduction of the problem

1. Create a TaskBoard with at least two columns.

2. Fill the columns with cards.

3. Open the browser DevTools and switch to mobile view. Tap a card to scroll the columns horizontally or tap at the bottom of the TaskBoard to activate the horizontal scrollbar.

4. The last card is accidentally dragged.

A Dojo sample for reproduction: https://dojo.telerik.com/izASODan

### Expected/desired behavior

When the user makes a hold/long press/long tap, show the "indicator for drag and drop" and then he/she continues with the gesture by moving the card to the desired column and lift the finger. This way, the accidental dragging will be prevented. For more information, refer to the GitHub issue.

Note: The cards in the TileLayout can be dragged only through the card's title element. The TaskBoard cards can be dragged through the card's body, as well.

### Environment

* **Kendo UI version: 2024.3.806
* **jQuery version: 3.7.0
* **Browser: [all]

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.

Bug report

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.

Reproduction of the problem

1. Open this dojo example: https://dojo.telerik.com/IZoxOvOG/7
2. Click the "Export to PDF" button in the Grid's toolbar

Current behavior

Flickering caused by a scrollbar appearing and hiding

Expected/desired behavior

The Grid should remain unchanged during the export and no scrollbar should appear and hide during the export.

Environment

• Kendo UI version: 2024.3.806
• jQuery version: x.y
• Browser: [all ]

### 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>

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

Bug report

Expose additional API configurations for the Grid's ToolBar

Reproduction of the problem

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

Current behavior

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.

Expected/desired behavior

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.

Environment

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

Request for "Resize" Event for the following Components:

• TabStrip
• Form
• GridLayout
• Responsive Panel
• Wizard

Bug report

When applying data validation to all cells of a xlsx file and trying to import the file via Telerik.Web.Spreadsheet as demonstrated in the Server Import/Export demo the application will crash.

Reproduction of the problem

1. Check ticket 1661158 for a sample xlsx file.
   N.B. The sample file has an AnyValidation rule applied to all cells and a title set for the cells. In addition two columns have predefined styling rules - font, fontSize, etc.
2. Try to load the file using Telerik.Web.Spreadsheet, as demonstrated in the Demo.

Current behavior

Loading will fail.

Expected/desired behavior

File should be loaded

Possibly related to #4017
In the reported scenario there are 1048576 rows, with 16384 columns, resulting in 17179869184 cells all with applied non-default validation value, and we iterate them all to set the validation value, so it can be serialized.

Environment

• Kendo UI version: 2024.3.806

### 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