Dear Telerik

The feature is related to https://www.telerik.com/account/support-center/view-ticket/1594775 this thread.

It is related to a product environment.

Scenario:

1. Save grid options in persistent storage (i.e. DB).
2. Grid operates successfully and return visits operate well with stored options being loaded with the grid.
3. Then the grid column structure or some other feature is amended during a maintenance and development request - the feature setting is contained within the stored options which are loaded with the grid. The grid functions without some of the changes because the options override the changes.
4. Behavior is unwanted so we would have to merge the new options and the old options.

Request:

Please can Telerik create functionality along the lines of:

$("#SomeGrid").data("kendoGrid").setOptions($("#SomeGrid").data("kendoGrid").mergeOptions(OptionsSaved, OptionsNew));

KR

David

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

Bug report

The StringExtensions -> ToCamelCase method(part of Kendo.Mvc.Extenstions) doesn't return the expected Camel case result.

• More details in ticket # 1458202

Reproduction of the problem

Include the Kendo.Mvc.Extenstions namespace. Define the following in a controller:

        public IActionResult Index()
        {
            string test = "RANDOMStatusId";
            test = test.ToCamelCase();

            return View();
        }

Set a debugger and see the value of the "test" variable.

Current behavior

The returned from the ToCamelCase() method value is "rANDOMStatusId"

Expected/desired behavior

The expected result returned from the ToCamelCase() method value is "randomStatusId"

Environment

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

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

It would be great if the scaffolder can use an existing model (one that I created before starting the scaffolder). I also would like to have the option to select a namespace:

Trying to attach an event to the Core Sparkline wrapper like this:

leads to a compilation error:

Error CS0121 The call is ambiguous between the following methods or properties: 'SparklineBuilder<T>.Events(Action<ChartEventBuilder>)' and 'SparklineBuilder<T>.Events(Action<SparklineEventBuilder>)'

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?

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

Hello,

I am working with application where I have thousands of images to load on ImageBrowser of Kendo Editor.

ImageBrowser is getting stuck as having too many images to load, Can we have any option to add pagination or lazy loading in ImageBrowser?

So, I can load only 20 images at a time and other based on request.

Thanks,

Trusha

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.

It would be useful to have a grid operator for "IN" conditions. Right now we only have 2 options for an OR without having to use a custom filtering and custom clearing functions.

We have a lot of data that needs to be filtered that is not sequential.  For example purposes:

Given that a customer has a standing purchase order for parts over time.

Given that serial numbers on said parts will not be sequential and may not be even be similar enough for wildcards (if that feature is provided.)

Given that we need to filter grid data to retrieve customer number, purchase order and a set of serial numbers, we need the equivalent of:

SELECT * FROM testdatatable WHERE customer = '#####' AND purchaseorder = '#####' AND serialnumber IN ('abciqwe', 'cid235', 'sn34087', 'hpk2679');

which would be WHERE WHERE customer = '#####' AND purchaseorder = '#####' AND (serialnumber  = 'abciqwe' OR serialnumber =  'cid235' OR serialnumber = 'sn34087' OR serialnumber 'hpk2679');

So basically I would like to have the ability to have multiple OR statements and the operand could be 'contains' or 'not contains' as that would probably work better than "equal".

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]

kendo.aspnetmvc.js does not account for server aggregates serialized with came case property names like it does for Groups.

Can the following code (minus the comments) be included in a future release to resolve this?

function translateAggregateResults(aggregate) {
            var obj = {};
            // LSS: support for camel case serialization
            obj[(aggregate.AggregateMethodName || aggregate.aggregateMethodName).toLowerCase()] = (aggregate.Value || aggregate.value);
            return obj;
        }
        function translateAggregate(aggregates) {
            var functionResult = {}, key, functionName, aggregate;
            for (key in aggregates) {
                functionResult = {};
                aggregate = aggregates[key];
                for (functionName in aggregate) {
                    functionResult[functionName.toLowerCase()] = aggregate[functionName];
                }
                aggregates[key] = functionResult;
            }
            return aggregates;
        }
        function convertAggregates(aggregates) {
            var idx, length, aggregate;
            var result = {};
            for (idx = 0, length = aggregates.length; idx < length; idx++) {
                aggregate = aggregates[idx];
                // LSS: support for camel case serialization
                result[(aggregate.Member || aggregate.member)] = extend(true, result[(aggregate.Member || aggregate.member)], translateAggregateResults(aggregate));
            }
            return result;
        }
        extend(true, kendo.data, {
            schemas: {
                'aspnetmvc-ajax': {
                    groups: function (data) {
                        return $.map(this._dataAccessFunction(data), translateGroup);
                    },
                    aggregates: function (data) {
                        data = data.d || data;
                        // LSS: support for camel case serialization
                        var aggregates = data.AggregateResults || data.aggregateResults || [];
                        if (!$.isArray(aggregates)) {
                            for (var key in aggregates) {
                                aggregates[key] = convertAggregates(aggregates[key]);
                            }
                            return aggregates;
                        }
                        return convertAggregates(aggregates);
                    }
                }
            }
        });

Hi,

We have  a requirement for circled progress bar. Need to know whether you have specifications regarding the requirement or any optimization need to be done within the given framework to get the desired result. Please find the attached file for reference.