Steps to reproduce:

Open the ASP.NET Core ImageEditor Demo at https://demos.telerik.com/aspnet-core/imageeditor

1. Load a Portrait image (Width < Height)
2. Select the Crop tool
3. Click on Landscape
4. Select any aspect ratio, for example 16:9
5: Select "Original ratio" back again

Current Behavior:

The browser takes some time to respond and sometimes crashes. And each time, we get a stack overflow logged in the browser's Dev Tools - See picture below.

Please correct, it's starting to get a little annoying. The ImageEditor is quite buggy and not usable as is in production. Thanks for your comprehension.

Steps to reproduce:

1. Open an image
2. Select the crop tool.
3. Resize the crop to a smaller area.
4. Move the crop area to the top middle of the image for example.
5. Resize the crop to a larger area using the bottom right handle.

Current behavior:

The crop area overflows the image if it is made large enough.

The problem is also reproducible on Telerik Demos at https://demos.telerik.com/aspnet-core/imageeditor

C# / .NET 5 / Telerik.UI.for.AspNet.Core (V2021.2.511)

Bug report

When the user creates a folder and tries to add a file to the Editor an error occurs that the file is not found. This behavior is observed only if the application is Core 3.1.

Reproduction of the problem

1. Open Image and File Browser Demo
2. In the ImageBrowser create a folder.
3. Upload an image and try to add it to the Editor

Current behavior

Currently, in the console, an error 404 occurs that the resource is not found.

Expected/desired behavior

The image should be added to the Editor without errors.

Environment

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

Bug report

When the ImageEditor is resized and the Toolbar wraps on 2 rows the canvas of the Component overflows its container.

Reproduction of the problem

1. Add the following code to a Telerik UI for ASP .NET Core project:

<div class="demo-section k-content">
    @(Html.Kendo().ImageEditor()
        .Name("imageEditor")
        .Height(900)
        .SaveAs(s => s.FileName("image_edited.png"))
        .ImageUrl(@Url.Content("~/images/latest-available version.png"))
        .Events(e=>e.ImageRendered("rendered").Execute("executed"))
    )
</div>
<div class="mt-5 card">  <div class="card-body">48px margin above</div></div>

2. Resize the window until the Toolbar of the ImageEditor wraps on 2 rows.

Current behavior

The margin between the ImageEditor and the following div disappears as the ImageEditor overflows its container

Expected/desired behavior

The ImageEditor's should fit in its div container

Environment

• Kendo UI version: 2021.2.511
• **Telerik UI for ASP .NET Core
• Browser: [all]

Bug report

When the crop tool is active and the crop isn't confirmed/canceled upon importing of new image the cropped image persists and overlays the imported image

Reproduction of the problem

1. Open the ImageEditor Demo
2. Click the Crop tool
3. Import a new image without confirming or cancelling the crop

Current behavior

The cropped image persists when the crop hasn't finished and a new image is imported.

Expected/desired behavior

The cropped image should be cleared from view.

Environment

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

Bug report

The PDFViewer HTML helper incorrectly serializes the passed to its "File" configuration URL, when the URL has an ampersand(&) sign in it. In the output of the HTML helper, the ampersand is changed with its ASCII code - "\u0026"

• The issue is reproducible both in the UI for ASP.NET Core and UI for ASP.NET MVC suites.

Reproduction of the problem

1. Create an ASP.NET Core or MVC project
2. Paste the below code in it and run it
   @(Html.Kendo().PDFViewer() .Name("pdfviewer-test") .PdfjsProcessing(pdf => pdf .File("https://myrandomcomain.com/api/MyFolder/GetPDF?reference=xxxxxxxx&param1=0&param2=100&contentType=application/pdf") ) .Height(400) )
3. View the source of the opened page and see the generated Javascript code

Current behavior

The generated code is:
jQuery("#pdfviewer-test").kendoPDFViewer({"pdfjsProcessing":{"file":{"url":"https://myrandomcomain.com/api/MyFolder/GetPDF?reference=xxxxxxxx\u0026param1=0\u0026param2=100\u0026contentType=application/pdf"}},"height":400});

