Bug report

Incorrect id attribute is generated when the Value() configuration contains spaces. As a result a RadioButton component is not initialized.
This is a regression introduced with v2022.1.301

Reproduction of the problem

The following RadioButton definition:

@(Html.Kendo().RadioButton().Name("radioBtn1").Value("Value with spaces"))

generates an incorrect id attribute

<input id="radioBtn1_Value with spaces" name="radioBtn1" type="radio">
kendo.syncReady(function() {
    jQuery("#radioBtn1_Value with spaces").kendoRadioButton({
        "checked": false,
        "value": "Value with spaces"
    });
});

Expected/desired behavior

A valid id attribute should be generated.

TicketID:

1569749

Environment

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

This is a strange bug I came across when making a simple grid for a small personal project. I created a class called Book, which looks like this:

[Table("Books")]
    public class Book
    {
        [Key]
        public int Id { get; set; }
        [Required]
        public string Title { get; set; } = null!;

        public Checkout? Checkout { get; set; }

        [NotMapped]
        public bool CheckedOut => Checkout != null;
    }

I then created a simple Razor view on which to show the books on a grid. Here is what the code for the page looks like:

@{
    ViewData["Title"] = "All Books";
}

@(
    Html.Kendo().Grid<LibraryMvc.Core.Entities.Book>()
        .Name("bookGrid")
        .Pageable(p => {
            p.PageSizes(new[] {20, 50, 100 });
            p.Numeric(true);
            p.Input(true);
        })
        .Editable(e => e.Mode(GridEditMode.InLine))
        .Filterable()
        .Sortable()
        .Scrollable()
        .ToolBar(t => t.Create())
        .Columns(col => {
            col.Bound(c => c.Id).Title("ID");
            col.Bound(c => c.Title).Title("Title");
            col.Bound(c => c.CheckedOut).Title("Checked Out");
            col.Command(com => {
                com.Edit();
                com.Destroy();
            }).Title("Manage");
        })
        .DataSource(ds => 
            ds.Ajax()
            .PageSize(20)
            .Model(md => {
                md.Id(f => f.Id);
                md.Field(f => f.Id).Editable(false);
                md.Field(f => f.CheckedOut).Editable(false);
            })
            .Read(r => r.Action("Book_Read", "Book"))
            .Create(c => c.Action("Book_Create", "Book"))
            .Update(c => c.Action("Book_Update", "Book"))
            .Destroy(c => c.Action("Book_Destroy", "Book"))
        )
)

When running my app with this code, I noticed that client-side validation would not work on the grid. Nothing would stop me from adding multiple Book rows with empty Titles, despite Title being a [Required] property based on my Book class's Data Annotations:

I assumed I did something wrong, so I scoured the internet and Telerik's support items in hopes of finding something, but then I came across this when inspecting the page's elements in Chrome's dev tools:

Look at the script tag. For whatever reason, the kendoTextBox ended up using the Razor view's ViewData["Title"] property. Oops!

To work around this, I ended up changing my Book class's Title field to BookTitle, as shown below:

[Table("Books")]
    public class Book
    {
        [Key]
        public int Id { get; set; }
        [Required]
        [Column("Title")]
        public string BookTitle { get; set; } = null!;

        public Checkout? Checkout { get; set; }

        [NotMapped]
        public bool CheckedOut => Checkout != null;
    }

With this property name changed, I was able to get client-side validation to work as needed:

A second workaround involved getting rid of the ViewData["Title"] definition on my Razor view:

Given all this, it looks like something that's generating the client-side validation on the page is getting tripped up over the word "Title" being used by multiple items on the page.

Bug report

The Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but does not wrap the content in a container element, leading to incorrect rendering.

Reproduction of the problem

1. Define a Drawer the following way:

