Hi

I'm using the popup editor to edit rows in the grid.

I'm using following javascript method to open the popup:

function editSelectedRow(name) {
    var grid = $('#' + name).data('kendoGrid');
    var rows = grid.select();
    grid.editRow(rows[0]);
}

This function is called when a row is double clicked:

$("#Binders tbody").on("dblclick", "tr[role='row']", function (e) {
    editSelectedRow("Binders");
});

I have this code for many years now and it was never a problem.

With the latest version of the grid this code fails (the popup doesn't open) upon making a change in the popup window. As long as no changes is done to the record in the popup, there will not be a problem.

The error received is the following:

jquery-3.7.1.min.js:2  jQuery.Deferred exception: Cannot read properties of undefined (reading 'id') TypeError: Cannot read properties of undefined (reading 'id')
    at HTMLTableRowElement.<anonymous> (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814199)
    at Function.each (https://code.jquery.com/jquery-3.7.1.min.js:2:3129)
    at Le.fn.init.each (https://code.jquery.com/jquery-3.7.1.min.js:2:1594)
    at init._persistSelectedRows (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1814160)
    at init.select (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1811103)
    at init._displayRow (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1779176)
    at https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894615
    at Array.forEach (<anonymous>)
    at init.refresh (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:1894600)
    at init.trigger (https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js:9:4189) undefined

When the data in the grid is refreshed, no error will occur anymore.

HOWEVER... I also have an "Edit" button on the toolbar of the grid. That buttons uses the same 'editSelectedRow' function but when that button is used, the popup window will open, even after a change to the record!!

With other words... something goes wrong when double clicking a row after an update was made.

What has changed?

Best regards,

Peter

### Bug report

When removing a data item through the DataSource remove() method, and then trying to add a new record in the Grid, the editable row does not close when clicking the "Save" command. The Grid is set up for InLine editing. 

### Reproduction of the problem

1) Create an InLine editable Grid that binds to local data.

2) Add a custom column command that removes the respective data item by using the remove() method of the DataSource.

3) Delete a specified Grid record through the custom command.

4) Add a new record and click the built-in "Save" command.

5) The row remains in edit mode.

A Dojo sample for reproduction: https://dojo.telerik.com/IQIDuGOt

The last working version is 2024.1.130

### Expected/desired behavior

The editable row must close when clicking "Save" or "Cancel".

### Workaround

Use the Grid removeRow() method rather than the DataSource remove() method.

### Environment

* **Kendo UI version: 2024.1.319
* **jQuery version: 3.7.0
* **Browser: [all]

I would like to be able to apply custom css classes to all your controls.

Whenever I want to i.e. set the width of a control, I find it's a hassle to figure out which of your css classes I have to override.

It would be much better and easier for me to work with, if I could just apply a custom css class.

Thanks,

Bo Johansen

### Bug report

The DropDownTree TagHelper with enabled checkboxes does not submit the selected options when it is bound to a Model property.

### Reproduction of the problem

1. Define a DropDownTree TagHelper as a form editor and and enable its checkboxes.

2. Bind the editor to a Model property (an array of integers).

3. Submit the form and examine the submit request payload. The values of the selected items are missing.

//Model
public class TestFormModelClass
{
  public int[] MonthsSelectedIds { get; set; }
}

//View
@model TestFormModelClass

<form method="post">
  <kendo-dropdowntree for="MonthsSelectedIds" 
      check-all="true"
      datatextfield="Month"
      datavaluefield="Id">
      <hierarchical-datasource type="DataSourceTagHelperType.Custom">
                <schema>
                    <hierarchical-model id="id"></hierarchical-model>
                </schema>
                <transport>
                    <read url="/api/items" />
                </transport>
      </hierarchical-datasource>
      <checkboxes check-children="false" name="CheckedMonths" enabled="true" />
  </kendo-dropdowntree>

  <button type="submit">Save</button>
</form>

### Expected/desired behavior

When the DropDownTree TagHelper with checkboxes is used as a form editor, the values of the selected items must be submitted as expected to the server.

### Workaround

Use the HtmlHelper version of the DropDownTree

### Environment

* **Telerik UI for ASP.NET Core version: 2024.1.319
* **Browser: [all]

Bug report

DropDownTreeFor with checkboxes enabled is not binding to model value after postback.

Reproduction of the problem

Use the following definition of a DropDownTreeFor HtmlHelper in a plain HTML form, where MySelectedIds is int[]:

 @(Html.Kendo().DropDownTreeFor(m => m.MyClass.MySelectedIds)
             .Checkboxes(checkboxes => checkboxes
                 .CheckChildren(false)
             )
             .DataTextField("MyText")
             .DataValueField("MyId")
             .AutoClose(false)
             .CheckAll(true)
             .DataSource(dataSource => dataSource
                 .Custom()
                 .Transport(t => t
                     .Read(r => r.Url("/api/items"))
                 )
             )
 )

Current behavior

