Hello,

When you add any kind of filter to the grid, he is wrapped inside span with class "k-filtercell". It would be very usefull to add HtmlAttributes to the html element. Last time i wanted to add class only on the filtercell so i can customize the ui to match our theme. The idea was to have expression for each filter type so i can create css only for the filters. Most of the expressions were ok, because they were wrapped inside Template. But in cases like enum i dont want template, i want only to add class to the filtercell, so i can change it. Its not ok for one types to do the changes with filter expression, for other types to make changes with column.HtmlAttributes(...).

If not HtmlAttributes, at least .Class(...).

Regards,

Dinko

### Bug report

The Button TagHelper is missing in the Visual Studio 2022 IntelliSense. 

### Reproduction of the problem

Create a Telerik UI for ASP.NET Core application (.NET 6) and try to insert a Button TagHelper by using the IntelliSense. It appears that not all available Telerik UI components are available in the suggested list.

### Environment

* **Visual Studio Professional 2022 version: 17.1.0 Preview 1.1

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

Bug report

Setting the HeaderHtmlAttributes of the TreeList throws a Null reference exception.

Reproduction of the problem

1. In the Multi-column headers Demo of the Treelist try adding HeaderHtmlAttributes to a Group:

@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Group(group => group
                .Title("Personal Info")
                .HeaderHtmlAttributes(new {@class="myClass"})
                .Columns(info =>
                {
                  //...
                })
            );
        })

Current behavior

Null reference exception is thrown.

Expected/desired behavior

The Html attributes should be added to the header.

Environment

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

Bug report

When importing a xlsx file containing custom data validation and the "@" symbol a JavaScript error is thrown.

Reproduction of the problem

Import the this sample file that contains the custom validation formula =ISNUMBER(MATCH("*@*",A1,0)) in the Server Import/Export Demo. The following error is thrown and logged on the developer's console:
Can't handle character with code: 64 (input: \"ISNUMBER(MATCH(\"*@*\",A1,0))\")"

Opening the file with the built-in open command works as expected as well as hardcoding the formula - REPL

Expected/desired behavior

Importing a xlsx file containing custom data validation and the "@" symbol should not throw a JavaScript error.

Environment

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

The PlotArea option of the DonutChart does not include the Height option that is available in jQuery:

### Bug report

When the filter is applied through the search panel, the query (more specifically, the filter expressions) is not built correctly. This results in displayed rows that have values that do not match the value from the search panel.

### Reproduction of the problem

1. Enable Search panel and group paging of the grid.

2. Set a value in the search panel and group by a column.

3. Expand the group and verify that there are items with values that do not match the filter expression from the search panel.

Short video demonstration:

https://screencast-o-matic.com/watch/crXFlXVI3i0

### Expected/desired behavior

The returned results should comply with the filter expression built from the Search panel.

### TicketID:
_1543306

### Additional notes and explanation

The Search panel builds the filter expression with the logic operator "or". While this is correct when the actual query is further built from the data source's internals (group function of the kendo.data.js file), the filter will be built with the "or" logic instead of "and". This query has to be restructured in order to send two filter objects with the "and" logic. The first filter object should contain all filter expressions built from the search panel with the "or" logic operator and the second filter object should contain an expression with the operator "eq", the field by which the group is built, and the value. The two filter objects should be combined with the "and" logic. 

### Environment

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

Bug report

When a Telerik UI for ASP.NET Core MultiSelect is used in a Form, a JS error is thrown:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at S.fn.init.find (jquery.min.js:2)
    at new S.fn.init (jquery.min.js:2)
    at S (jquery.min.js:2)
    at Object.data ((index):24)
    at init.setup (kendo.all.js:6596)
    at init.read (kendo.all.js:6574)

The issue occurs when using jQuery 3.6.0, but is absent with jQuery v 1.12.4

Reproduction of the problem

