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");
            }
        }
    }

 When uncheck "Use localization" while create project the Localization resources are still auto copied while publish the project.

The resources are part of the telerik.ui.for.aspnet.core.yyyy.q.mmdd.nupkg and therefore are copied to the bin folder regardless of the  "Use localization" option. The "Use localization" option controls the availability only of the messages files.

This a feature request for providing another lightweight NuGet which does not contain the localization dlls that could be used for non-localized projects.

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

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 ]

Bug report

Validation attributes are not rendered on Kendo editors if ViewData contains same key as the model.

Reproduction of the problem

@{
  ViewData["Title"] = "Home Page"; 
}

@using (Html.BeginForm())
{
  @Html.Kendo().TextBoxFor(model => model.Title)
}

<script>
  $(function () {
    $("form").kendoValidator();
  });
</script>

Current behavior

Validation attributes are not rendered.

Expected/desired behavior

Validation attributes should be rendered on the input element.

Environment

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

Dears,

While browsing the new components of UI for Asp Core, I found an Issue in the provided online sample (https://demos.telerik.com/aspnet-core/ripplecontainer/index)

After transferring and moving items between the lists of "RIPPLE ON LIST ITEMS", the list display the raw HTML of the items. So, I provided a screen record reproducing the issue (https://pasteboard.co/I7Fx0AW.gif).

When both UI for ASP.NET MVC and UI for ASP.NET Core Visual Studio extensions are installed and only UI for ASP.NET Core project is loaded, the notification for new version is shown for UI for ASP.NET MVC.

When trying to install Microsoft.VisualStudio.Web.CodeGeneration.Design 7.0.4 NuGet package in a Telerik UI for ASP.NET Core 2022.3.1109 application, it throws an exception:

NU1107: Version conflict detected for Microsoft.CodeAnalysis.CSharp.Workspaces. Install/reference Microsoft.CodeAnalysis.CSharp.Workspaces 4.4.0 directly to 
project TelerikAspNetCoreApp3 to resolve this issue. 

### Reproduction of the problem

1) Create a Telerik UI for ASP.NET Core 2022.3.1109 application (.NET 7.0).

2) Install Microsoft.VisualStudio.Web.CodeGeneration.Design NuGet package (version 7.0.4).

3) Review the NuGet Error in the output.

### Workaround

Install the the following NuGet packages:

• Microsoft.CodeAnalysis.Common
• Microsoft.CodeAnalysis.Workspaces.Common
• Microsoft.CodeAnalysis.CSharp
• Microsoft.CodeAnalysis.CSharp.Workspaces
• Microsoft.CodeAnalysis.VisualBasic
• Microsoft.CodeAnalysis.VisualBasic.Workspaces

Alternatively, install an older version of the Microsoft.VisualStudio.Web.CodeGeneration.Design package.

### Environment

* **Telerik UI for ASP.NET Core version: 2022.3.1109
* **.NET version: 7

I know you can query the client side JavaScript version using 

kendo.version

It would be handy if you could query the dll assembly version or cdn url so the URLs can automatically match the dll used in the solution especially when nuget is used to update it currently I work around this using:

    @{  var version = typeof(Kendo.Mvc.KendoServices).Assembly.GetName().Version;
        string kendoCDN = $"//kendo.cdn.telerik.com/{version.Major}.{version.Minor}.{version.Build}";}
    <link href="@Url.Content(kendoCDN + "/styles/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />