Bug Report

The Pickers are not bound to model value when a nullable DateTime is set.

Reproduction of the problem

1. Create a model with a nullable DateTime property

        public class MyModel
        {
              public DateTime? Birthday { get; set; }
        }
   

2. Declare either a DatePickerFor, DateRangePickerFor, DateInputFor, or TimePickerFor Helpers

       @(Html.Kendo().TimePickerFor(m => m.Birthday))
   

3. Notice, that the value has not been bound accordingly.

Current behavior

The Pickers are not bound to model value when nullable.

Expected behavior

The Pickers are not bound to model value when a nullable DateTime is set.

Environment

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

Overview

Currently, the Telerik UI for ASP.NET Core DataSource does not expose a Deferred() API configuration. In comparison to its Telerik UI for ASP.NET MVC counterpart.

It would be beneficial to expose the ability to defer the component in the following manner:

@(Html.Kendo().DataSource<TelerikMvcApp119.Models.OrderViewModel>()
    .Name("ds")
    .Ajax(dataSource => dataSource
		.Read(read => read.Action("AssetType_Read", "AssetTypes"))
	)
    .Deferred()
)

It will also enable users to employ CSP using a granular deferred initialization into a separate script tag. Annotated with the nonce attribute

Current behavior

The Telerik UI for ASP.NET Core DataSource does not expose a built-in configuration for deferring the DataSource.

Expected/desired behavior

The Telerik UI for ASP.NET Core DataSource should expose a built-in configuration for deferring the DataSource.

Environment

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

Bug report

TabStrip is not CSP compliant when the Selected() API configuration is enabled.

Reproduction of the problem

1. Create an application with CSP headers
2. Create a TabStrip and set the Selected() API configuration for one of the items

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(items =>
    {
        items.Add().Text("Details")
		.Selected(true)
		.LoadContentFrom("Details", "Home", Model);
    
    })
)

Current behavior

Setting the Select() API configuration will lead to the following Content Security Policy Header Report Error.

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Expected/desired behavior

Setting the Select() API configuration should not lead to a Content Security Policy Header Report Error.

Environment

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

Bug report

When the Columns.Command.Edit.UpdateText property is set to Update, the text will not be modified and will remain as the default value Save.

Reproduction of the problem

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(command => { 
            command.Edit().UpdateText("Update");  //Will not work
        }).Width(250);
    })
    //....
)

REPL
https://netcorerepl.telerik.com/wIuyvtcO41rAa82G36

Expected/desired behavior

The text should change to the specified content within UpdateText.

Workaround

Set the text via JavaScript using the setOptions method and columns.command.text:

        $(document).ready(function(){
            var grid = $("#grid").data("kendoGrid");
            var options = grid.getOptions();
            //set the text for the first command in the last column
            // as shown in the second example on:
            //https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columnscommandtext
            options.columns[4].command[0].text = { edit: "Edit", update: "Update" };
            grid.setOptions(options);
        });

REPL
https://netcorerepl.telerik.com/wIYeGmOz39LL8mHN26

Environment

• Kendo UI version: 2024.1.319
• jQuery version: Related Supported Versions
• Browser: all

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?

### Bug report

When the deferred scripts are created, the script source points at the root of the application instead of the application's root directory.

### Reproduction of the problem

Enable the global deferred initialization and call the @(Html.Kendo().DeferredScriptFile()) method.

The rendered script tag is:  <script src="/kendo-deferred-scripts-XXXX.js"></script>

But it must be: <script src="/MyWebsite/kendo-deferred-scripts-XXXX.js"></script>

### Solution:

If you add a tilde in the Url.Content(), the generated script file must be located as expected:

public HtmlString DeferredScriptFile(string nonce = "")
{
           ...
            var scriptResult= hasDeferredScritps ? $@"<script src=""{urlHelper.Content("~/kendo-deferred-scripts-" + guid + ".js")}"" {(string.IsNullOrEmpty(nonce) ? "" : "nonce=" + '"' + nonce + '"')}></script>" : "";
            var styleResult = hasDeferredStyles ? $@"<link href=""{urlHelper.Content("~/kendo-deferred-styles-" + guid + ".css")}"" {(string.IsNullOrEmpty(nonce) ? "" : "nonce=" + '"' + nonce + '"')} rel=""stylesheet""></link>" : "";
            return new HtmlString(scriptResult + System.Environment.NewLine + styleResult);
}