@(Html.Kendo().Form<FormViewModel>()
        .Name("exampleForm")
        .HtmlAttributes(new { action = "Items", method = "POST" })
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(true));
        })
        .Items(items =>
        {
               items.Add()
                        .Field(f => f.MultiSelect)
                        .Label(l => l.Text("MultiSelect:"))
                        .Editor(e =>
                        {
                            e.MultiSelect()
                                .HtmlAttributes(new { })
                                .Placeholder("Select...")
                                .DataTextField("ProductName")
                                .DataValueField("ProductID")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("Items_GetProducts", "Form");
                                    })
                                    .ServerFiltering(true);
                                });
                        });
             })
    )

    public class FormViewModel
    {
        public List<ProductViewModel> MultiSelect { get; set; }
    }

Runnable sample available in ticket 1540812

Expected/desired behavior

JavaScript error should not be thrown.

Environment

• Kendo UI version: 2021.3.914
• jQuery version: 3.6.0
• Browser: [all]

Request to add these common feature for file manager

1) Back and Forward button / command

2) Cut, Copy and Paste button / command

Bug report

When using the TaxtBoxFor HTML helper and the MaxLength is set via DataAnnotation the maxlength attribute is not rendered.

Reproduction of the problem

Model:

public class MyModel
{
    [MaxLength(5)]
    public string Text { get; set; }
}

View:

@Html.Kendo().TextBoxFor(m => m.Text)

Current behavior

The Telerik UI for ASP.NET Core HTML Helper renders the following markup, without the maxlength attribute:

<span class="k-widget k-textbox" style="">
    <input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" name="Text" value="" data-role="textbox" aria-disabled="false" class="k-input" autocomplete="off" style="width: 100%;">
</span>

The default Html.TextBoxFor helper renders the following markup, containing the maxlength attribute:

<input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" maxlength="5" name="Text" type="text" value="">

Expected/desired behavior

The Telerik UI for ASP.NET Core HTML Helper should render the maxlength attribute.

Environment

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

Hi

Just to let you know that the Demo for the Grid SignalR feature is showing an error.

(see screen dump attached)

Thanks
Darryl

Bug report

The DatePicker's popup has a CSS min-height property set that causes it to sometimes have an empty blank space at the bottom.

Reproduction of the problem

1. Open the DatePicker Demo
2. Expand the monthpicker

Review another occurence.

Expected/desired behavior

There should be a blank space in the DatePicker's popup.

Environment

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

Bug report

We are trying to prevent users from dropping an image file from their computer directly onto the Editor with Firefox. When this happens the browser converts the image into a uri encoded version of the image. When we define a custom PasteCleanup function to handle this, the Editor will sometimes work as expected but other times it will throw an error when trying to execute the function. This seems to be random after each page load.

Reproduction of the problem

1. Open this Dojo with Firefox
2. Run the Dojo and drag and drop an image from your machine

Please note that the reproduction of the error is inconsistent. However the CustomPasteCleanUp doesn't prevent the addition of the image, nor does the prevention of the Drop event.

Screen capture of reproduction in ASP .NET Core.
Screen capture of reproduction in Dojo.
More information about issue and reproduction available in ticket: 1534730

Current behavior

An image file that is dragged and drop by the user to the Editor is always added to the widget.

Expected/desired behavior

The current behavior should be preventable and an error must not occur.

Environment

• Kendo UI version: 2021.2.616
• Browser: [ Chrome 93 | Firefox 92 ]

Bug report

PanelBar's TagHelper item url property incorrectly loads content instead of redirecting in v. 2021.2.616

Reproduction of the problem

1. Create a project that uses Kendo version 2021.2.616
2. Initialize the following PanelBar with TagHelper:

    <kendo-panelbar name="panelbar1" class="k-scrollable" style="font-size:smaller" expand-mode="single">
        <items>
            <panelbar-item name="item1" text="First Item (/Index)" url="/Index" />
            <panelbar-item name="item1" text="Second Item (/Privacy)" url="/Privacy" />
            <panelbar-item name="item2" text="Third Item (Telerik demos)" url="https://demos.telerik.com/aspnet-core/"/>
        </items>
    </kendo-panelbar>

3. Compare with the PanelBar with HtmlHelper:

      @(Html.Kendo().PanelBar()
                  .Name("panelbar")
                  .ExpandMode(PanelBarExpandMode.Single)
                  .Items(panelbar =>
                  {
                      panelbar.Add().Text("First Item (/Index)").Url("/Index");
                      panelbar.Add().Text("Second Item (/Privacy)").Url("/Privacy");
                      panelbar.Add().Text("Third Item (Telerik demos)").Url("https://demos.telerik.com/aspnet-core/");
                  })
            )

