I am using the Image Browser  https://demos.telerik.com/aspnet-mvc/editor/imagebrowser on my Razor pages.

How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?

I have a preview container where the max-width I am allowed to see the preview is 650px.
but when on ImageBrowser--> Insert Window --> I have a list of uploaded images --> if i am selecting images below max size but resolution is above 650px the images on preview are too stretched out.

I know we have an option to set the width n height when inserting but how do I auto set it before I hit insert button?
 I am thinking to use this:
<script>
    $(document).ready(function () {
        // Attach a click handler to the ImageBrowser tool of the Editor.
        $(".k-i-image").click(function () {
            setTimeout(function(){
                // Attach a select handler to the Upload embedded in the ImageBrowser.
                $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
                    // Prevent the event if the selected file exceeds the specified limit.
                    if (e.files[0].size > 1048576) {
                        e.preventDefault();
                        alert("Maximum allowed file size: 1MB");
                    }

                    // Check image resolution and limit width if necessary.
                    var img = new Image();
                    img.src = URL.createObjectURL(e.files[0].rawFile);

                    img.onload = function() {
                        if (img.width > 550) {
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");

                            // Calculate new height while maintaining the aspect ratio.
                            var ratio = 550 / img.width;
                            var newHeight = img.height * ratio;

                            canvas.width = 550;
                            canvas.height = newHeight;

                            // Draw the image on the canvas with the adjusted dimensions.
                            ctx.drawImage(img, 0, 0, 550, newHeight);

                            // Convert the canvas content back to a Blob object.
                            canvas.toBlob(function (blob) {
                                // Replace the original file with the resized image file.
                                e.files[0].rawFile = blob;
                            }, e.files[0].type);
                        }
                    };
                });
            });
        });
    });
</script>

I am using the Kendo Editor Image Browser from : https://demos.telerik.com/aspnet-mvc/editor/imagebrowser.
Where I have hidden/removed the 
1. Home icon
2.New Folder
3. Delete
4. Arrange By
5. Web Address
6. Alternate Text
using css on my local.

Is there any way to customize this without CSS?

In the UI for ASP.NET MVC build 2023.1.425 build we are seeing an odd behavior where there is a duplicate sort icon on the column that we have set as the initial sort in the grid datasource definition section (ref 1st screenshot).  In comparing the generated HTML for the UI for ASP.NET MVC and UI for ASP.NET CORE  (both 2023.1.425) where both have the same grid datasource initial sort set there is a variance between the HTML generated/shown for the header column in that an extra "k-icon-sort" span tag is being added (ref and compare 2nd and 3rd screenshots).  The grid datasource default sort column is defined as ".Sort(x => x.Add("EmployeeName").Ascending())" and the grid Sortable configuration is defined as ".Sortable(s => s.SortMode(GridSortMode.SingleColumn))" in either of our ASP.NET MVC or ASP.NET CORE projects so that is not a variance and both use the the "classic-silver.css" theme so that too is not a difference so my only thought is that the generation of HTML or applying of style classes on sort action (via some kendo-xxx.js file?) is the difference and the reason why the MVC version shows the dupe icon but not the CORE version.

Hi

I use a Kendo window and load the content through AJAX from a partial view.

The partial view contains Kendo controls such as DropDownList, ContextMenu, etc.

How can I remove all the controls (destroy all UI, events, etc.) inside the partial view when I close the Kendo window

Hello,

we recently upgraded Kendo mvc.net asp from 2018.3 to 20323.1.  Now the fonts for the Kendo controls are all much smaller than they were previously.  Is there a way to set the font globally?  I can see I can set the font size per control but I'd rather nit have to go and set that for every control use.

Thanks

Phil.

Hi,

I am working on making application CSP complaint using  UI for ASP.NET MVC R1 2023 SP2 (version 2023.1.425).

Grid column is having ClientTemplate which is causing grid to be empty. This was working prior.

Below is the code snippet:

.ClientTemplate("<a target='_blank' href=" + @Url.Action("ReportRouter", "Reports") + "?reportId=#=ReportId#>#=DisplayName#</a>");

Developer tool is showing Invalid template error. I have also added 

@(Html.Kendo().DeferredScriptFile())

Any input is appreciated.

RadEditor is closing the source element that is nested inside the video element . For example, in the attached screen shots show the “source” element which we add it to Rich text field. After we save the Rich Text field and open it again, we see the source element is closed. Is there a configuration setting that would allow us to bypass the closure of the source element?