<button id='show'>Show</button>
@(Html.Kendo().Drawer()
        .Name("drawer")
        .Template(@"
            <ul>
                <li data-role='drawer-item'  class='k-state-selected'><span></span><span class='k-item-text'>A</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>B</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>C</span></li>
             </ul>
            ")
        .Mode("overlay")
        .Position("left")
        .SwipeToOpen(true)
        .Content(@<text>
                <div id="A">Item A content</div>
                <div id="B" class='hidden'>Item B content</div>
                <div id="C" class='hidden'>Item C content</div>
            </text>)
        .Events(x => x.ItemClick("onItemClick")))

<script>
    $('#show').click(function () {
        var drawerInstance = $("#drawer").getKendoDrawer()
        drawerInstance.show();
    });

    function onItemClick(e) {
        $('body').find('.k-drawer-content > div').addClass("hidden");
        $('body').find('.k-drawer-content').find("#" + e.item.find(".k-item-text").text()).removeClass("hidden");
    }
</script>
<style>
    .hidden {
        display: none;
    }

</style>

Sample application:
TelerikAspNetCoreApp226.zip

Current behavior

Only the <div id="A">Item A content</div> element is treated as a content for the Drawer

Expected/desired behavior

The passed content should be wrapped in a container

Environment

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

### Bug report

The CheckBox TagHelper does not render the attribute "required" and a custom class.

### Reproduction of the problem

The CheckBox TagHelper definition:

<kendo-checkbox id="KendoCheckboxRequiredByHtml" class="form-check-input" required>
</kendo-checkbox>

It generates the following markup:

<input id="KendoCheckboxRequiredByHtml" name="KendoCheckboxRequiredByHtml" type="checkbox" value="true" data-role="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
<input name="KendoCheckboxRequiredByHtml" type="hidden" value="false">

A sample for reproduction is attached.

### Expected/desired behavior

The attribute "required" and the class "form-check-input" to be set to the generated input element.

### Environment

* **Kendo UI version: 2022.2.510
* **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]

Bug report

When deleting a record in a grouped editable Grid, the "Destroy" action is triggered twice.

Reproduction of the problem

1. Run the following example
2. Open the Network Tab.
3. Delete a record.

Expected/desired behavior

The "Destroy" action should not be triggered twice.

Environment

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

Bug report

The TextBox TagHelper does not render the maxlength and placeholder attributes when set via data annotations.

Reproduction of the problem

For a model property defined the following way

[Display(Name = "Example", Prompt = "Example Prompt")]
[StringLength(maximumLength : 5, MinimumLength = 1, ErrorMessage = "Must be between 1 and 5")]
public string Example { get ; set ; }

the TextBox TagHelper generetes

<input
  class="form-control k-input-inner"
  data-val="true"
  data-val-length="Must be between 1 and 5"
  data-val-length-max="5"
  data-val-length-min="1"
  id="Example"
  name="Example"
  value=""
  data-role="textbox"
  style="width: 100%;"
  aria-disabled="false"
  autocomplete="off"
  aria-invalid="true"
  aria-describedby="Example_validationMessage">

when the default ASP.NET Core TagHelper generates markup containing the maxlength and placeholder attributes:

<input
  class="form-control k-invalid"
  type="text"
  data-val="true"
  data-val-length="Must be between 1 and 5"
  data-val-length-max="5"
  data-val-length-min="1"
  id="Example"
  maxlength="5"
  name="Example"
  placeholder="Example Prompt"
  value=""
  aria-invalid="true"
  aria-describedby="Example_validationMessage">

Expected/desired behavior

The maxlength and placeholder attributes are set to the generated input element.

Environment

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

Bug report

When the user creates a folder and tries to add a file to the Editor an error occurs that the file is not found. This behavior is observed only if the application is Core 3.1.

Reproduction of the problem

1. Open Image and File Browser Demo
2. In the ImageBrowser create a folder.
3. Upload an image and try to add it to the Editor

Current behavior

Currently, in the console, an error 404 occurs that the resource is not found.

Expected/desired behavior

The image should be added to the Editor without errors.

Environment

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

Bug report

Kendo.Mvc.UI.GridBoundColum.SerializeValues throws an exception when using an Enum, decorated with FlagsAttribute.

This is a regression introduced with v2022.2.510. Possibly related to telerik/kendo@423e1e9

Reproduction of the problem

Using a ForeignKey column, bound to Enum, where the Enum has the FlagsAttribute throws an exception:

