### Bug report

When the Virtualization of the MultiColumnComboBox is enabled, the table headers and rows are not aligned correctly.

### Reproduction of the problem

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

The tables and rows are aligned as expected when using version 2021 R3 SP2 (2021.3.1207).

A temporary workaround:

<style>
    .k-table-list .k-table-group-row, .k-table-list .k-table-row {
        display: inline-flex;
    }
</style>

### Expected/desired behavior

The headers and rows should be aligned correctly when the Virtualization is enabled.

### Environment

* **Kendo UI version: 2022.1.412
* **jQuery version: 1.12.4
* **Browser: [all]

By default, when the "paste" command is added, the default option is "insert" mode ("Paste (Insert)"). Is it possible to add an option that allows setting the default paste mode to "replace" ("Paste (Replace)")?

In the Scheduler's Timeline view when there are events with the same Start and End dates and one of them is resized, the Scheduler reorders the events automatically, placing the longest event on top and the shortest event at the bottom of the slot. The same occurs in other views, for example, in the Week view the events are automatically reordered from left to right (longest to shortest).

It would be nice to be able to control this behavior and disable it through a dedicated option.

Currently, when using the default Grid search functionality and the column filter menus, we observe the following:

• When a column filter is applied first, using the Search feature afterward overrides the column filters, applying the search filter with the "contains" operator to the specified columns.
• Conversely, when a search is performed first and then followed by a column filter, the grid generally functions as expected.

However, there’s a specific scenario where this does not work properly:

• If a search is performed and then a column filter is applied to a column where the search criteria are relevant, the Grid returns no data.

For example:

• After searching for "2018," the expected columns displayed in the filters (notably, the ContractNumber is among them).

• When a column filter is subsequently applied to ContractNumber (e.g., setting it to "2018-CR0018"), the Grid removes the ContractNumber from the search filters and adds the column filter with an "AND" operator. This setup returns no data because of the search filters and the "AND" operator.

Expected Behavior and Alternative

This functionality behaves correctly in the Telerik UI for Blazor Grid component - the search and column filters are managed as separate objects.

Is it possible to enhance the Grid filtering similar to the Blazor Grid?

Hi, is there a way to configure the grid so that when it's grouped and later sorted, the grouping state (expanded/collapsed) is preserved?

Kind Regards

Erwin

It would be convenient to have built-in MultiColumnComboBox editing for the Grid.

I was hoping the component would show the addresses formatted in columns (as per a fields list) and then return the address concatenated into a single to the grid field (e.g. from .DataTextField("FullAddress")).

Bug report

The issue is reproducible when the Editor is used as an item editor:

editable: {
form: {
buttonsTemplate: "",
items: [{
field: "Title",
label: "Title:"
}, {
field: "Description",
label: "Description:",
editor: "Editor"
}]
}
}

It is not reproducible with editor "TextBox" or "TextArea"

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/KeIjSJgr
2. Click the menu button in one of the cards and select "Edit card" from the dropdown

Current behavior

The following js exception is thrown:
kendo.all.js:131959 Uncaught TypeError: Cannot read properties of null (reading 'open')

Expected/desired behavior

No exception is thrown and the Editor can be used to edit the field value.

Environment

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

Bug report

Reproduction of the problem

1. Run this dojo: https://dojo.telerik.com/nuzVFAFI/6
2. Open the browser dev tools and clear the console.
3. Copy the table below the Editor and paste it in the Editor

Current behavior

An error for the missing image is thrown:
GET https://localhost:63252/test.png 404 (Not Found)

Expected/desired behavior

No error is thrown, since the value of the background-image property has been replaced with "none" in the Editor events and the actual content the Editor visualizes does not use the image:

<tr style="box-sizing: border-box; border-style: solid; border-width: 1px 0px; background-image: none;">
...
</tr>

Environment

• Kendo UI version: 2024.3.1015
• jQuery version: x.y
• Browser: [Chrome XX ]

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:

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

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