Current behavior

The Url property of the TagHelper loads content instead of redirecting.

Expected/desired behavior

The Url property should redirect and not load content.

Environment

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

Bug report

When the FileManager is defined using TagHelpers the defined schema is not serialized

Reproduction of the problem

The following FileManager definition:

<kendo-filemanager name="filemanager" upload-url="@Url.Action("FileManagerUpload", "FileManager")">
    <filemanager-datasource>
        <transport>
            <read url="@Url.Action("FileManagerRead", "FileManager")" type="POST" />
            <create url="@Url.Action("FileManagerCreate", "FileManager")" type="POST" />
            <destroy url="@Url.Action("FileManagerDestroy", "FileManager")" type="POST" />
            <update url="@Url.Action("FileManagerUpdate", "FileManager")" type="POST" />
        </transport>
        <schema>
            <filemanager-model id="path" has-children="hasDirectories">
                <fields>
                    <field name="path" type="string" from="Path"></field>
                    <field name="name" type="string" from="Name"></field>
                    <field name="extension" type="string" from="Extension"></field>
                    <field name="created" type="date" from="Created"></field>
                    <field name="createdUtc" type="date" from="CreatedUtc"></field>
                    <field name="modified" type="date" from="Modified"></field>
                    <field name="modifiedUtc" type="date" from="ModifiedUtc"></field>
                    <field name="size" type="number" from="Size"></field>
                </fields>
            </filemanager-model>
        </schema>
    </filemanager-datasource>
    <toolbar>
        <items>
            <item name="createFolder" />
            <item name="upload" />
            <item name="sortDirection" />
            <item name="sortField" />
            <item name="changeView" />
            <item name="spacer" />
            <item name="details" />
            <item name="search" />
        </items>
    </toolbar>
</kendo-filemanager>

generates the following script, without a schema definition:

<script> 
  kendo.syncReady(function() {
    jQuery("#filemanager").kendoFileManager({
        "uploadUrl": "/FileManager/FileManagerUpload",
        "toolbar": {
            "items": [{
                "name": "createFolder"
            }, {
                "name": "upload"
            }, {
                "name": "sortDirection"
            }, {
                "name": "sortField"
            }, {
                "name": "changeView"
            }, {
                "name": "spacer"
            }, {
                "name": "details"
            }, {
                "name": "search"
            }]
        },
        "dataSource": {
            "schema": {
                "model": {
                    "id": "path",
                    "hasChildren": "hasDirectories"
                }
            },
            "transport": {
                "destroy": {
                    "type": "POST",
                    "url": "/FileManager/FileManagerDestroy"
                },
                "read": {
                    "type": "POST",
                    "url": "/FileManager/FileManagerRead"
                },
                "update": {
                    "type": "POST",
                    "url": "/FileManager/FileManagerUpdate"
                },
                "create": {
                    "type": "POST",
                    "url": "/FileManager/FileManagerCreate"
                }
            }
        }
    });
}); 
</script>

Expected/desired behavior

The FileManager DataSource schema should be serialized

Environment

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

### Bug report

The attributes set through the "HtmlAttributes", "ContentHtmlAttributes", and "LinkHtmlAttributes"methods are not applied to the TreeView items.

### Reproduction of the problem

1. Create a TreeView and set attributes by using the "HtmlAttributes", "ContentHtmlAttributes", "LinkHtmlAttributes"methods:

@(Html.Kendo().TreeView()
    .Name("treeview-kendo2")
    .Items(treeview =>
    {
        treeview.Add().Text("My Documents")
        .SpriteCssClasses("k-icon k-i-globe")
        .Expanded(true)
        .Url("/")
        .HtmlAttributes(new { @class = "fairydust1" })
        .ContentHtmlAttributes(new { data_navigate = "navigate_content", @class = "trigger", title = "content_title" })
        .LinkHtmlAttributes(new { data_navigate = "navigate_link", @class = "trigger", title = "content_link" });
    })
)

2. Run the page and inspect the TreeView item.