### Environment

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

### Bug report

When the Dialog is configured with actions and the Content Security Policy is enabled, it throws an "Invalid template" error.

### Reproduction of the problem

1) Configure a Dialog widget with actions and set the CSP with the following content:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com https://code.jquery.com; style-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com;" />

2) Open the browser console to review the error.

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

### Expected/desired behavior

The Dialog should be rendered correctly without using the 'unsafe-eval' keyword in the "script-src" directive.

### Workaround

Insert the following script before the Dialog initialization:

 <script>
    kendo.ui.Dialog.fn._mergeTextWithOptions = function(action) { var text = action.text; if(text) { return kendo.isFunction(text) ? text(this.options) : text; } return ""; }
</script>

### Environment

* **Kendo UI version: 2023.2.606
* **jQuery version: 3.4.1
* **Browser: [all]

Hi,

https://netcorerepl.telerik.com/?_gl=1*ptwrwx*_ga*MTM4MzE0OTY5MC4xNjczNDQ5ODc1*_ga_9JSNBCSF54*MTY3NzE1MzU1Ny44MC4xLjE2NzcxNTg0NTEuNjAuMC4w

From: Edit in Telerik REPL

https://demos.telerik.com/aspnet-core/gantt

Results:

One or more compilation failures occurred: /Views/Snippet.cshtml(24,18): Error RZ1006: The section block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.

Thanks

Andreas

The 'footer' attribute in the TagHelpers for both the DatePicker and DateTimePicker does not result in any corresponding markup / Javascript configuration on the page created by the view.

See https://netcorerepl.telerik.com/QxaPwpPt57ypaI4307

https://docs.telerik.com/aspnet-core/html-helpers/editors/dropdownlist/binding/razor-page

My license doesn't include support so this is the only way I could reach out to you. On this page, the line

