The current demo is showing  a contains predicate. To enhance the current application, I am requesting the feature to use a starts with predicate to meet a practical business need. 

The minimum length property will need to changed to 1 to limit the number of characters to be typed.

It would be nice to extend dialog like office 365 right dialog ( docked to the right).

It would be nice to have a dropdown button with a container

In the example below products is actually DbSet<Product>

public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request)
{
    using (var northwind = new SampleEntities())
    {
        IQueryable<Product> products = northwind.Products;
        DataSourceResult result = await products.ToDataSourceResultAsync(request);
        return Json(result);
    }
}

Under the hood the ToDataSourceResultAsync call is executed inside Task.Run

And that Task.Run is calling sync methods of IQueryable which means EntityframeworkCore queries are not taking place with async I/O

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]

Whilst I'm aware that I can create a HTML label and add the k-label class. I feel that a Label and a LabelFor are essential parts of the toolkit to prevent brittle code getting created when/if the labels that are created within the toolkit have other requirements

I have created my own implementation for now but I think this should be added to your roadmap, especially as it's such a simple thing to do

### Bug report

When building the scripts through the 'npx gulp scripts' command, there is an error "Error: Cannot find module './build/gulp/kendo-version'".

### Reproduction of the problem

Download any of the source bundles (Core, MVC, jQuery) and try to build the scripts.

### Environment

* **Kendo UI version: 2024.4.1112

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
For the Telerik Scheduler Timeline View, since the update from somewhere in between version 2022.3.1109 to 2024.2.154, a custom timeline view cannot be selected if the view name has dot(s) in its name (e.g. "kendo.ui.customTimelineView").

Reproduction of the problem

Add a custom Timeline View by extending the kendo.ui.TimelineView

Current behavior

Unlike older versions (I know that it worked with version <= 2022.3.1109, but don't know when exactly it was introduced)  now the ui blocks, when the custom select view button is clicked. Specifically, the problem is in kendo.scheduler.js at line 4554:

var viewElementToSelect = that.toolbar.find("[" + kendo.attr("name") + "=" + name + "]");

Expected behavior

In this code line, the find method does not work when the variable "name" contains something like "kendo.ui.CustomTimelineView". As a solution, I suggest escaping the name beforehand:

var nameEscaped = $.escapeSelector(name);
var viewElementToSelect = that.toolbar.find("[" + kendo.attr("name") + "=" + nameEscaped + "]");

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]

Currently, the ToCamelCase() method lowers only the first letter, as per the example below:

Is it possible to create another overload of the ToCamelCase() method that transforms the string to "randomStatusId"?

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

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]

Add a 3 state mode to the Switch component (like it is already implemented in the Telerik UI for WPF) or create new component with that feature.

Example:

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

Hi this is a pretty basic bug. But I am using the k-i-cancel icon class but for some reason it is showing the settings icon?

If I manually enter the date in the cell the model binder parses the date as it was not an UTC and since my time zone is +2h it comes in the controller as 25.12.2021 22:00

(see the attached files)

Inside my startup.cs I have defined JsonOptions like this:

.AddNewtonsoftJson(options =>
                {
                    options.SerializerSettings.ContractResolver = new DefaultContractResolver();
                    options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
                });

In the Configure method:

var supportedCultures = new[] { new CultureInfo("bg-BG") };

app.UseRequestLocalization(new RequestLocalizationOptions
{
         DefaultRequestCulture = new RequestCulture("bg-BG"),
         SupportedCultures = supportedCultures,
         SupportedUICultures = supportedCultures
});

<script src="~/lib/kendo/js/cultures/kendo.culture.bg-BG.min.js"></script>

<script>
        kendo.culture("bg-BG");
</script>

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.

Would you be able to implement a more visual aspect for the FileManagement so it look close to this picture.

Attach is the modified Kendo.all.min.js file that you may want to alter so it becomes a permanent in you repository. Changes made for those following :

* Changed:
  *     template:
  *     var i
  *     singleFileTemplate

The style sheet for the effects:

/* 5.7.3 - Filemanager Image Grid View */
.FileManagerImgGridView {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    cursor: zoom-in;
}
/* 5.7.4 - Filemanager Image List View */
.FileManagerImgListView {
    cursor: zoom-in;
    max-width: 115px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    transition-duration: .5s;
}

    .FileManagerImgListView:hover {
        transition-duration: .5s;
        transform: translateY(5px) scale(1.75);
        border-radius: 3px;
        z-index: 100;
    }

/* 5.7.5 - Filemanager Image Detail */
.FileManagerImgDetail {
    max-height: 280px;
    max-width: 280px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    cursor: pointer;
    transition-duration: .5s;
}

    .FileManagerImgDetail:hover {
        transition-duration: .5s;
        transform: scale(1.2);
        max-width: 80%;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

.FileManagerImgDownloadLink {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--bs-primary-inverted);
    background-color: var(--bs-primary);
    box-shadow: 0 0 10px rgba(0 0 0 /.7);
    gap: 5px;
}

    .FileManagerImgDownloadLink a {
        text-decoration: none;
        color: var(--bs-primary-inverted);
    }

also here is the C# Thumbnail Class that can be modified if you intend to have you own fabrication of thumbnail as it use to be years ago :-)

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;

public virtual IActionResult Thumbnail(string path)
    {
        var virtualPath = Path.Combine(_thumbnailFolderRoot);
        var physicalPath = Path.Combine(ConstantVar.webEnv.WebRootPath, virtualPath.Replace('/', '\\'));
        path = Path.Combine(physicalPath, path);
        FileInfo imageInfo = new FileInfo(path);

        int width = 75;
        int height = 75;
        bool KeepRatio = true;

        using (Image image = Image.Load(imageInfo.FullName))
        {

            // Figure out the ratio
            double ratioX = (double)width / (double)image.Width;
            double ratioY = (double)height / (double)image.Height;
            // use whichever multiplier is smaller
            double ratio = ratioX < ratioY ? ratioX : ratioY;

            int newHeight = height;
            int newWidth = width;

            if (KeepRatio)
            {
                // now we can get the new height and width
                newHeight = Convert.ToInt32(image.Height * ratio);
                newWidth = Convert.ToInt32(image.Width * ratio);
            }

            image.Mutate(s => s.Resize(width: newWidth, height: newHeight));
            using (var ms = new MemoryStream())
            {
                image.SaveAsJpeg(ms);
                return File(ms.ToArray(), "image/jpg");
            }
        }
    }