### Expected/desired behavior

The attributes are serialized and rendered.

### Environment

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

Bug report

The PanelBar for Telerik UI for ASP.NET Core and the PanelBar for Telerik UI for ASP.NET MVC HTML helper behaves differently and renders different markup for the same configuration.

Reproduction of the problem

When the the following configuration is used

@(Html.Kendo().PanelBar()
                .Name("panelbar")
                .ExpandMode(PanelBarExpandMode.Multiple)
                .Items(panelbar =>
                {
                    panelbar.Add().Text("Index").Action("Index", "Home");
                    panelbar.Add().Text("Other Pages")
                        .Items(other =>
                        {
                            other.Add().Text("About").Action("About", "Home");
                            other.Add().Text("Contact").Action("Contact", "Home");
                        });
                })
    )

the following markup and initialization script are generated for Telerik UI for ASP.NET MVC:

<ul class="k-widget k-panelbar k-reset" id="panelbar">
   <li class="k-item k-state-default"><a class="k-link k-header" href="/">Index</a></li>
   <li aria-expanded="true" class="k-item k-state-active">
      <span class="k-link k-header">Other Pages<span class="k-icon k-panelbar-collapse k-i-arrow-60-up"></span></span>
      <ul aria-hidden="false" class="k-group">
         <li class="k-item k-state-default"><a class="k-link" href="/Home/About">About</a></li>
         <li class="k-item"><a class="k-link k-state-selected" href="/Home/Contact">Contact</a></li>
      </ul>
   </li>
</ul>
<script>
kendo.syncReady(function(){jQuery("#panelbar").kendoPanelBar({"expandMode":"multiple"});});

and for Telerik UI for ASP.NET Core

<ul class="k-widget k-panelbar k-reset k-header" id="panelbar" data-role="panelbar" tabindex="0" role="tree">
      <li class="k-item k-state-default k-first" role="treeitem"><a class="k-link k-header" href="/">Index</a></li>
      <li class="k-item k-state-default k-last" aria-expanded="false" role="treeitem">
         <span class="k-link k-header">Other Pages<span class="k-icon  k-panelbar-expand k-i-arrow-60-down"></span></span>
         <ul class="k-group k-panel" style="display:none" role="group" aria-hidden="true">
            <li class="k-item k-state-default k-first" role="treeitem"><a class="k-link" href="/Home/About">About</a></li>
            <li class="k-item k-state-default k-last" role="treeitem" aria-selected="true"><a class="k-link k-state-selected" href="/Home/Contact">Contact</a></li>
         </ul>
      </li>
   </ul>
   <script>kendo.syncReady(function(){jQuery("#panelbar").kendoPanelBar({"autoBind":true,"loadOnDemand":true,"expandMode":"multiple"});});</script>

Current behavior

Besides the different markup the component behaves differently - navigating to the Contact page with the above configuration results in the PanelBar for Telerik UI for ASP.NET MVC being expanded and the Contact Child item selected, but the the PanelBar for Telerik UI for ASP.NET Core is collapsed and the selected item is not visible.

Expected/desired behavior

The PanelBar should behave the same way in the Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core suites.

Environment

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

The Kendo Form should include native ListBox editor support including joining and swapping items between two ListBox's using ConnectWith.

To use a ListBox in the Kendo Form currently requires a custom editor which is overly complex.

Bug report

When the setOptions of the Slider is applied with or without parameters the navigation of the Slider with the mouse breaks unless the resize() method is called immediately after.

Reproduction of the problem

1. Open this Dojo
2. Click the Without resize button
3. Navigate the Slider with the mouse

Note that even if the With resize button is subsequently clicked the behavior persists

Current behavior

Slider.setOptions() breaks mouse navigation of the Widget

Expected/desired behavior

Slider.setOptions() should call the resize method internally to prevent the issue

Environment

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

Currently a DateTime property of a nested object does not get parsed when used as a column in the Grid:

public class MyClass
{
   public MyOtherClass Item{get;set;}
}

public class MyOtherClass
{
    public DateTime CreatedAt{get;set;}
}

and Formatting cannot be applied:

 columns.Bound(p => p.Item.CreatedAt).Title("Time").Format("{0:D}");