.Read(r ==> r

should have => instead of ==>. When I pasted this into visual studio, it was giving me completely unrelated error and took me a bit to figure out what was wrong. Please fix the typo.

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

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 using th-TH culture and setting a valid name for a component an exception InvalidOperationException: Name cannot contain spaces. is thrown.

Reproduction of the problem

Sample Application

1. Run the attached application
2. Select th-TH from the DropDownList, to change the culture

Current behavior

An InvalidOperationException: Name cannot contain spaces. is thrown.

Expected/desired behavior

Exception should not be thrown and components should be rendered as expected.

Environment

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

### Bug report

The localization script "kendo.messages.en-GB.min.js" throws a type error in the browser console - "Cannot read properties of undefined (reading 'messages')".

### Reproduction of the problem

1. Include the culture script "kendo.culture.en-GB.min.js" on the page (locally or by using the Kendo CDN service).

2. Include the localization script "kendo.messages.en-GB.min.js" (locally or by using the Kendo CDN service).

3. Set the culture to "en-GB".

4. An error is logged in the browser console: "Cannot read properties of undefined (reading 'messages')".

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

### Environment

* **Kendo UI version: 2021.3.1109
* **jQuery version: 1.12.4
* **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

A DataSource defined using TagHelpers with disabled serverPaging sets default pageSize:

    <datasource type="DataSourceTagHelperType.Ajax" server-filtering="true" server-paging="false">
            <transport>
                <read url="@Url.Page("Index", "Read")" data="forgeryToken" />
            </transport>
            <schema data="Data">
                <model id="OrderID">
                    <fields>
                        <field name="ShipName" type="string"></field>
                    </fields>
                </model>              
            </schema>
     </datasource>

generates the following initialization script:

{"dataSource":{"page":1,"pageSize":20,"schema":{"model":{"id":"OrderID","fields":{"ShipName":{"type":"string"}}},"data":"Data","errors":"Errors","total":"Total"},"serverAggregates":true,"serverFiltering":true,"serverGrouping":true,"serverPaging":true,"serverSorting":true,"transport":{"read":{"url":"/?handler=Read","data":forgeryToken}},"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})()}

with default pageSIze set.
Initializing using jQuery works as expected:

       dataSource: {
            type: "aspnetmvc-ajax",
            serverPaging: false,
            serverFiltering:true,
            transport: {
                read: {
                    url: "@Url.Page("Index", "Read")",
                    data: forgeryToken
                }
            },
            schema: {
                model: {
                    id:"OrderID"
                },
                data: "Data",
                total:"Total"
            }
        }

Current behavior

The "page" and "pageSize" values are set, which results in only 20 items being displayed, even though more are returned by the "read" action.

Expected/desired behavior

The "page" and "pageSize" should not be set.

Environment

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

Bug report

When the Model for the Grid inherits the CustomTypeDescriptor, an error is thrown.

Reproduction of the problem

1. Open the attached sample project -
   TelerikAspNetCoreApp3.zip

2. Load the About page

Current behavior

The following error is thrown:

An unhandled exception occurred while processing the request.
InvalidOperationException: Bound columns require a field or property access expression.
Kendo.Mvc.UI.GridBoundColumn<TModel, TValue>..ctor(Grid grid, Expression<Func<TModel, TValue>> expression)

Expected/desired behavior

The view should load without any errors

Environment

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

When assigning the Name of a Telerik UI control, the value specified is used for both the name and id attributes of HTML elements. If the value specified contains a period (ex. a property of a complex model property, ex. Model.Address.Line1) then the "name" attribute will still contain the period (ex. "Address.Line1") but because periods are invalid for the "id" attribute, the periods should get replaced with an underscore by default (ex. "Address_Line1"). Using HTML helpers, this appears to be happening correctly. Using Tag Helpers, on the other hand, does not appear to be sanitizing the id values and instead leaves the period, causing an invalid value to be used and inconsistent results when compared to the HTML Helpers.

Example using the ListBox component:

// Tag Helper, generates this: <select id="ComplexModelProperty.ListBoxTagHelper" name="ComplexModelProperty.ListBoxTagHelper">
<kendo-listbox name="ComplexModelProperty.ListBoxTagHelper" bind-to="new List<string>()"></kendo-listbox>

// HTML Helper, generates this: <select id="ComplexModelProperty_ListBoxHtmlHelper" name="ComplexModelProperty.ListBoxHtmlHelper">
@(Html.Kendo().ListBox()
  .Name("ComplexModelProperty.ListBoxHtmlHelper")
  .BindTo(new List<string>())
)

Example using the Button component:

// Tag Helper, generates this: <button id="ComplexModelProperty.ButtonTagHelper" name="ComplexModelProperty.ButtonTagHelper" type="button">
<kendo-button name="ComplexModelProperty.ButtonTagHelper">Image icon</kendo-button>

// HTML Helper, generates this: <button id="ComplexModelProperty_ButtonHtmlHelper" name="ComplexModelProperty.ButtonHtmlHelper" type="button">
@(Html.Kendo().Button()
      .Name("ComplexModelProperty.ButtonHtmlHelper")
      .HtmlAttributes(new { type = "button" })
      .Content("Image icon"))

I only tested with these two components to verify this wasn't an issue specific to the ListBox component, but I'm assuming this is a problem with any component when using Tag Helpers. After looking at some of the relevant code, I'm guessing this could be corrected by updating the GenerateId() method in the TagHelperBase class (ex. by calling something like GenerateIdFromName() that would handle sanitizing the value).

I also found this forum post from over two years ago reporting what appears to be this same issue. There was a reply that acknowledged the issue and offered a workaround "until this issue is fixed", however after two years I would think something like this would have already been fixed (a bug that applies to all Tag Helpers, results in invalid HTML being generated, and can be fixed by using a built-in .NET method that was created specifically for this purpose).