The DropDownTree is bound to the model value on page load, but on successful form submission and returning the model the DropDownTree is not bound to the data. Refer to ticket 1648108 for a runnable example.

Expected/desired behavior

The DropDownTree should be bound to the model value after successful form submission.

Workaround

Bind the model to a string[] instead of int[].

Environment

• Kendo UI version: 2024.1.319

### Bug report

The ContextMenu does not show when the mouse is moved normally. It will show only when the mouse is moved very slowly.

### Reproduction of the problem

1. Create a Grid with a custom column command.

2. Define a ContextMenu that will be displayed when the custom column command is clicked.

3. Click over a specified column command - the ContextMenu opens.

4. Move the mouse over another row and click the custom column command - the ContextMenu does not open.

A Dojo sample for reproduction: https://dojo.telerik.com/aYiVUzum

### Current behavior

The ContextMenu does not open over every item as expected.

### Expected/desired behavior

The ContextMenu must open when clicking each item.

#### The issue is a regression starting with 2023.1.314 version

### Workaround

Add the following script before the ContextMenu initialization:

  <script>
    function contains(parent, child) {
        try {
            return $.contains(parent, child);
        } catch (e) {
            return false;
        }
    }

    kendo.ui.ContextMenu.fn.open = function (x, y) {
        var OPEN = "open",
            ACTIVATE = "activate",
            DOCUMENT_ELEMENT = $(document.documentElement),
            NS = ".kendoMenu";
        var that = this;

        x = $(x)[0];

        if (contains(that.element[0], $(x)[0]) || that._itemHasChildren($(x))) { // call parent open for children elements
            kendo.ui.Menu.fn.open.call(that, x);
        } else {
            if (that._triggerEvent({ item: that.element, type: OPEN }) === false) {
                if (that.popup.visible() && that.options.filter) {
                    that.popup.close(true);
                    that.popup.element.parent().kendoStop(true);
                }

                if (!that._triggerFocusOnActivate) {
                    that._triggerFocusOnActivate = that._focusMenu.bind(that);
                }
                that.bind(ACTIVATE, that._triggerFocusOnActivate);
                if (y !== undefined) {
                    var overflowWrapper = that._overflowWrapper();
                    if (overflowWrapper) {
                        var offset = overflowWrapper.offset();
                        x -= offset.left;
                        y -= offset.top;
                    }
                    that.popup.wrapper.hide();
                    that._configurePopupScrolling(x, y);
                    that.popup.open(x, y);
                } else {
                    that.popup.options.anchor = (x ? x : that.popup.anchor) || that.target;
                    that.popup.element.parent().kendoStop(true);
                    that._configurePopupScrolling();
                    that.popup.open();
                }

                DOCUMENT_ELEMENT.off(that.popup.downEvent, that.popup._mousedownProxy);
                DOCUMENT_ELEMENT
                    .on(kendo.support.mousedown + NS + that._marker, that._closeProxy);
            }
        }

        return that;
    };
</script>

### Environment

* **Kendo UI version: 2023.1.314
* **Browser: [all] 

We can easily add a photo image with only face in it. 

The request is to add an option in the avatar to detect face from a full body image and auto zoom in to the face to create an avatar from the image provided. This can be controlled using an option in the avatar settings.

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

Currently, the Wizard displays any server-side errors that are added to the ModelState in the respective form fields within the Wizard steps (which is great).

The problem is that those errors are not "cleared" when the field is edited/changed. This prevent the form from being posted or the user to move to the next step if the form validation is enabled within the Wizard.

The only way to work with server-side error in the wizard form at the moment is to either disable form validation altogether or to attach an "onchange" event to each of the fields and clear any server-side errors manually once the field is changed.

Both solutions are far from ideal. It would be great if this was part of the default behaviour of the wizard form (like it already is for client-side errors).

Grid row drag and drop capabilities enhancement request.

Currently, in order to drop a row from one Grid into another empty Grid, adding a placeholder row to the empty Grid with custom logic is required: https://demos.telerik.com/kendo-ui/grid/drag-drop

It would be nice to have a more robust drag and drop functionality that doesn't rely on custom logic to such an extent.

 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.

Currently, the Gantt allows full customization of its Editing popup:
https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/configuration/editable.template

But I need to a built-in way to include a new field input only in the Other tab view:

Workaround provided by support team:

.Events(e=>e.Edit("ganttEdit"))

<script>
    function ganttEdit(e){
       var tabstrip = 
       e.container.find(".k-gantt-edit-tabstrip").data().kendoTabStrip;
       tabstrip.bind("activate",function(args){
           if(args.item.textContent == "Other")
           {
              var otherForm = $(".k-gantt-form-other").data().kendoForm;
              var newOptions = otherForm.options;
              
              if(newOptions.items.length < 3)
              {
              newOptions.items.push({
                "field": "Role",
                "type": "string",
               "defaultValue": ""
               });

              otherForm.setOptions(newOptions);
              }
           }
       })
    }
</script>