Expected/desired behavior

The expected result is
jQuery("#pdfviewer-test").kendoPDFViewer({"pdfjsProcessing":{"file":{"url":"https://myrandomcomain.com/api/MyFolder/GetPDF?reference=xxxxxxxx&param1=0&param2=100&contentType=application/pdf"}},"height":400});

Environment

• Kendo UI version: 2020.1.219
• jQuery version: x.y
• 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

The Kendo UI Grid's pager for UI for ASP.NET Core does not have an "All" option and it can't be configured in the Razor syntax.

Current behavior

Using the Kendo UI Grid's pageable.PageSizes, the ALL option is not available for UI for ASP.NET Core as it's only an Int32[].

Expected/desired behavior

The All option should be included like in the UI for ASP.NET MVC Razor Syntax.

Environment

• Kendo UI version: 2020.3.915
• Browser: all

Bug report

The Kendo UI Sortable for ASP.NET Core assumes that all selectors are by "id".

Reproduction of the problem

1. Set the .For() option of the Sortable widget to a class selector:

@(Html.Kendo().Sortable()
    .For(".k-grid table")
    // . . . 
)

2. Inspect the page source.

3. The following string is rendered:

<script>
    kendo.syncReady(function () { jQuery("\\.k-grid table").kendoSortable(// options) });
</script>

Expected/desired behavior

The Sortable widget should allow for passing any jQuery selectors.

Environment

* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all] 

Bug report

When PanelBar is configured with tag helpers selected="true" is not applied and the item is not rendered as selected.

Reproduction of the problem

1. Create an UI for ASP.NET Core application and use configuration as in the example below:

<kendo-panelbar name="panelbar">
    <items>
        <panelbar-item text="Item 1" selected="true">
        </panelbar-item>
        <panelbar-item text="Item 2">                    
        </panelbar-item>
    </items>
</kendo-panelbar>

Current behavior

The 'Item 1' is not marked as selected.

Expected/desired behavior

The item should be marked as selected when the PanelBar widget is loaded.

Environment

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

Hi folks!

I am using the Grid's ColumnMenu with its new ComponentType-property set to "modern" like this:

@(Html.Kendo().Grid<my_fancy_web_application.ViewModels.ProjectListViewModel>()

                .Name("myGrid")
                .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Willst Du diesen Eintrag wirklich löschen?"))
                .Sortable()
                .Scrollable()                
                .Pageable(pageable => pageable.Enabled(false))
                .ColumnMenu(columnMenu => columnMenu.ComponentType("modern"))
// ... going on with some further definitions
)

In the <head>-Tag of my _Layout.cshtml file, I have set the Kendo Culture to Swiss German:

<script>kendo.culture("de-CH")</script>

What I now observed is, that the buttons "Apply" and "Reset" did not get translated properly and remain in English (see Column_Menu_Reset_Apply_Button.png). Whereas other messages are correctly translated. 

I tried to find out which message property was set there, so that I could add it manually to the "kendo.messages.de-CH.min.js" (as by the way I still have to do for e.g. the Grid's searchbar placeholder "Search..."). 

In the loaded kendo.all.min.js (2021.1.330) I discovered, that there was no message property in place, and the texts were rather hard-coded:

'<div class="k-columnmenu-actions">' + '<button class="k-button" type="button">Reset</button>' + '<button class="k-button k-primary" type="button">Apply</button>' + '</div>' + '</div>'

With the Chrome's dev tools and the source map, I found the above code on line 55815 by searching for the class "k-columnmenu-actions".

Could you please change the mentioned code to make use of the kendo.messages-properties and update the culture-specific kendo.messages files accordingly?

Thanks in advance!

Kind regards,

Janick

Bug report

When a Telerik UI Window is draggable and has its Position set, the first time the widget can be dragged, or it is being dispositioned while dragging.

Reproduction of the problem

1. Create a Telerik Window widget.

2. Set the Position.Left and Position.Top

3. Open and drag the window.

Expected/desired behavior

The window should be smoothly draggable.

Environment

* **Kendo UI version:** 2021.2.511
* **jQuery version:** 1.12.4
* **Browser:** [all]

Bug report

The Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but does not wrap the content in a container element, leading to incorrect rendering.

Reproduction of the problem

1. Define a Drawer the following way:

<button id='show'>Show</button>
@(Html.Kendo().Drawer()
        .Name("drawer")
        .Template(@"
            <ul>
                <li data-role='drawer-item'  class='k-state-selected'><span></span><span class='k-item-text'>A</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>B</span></li>
                <li data-role='drawer-item'><span></span><span class='k-item-text'>C</span></li>
             </ul>
            ")
        .Mode("overlay")
        .Position("left")
        .SwipeToOpen(true)
        .Content(@<text>
                <div id="A">Item A content</div>
                <div id="B" class='hidden'>Item B content</div>
                <div id="C" class='hidden'>Item C content</div>
            </text>)
        .Events(x => x.ItemClick("onItemClick")))

<script>
    $('#show').click(function () {
        var drawerInstance = $("#drawer").getKendoDrawer()
        drawerInstance.show();
    });

    function onItemClick(e) {
        $('body').find('.k-drawer-content > div').addClass("hidden");
        $('body').find('.k-drawer-content').find("#" + e.item.find(".k-item-text").text()).removeClass("hidden");
    }
</script>
<style>
    .hidden {
        display: none;
    }

</style>

Sample application:
TelerikAspNetCoreApp226.zip

Current behavior

Only the <div id="A">Item A content</div> element is treated as a content for the Drawer

Expected/desired behavior

The passed content should be wrapped in a container

Environment

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

Hi Support Team,

When we use filter in the dropdownlist the WAVE is complaining of the missing Label inside the list box (for the search box). Please advise for the fix.

Below is the code, when add the attribute of Filter then WAVE complains about that as shown below screen shot from Telerik Demo site

 @(Html.Kendo().DropDownListFor(m => m.OfficerIDTypeID)
                                            .DataValueField(nameof(ReferenceCodeDTO.ID))
                                            .DataTextField(nameof(ReferenceCodeDTO.Label))
.Filter(FilterType.Contains)
                                            .HtmlAttributes(new { style = "width: 100%", tabindex = ++tabIndex })
                                            .ValuePrimitive(true)
                                            .OptionLabel("")
                                            .HtmlAttributes(new { style= "aria-labelledby:OfficerIDTypeID" })
                                            .BindTo(await refCodeLookupHelper.GetCodesByReferenceCodeType("PersonIdentifierTypeKey"))
                                            .Events(e => e.Change("onChangeOfficerTypeId"))
                                            )

Bug report

Column.Filterable.Ui option of the TreeList widget does not call the handler function. Can be replicated only in ASP.NET Core.

Environment

* **Kendo UI version:** 2020.2.617
* **jQuery version:** 1.12.4
* **Browser:** [all] 

Bug report

DateRangePicker close event does not catch range ent value

Reproduction of the problem
Run the following Dojo:

• https://dojo.telerik.com/ugAPotiQ

Select a range and check the browser console.

Expected/desired behavior
Close shall be reflected in the close event handler.

Environment
Kendo UI version: [ all ]
Browser: [ all ]

Bug report

RadioGroup Validation fails always when Component is bound to Model

Reproduction of the problem

1. Define a FormViewModel and set its data annotation to [Required]
2. Initialize a Form and pass it the FormViewModel
3. In the Form:

• set up Validation
• define an Item that uses the RadioGroup Editor

4. Run the application choose a RadioGroup option and submit the Form

Current behavior

All the inputs of the RadioGroup Component get the data-val-required property and validation always fails

Expected/desired behavior

The RadioGroup's Validation should succeed, if one of the options is selected

Environment

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

Currently, the ExportAs configuration exposes Proxy method to setup the proxyUrl field, but it is limited to enter only action and controller. Whereas in RazorPages a URL with handler should be defined instead. 

Plus, in order for the AntiForgeryToken to work properly it should be injected in the form submitted by the tool.