columns.ForeignKey(m => m.MyEnum, ....); // MyEnum is an enum with the FlagsAttribute

Expected/desired behavior

Using an Enum, decorated with FlagsAttribute should be possible, as in previous versions and an exception should not be thrown.

Environment

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

We noticed while testing the latest version (UI for ASP.NET Core R2 2022 (version 2022.2.510)) that hidden grid columns are incorrectly exported to Excel. Rolling back one version resolves the issue so it appears to be an issue in the new version.

I verified it in the grid demos on your site, and also verified that the bug is not present in the jQuery version.

jQuery version - no issue

1. Go to https://demos.telerik.com/kendo-ui/grid/excel-export
2. Click "Export To Excel" button - view the export
3. Use the columns menu to hide the Produce Name column
4. Click "Export To Excel" button - view the export and the Product Name column is correctly not exported

ASP.NET Core version - BUG

1. Go to https://demos.telerik.com/aspnet-core/grid/excel-export
2. Click "Export To Excel" button - view the export
3. Use the columns menu to hide the Produce Name column
4. Click "Export To Excel" button - view the export and the Product Name column is still exported but shouldn't be

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]

### Bug report

When Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package is installed in Telerik UI for ASP.NET Core application, it throws an exception:

FileNotFoundException: Could not load file or assembly 'Microsoft.DotNet.InternalAbstractions, Version=1.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The system cannot find the file specified.

### Reproduction of the problem

1. Create Telerik UI for ASP.NET Core MVC application (.NET Core version 6.0).

2. Install Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package (version 6.0.5).

3. Turn on the Razor Runtime Compilation:

//Program.cs file

// Add services to the container.
builder.Services.AddControllersWithViews()
                .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver())
                .AddRazorRuntimeCompilation();

4. Run the application and review the exception.

Attached is a runnable sample for reproduction.

### Workaround

Install Microsoft.DotNet.InternalAbstractions NuGet package (version: 1.0.0)

### Environment

* **Kendo UI version: 2022.2.510
* **jQuery version: 1.12.4
* **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 Core wrapper does not have a "Type" option:

.DependenciesDataSource(d => d
	.Model(m =>
	{
		m.Id(f => f.DependencyID);
		m.PredecessorId(f => f.PredecessorID);
		m.SuccessorId(f => f.SuccessorID);
		**m.Type(f => f.Type);**
	})
	.Read("Read_Dependencies", "Gantt")
	.Create("Create_Dependency", "Gantt")
	.Destroy("Destroy_Dependency", "Gantt")
)

Both the MVC wrapper and the jQuery widget allow to specify a field in the data that will be used as "type". Currently the Core wrapper does not allow specifying a field, and dependencies will work only if the data contains a field named "Type".

Environment

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

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

When the DropDownTree control is added as a Form editor through the Editor() method, there is an ArgumentNullException "Value cannot be null. (Parameter 'key')".

### Reproduction of the problem

Attached is a demo that replicates the issue.

If the DropDownTree is defined outside of the Form, it is bound to the Model property as expected.

### Expected/desired behavior

The DropDownTree editor should bind to the Model property in the Form.

### Environment

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

Bug report

DataSource Wrappers do not expose a configuration property do create a kendo.data.SchedulerDataSource. This is needed to configure a shared DataSource between the Filter and the Scheduler

Reproduction of the problem

1. Unlike jQuery the wrappers do not expose the configuration for a SchedulerDataSource

Expected/desired behavior

The wrapper should be able to integrate the Filter with Scheduler as referenced by the Filter's Documentation

TicketID:

1565222

Environment

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

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

### 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 the Grid's Group Paging is enabled and its content is grouped, the Multicheckbox Filter doesn't filter the group data correctly.

Reproduction of the problem

1. Run this REPL Example.
2. Group by a column for example „City”
3. Filter the Country column for example „USA”
4. Check the result for a specific City group

Current behavior

The group shows rows that shouldn't be included when the column is filtered properly

Expected/desired behavior

The group should only show the filtered rows

TicketID:

1546090

Environment

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