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

column-command template does not access datasource as an ordinary column template.

<kendo-grid name="grid">
    <columns>
        <column field="ProductID" title="ID" />
        <column title="Column" template="#=columnTemplate(data.ProductID)#" />
        <column title="ColumnCommand">
        <commands>
            <column-command name="change" template="#=columnTemplate(data.ProductID)#"></column-command>
        </commands>
    </column>
    </columns>
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("ServerFiltering_GetProducts", "MultiSelect")" />
        </transport>
    </datasource>
</kendo-grid>

<script>
    function columnTemplate(productID) {
        if (productID % 2 == 0)
            return 'even';
        else
            return 'odd';
    }
</script>

Reproduction of the problem:
https://netcorerepl.telerik.com/myurdlbI16kA1TM213

Current behavior:
There is no way to have a dynamic template for column commands that depends on datasource.

Expected/desired behavior:
Having column-command template as column template, making it possible to access data from datasource.

Environment:
Kendo UI version: 2024.2.514

Workaround:
As an alternative solution, I'm using data-bound event, performing a for loop to all rows, but it needs to go line by line, which is not the best solution for large data.

Bug report

Grid Hidden Column is set as exportable by default for Pdf and Excel

Reproduction of the problem

1. Set a Column as hidden through the Hidden() API configuration.
2. Add both the ToolBar.Excel() and ToolBar.Pdf() API configurations.
3. Notice, that the hidden column is exported.

Current behavior

The Grid Hidden Column should be set as exportable by default for Pdf and Excel.

Expected/desired behavior

The Grid Hidden Column should not be set as exportable by default for Pdf and Excel.

Environment

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

When creating columns in a TagHelper Grid definition, the Width property allows only numbers:

                                <column field="OrderID" width="100">
                                </column>

This does not match the width property in the Kendo UI and HtmlHelpers Grid definitions which allow string values to be entered as well:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.width

That way, the developer will be able to add rem and other unit values in TagHelper syntax as well.

Also, it would be convenient if there is a new property similar to this:

                                <column field="OrderID" tooltip="Unique Number of the Order">
                                </column>

                                <column field="Freight"
                                        html-attributes='new Dictionary<string, object>{ ["style"] = "width: 30rem;" }'>
                                </column>

When you create a Grid using a TModel that inherits from DynamicObject, a type cast exception is thrown when setting the DataSource Model Id property.

public class Metadata : DynamicObject
{
    ...
}  

...
.DataSource(dataSource =>
{
    dataSource.Ajax()
      .Model(model =>
      {
          model.Id("Id");
      });
})

A type cast exception is thrown by the following line in Kendo\AspNet.Core\Kendo.Mvc\UI\DataSource\Fluent\DataSourceModelDescriptorFactoryBase.cs because ModelDynamicDataKey is not generic, so it cannot be cast to IDataKey<TModel>

dataKey = (IDataKey<TModel>)new ModelDynamicDataKey(fieldName, lambdaExpression);

The following code changes fix the issue:

DataSourceModelDescriptorFactoryBase.cs

namespace Kendo.Mvc.UI.Fluent
{
	using System.Reflection;
	using Extensions;

	/// <summary>
	/// Defines the fluent interface for configuring the <see cref="DataSource"/> Model definition.
	/// </summary>
	/// <typeparam name="TModel">Type of the model</typeparam>
	public abstract class DataSourceModelDescriptorFactoryBase<TModel> : IHideObjectMembers
        where TModel : class
    {
        protected readonly ModelDescriptor model;

        public DataSourceModelDescriptorFactoryBase(ModelDescriptor model)
        {
            this.model = model;
        }

        /// <summary>
        /// Specify the member used to identify an unique Model instance.
        /// </summary>
        /// <param name="fieldName">The member name.</param>
        protected void Id(string fieldName)
        {
            IDataKey<TModel> dataKey;
            if (typeof(TModel).IsDynamicObject())
            {
                var lambdaExpression = ExpressionBuilder.Expression<TModel, object>(fieldName);
                dataKey = new ModelDynamicDataKey<TModel>(fieldName, lambdaExpression);
            }
            else
            {
                dataKey = GetDataKeyForField(fieldName);
            }

            dataKey.RouteKey = dataKey.Name;

            model.Id = dataKey;
        }

        protected IDataKey<TModel> GetDataKeyForField(string fieldName)
        {
            var lambdaExpression = ExpressionBuilder.Lambda<TModel>(fieldName);
            var fieldType = typeof(ModelDataKey<,>).MakeGenericType(new[] { typeof(TModel), lambdaExpression.Body.Type });

            var constructor = fieldType.GetConstructor(new[] { lambdaExpression.GetType() });

            return (IDataKey<TModel>)constructor.Invoke(new object[] { lambdaExpression });
        }
    }
}

ModelDynamicDataKey.cs

namespace Kendo.Mvc.UI
{
    using System;
    using System.Linq.Expressions;
    using Microsoft.AspNetCore.Mvc.Rendering;

    internal class ModelDynamicDataKey<TModel> : IDataKey<TModel>
        where TModel : class
    {
        public ModelDynamicDataKey(string memberName, Expression<Func<TModel, object>> expression)
        {
            RouteKey = "id";
            Name = memberName;
            Expression = expression;
            Value = expression.Compile();
        }

        public string Name
        {
            get;
        }

        public string RouteKey
        {
            get;
            set;
        }

        public Func<TModel, object> Value
        {
            get;
        }

        public Expression<Func<TModel, object>> Expression
        {
            get;
        }

        public object GetValue(object dataItem)
        {
            try
            {
                return Value((TModel)dataItem);
            }
            catch (Microsoft.CSharp.RuntimeBinder.RuntimeBinderException)
            {
                return null;
            }
        }

        public string HiddenFieldHtml(IHtmlHelper<TModel> htmlHelper)
        {
            return htmlHelper.Hidden(Name, null, new { id = "" }).ToString();
        }
    }
}

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] 

With batch editing there are no indicators that the grid is "dirty" after you hit delete, but before you hit the save changes button. [Note, when a user edits a cell, the top corner display a small red flag letting the end user know the cell is dirty and has not been saved/synced to the database yet.] This should be added to let the user know the delete action has not been performed and is in a "pending" state until the save button is pressed. This would be very helpful for UX purposes.

In the meantime, I just apply my own "dirty" class to the save button so end users know to press it before leaving the page if they would like to keep their changes.

When Batch update mode is set to true, Popup editing mode should write back the data to grid and not call the update actions directly upon confirming the popup editing window.

I have a page containing a grid, in the toolbar there are following buttons:

* Add

* Edit

* Delete 

When the user clicks Edit, the selected row is edited using the pop-up window. Alternatively the user can also double click the row to start editing. 

On the bottom of the page there is a Save and Cancel Changes button. The save changes must update all applied changes, the cancel button must undo them.

At current when Popup editing is used and the user confirms the popup window, changes are immediately written to the database. This breaks functionality of the Cancel button. Cancel will now only apply to deletes.

I need popup functionality because I have too many columns to use in-cell editing.

Telerik is ignoring the setting batch(true) when doing popup editing, so this could even be considered a bug instead of a feature request!

### Bug report


### Reproduction of the problem
On the mobile version on Android 10, the Grid does not enter incell editing.

Dojo to reproduce: https://dojo.telerik.com/oDUBuKAt


### Environment

* **Kendo UI version:** 2020.1.219
* **Browser:** Android 10 Web Browser 

Hi Team,

I'd like to request adding a configuration to the Kendo UI Grid or ExcelExport event which would be a setting to autofit the Excel sheet columns instead of changing the workbook.sheets.columns.autowidth. 

Thank you!

Bug Report

Ticket ID:1486632

When using groupable.sort.compare with client operations and groupPaging, a JavaScript error is thrown:

Reproduction

Dojo

Environment

2020.3.915

Trouble on iPad 6/7/8 with Safari.

Using grid with batch and incell edit mode.

Datepicker is not working. It just shows the text box to manually type in date.

Every once in a while the date picker pops up and stays for selection.

Sometimes I see the dat picker, but it goes away suddenly before being able to set a date.

It's kind of difficult to describe in the subject, but here's the scenario. In an ASP.NET Core 3.1 web app, we have some different Kendo Grids that are generated by using the HTML Helper. Some of these use server operations while others do not. Following the information in the Persist State demo, I'm working on changes to save the grid options (sorting, filtering, page number, etc.) when the user navigates away from a page, then restore them the next time it's loaded. With a grid we have using server operations, this is working well so far. For a grid we have using client operations, on the other hand, I'm getting unexpected results.

Example:

@(Html.Kendo().Grid(new[]
   {
      new { ProductName = "Product 1", UnitPrice = 3.50 },
      new { ProductName = "Product 2", UnitPrice = 5.30 }
   })
   .Name("TestGrid")
   .NoRecords(n => n.Template("No records found"))
   .Columns(columns =>
   {
      columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice);
   })
   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       .ServerOperation(false)
   )
)
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

If you comment out the JavaScript, you get a working grid. With the JavaScript in place, this should get the options from the grid, then immediately re-apply those same options (just for testing purposes) and the grid should end up looking the same as it did before. However, the setOptions() call seems to be triggering a POST back to the same page (with the data "sort=&group=&filter=") then wiping the data from the grid and showing the "No records found" message. However, since this grid is bound to a model property and has ServerOperation(false), all of the data needed is already at the client and there is no Ajax request that exists to get this data.

This is the code from viewing the source that was rendered by the code in the View from above:

<div id="TestGrid" name="TestGrid"></div><script>kendo.syncReady(function(){jQuery("#TestGrid").kendoGrid({"noRecords":{"template":"No records found"},"columns":[{"title":"Product Name","field":"ProductName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Unit Price","field":"UnitPrice","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":2,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductName":{"editable":false,"type":"string"},"UnitPrice":{"editable":false,"type":"number"}}}},"data":{"Data":[{"ProductName":"Product 1","UnitPrice":3.5},{"ProductName":"Product 2","UnitPrice":5.3}],"Total":2}}});});</script>
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

I'm not sure why it's attempting an Ajax request, but that appears to be what's causing the problems. With the other grid we have that *does* use server operations, I'm assuming we're not having this same problem because it does actually require an Ajax request to read the data.

The Custom() DataSource has capability to set the initial Page of the grid:

        .PageSize(20)
        .Page(4)

While the Ajax() DataSource does not. It would be nice if it gets added.

Currently, you can use the page() method for local or .Ajax() bound grid:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

Or query:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/query

At moment the "ForeignKey" method supports only predicates. Is it possible to implement a String overload (a screenshot is attached)?

### Bug report

When the filter is applied through the search panel, the query (more specifically, the filter expressions) is not built correctly. This results in displayed rows that have values that do not match the value from the search panel.

### Reproduction of the problem

1. Enable Search panel and group paging of the grid.

2. Set a value in the search panel and group by a column.

3. Expand the group and verify that there are items with values that do not match the filter expression from the search panel.

Short video demonstration:

https://screencast-o-matic.com/watch/crXFlXVI3i0

### Expected/desired behavior

The returned results should comply with the filter expression built from the Search panel.

### TicketID:
_1543306

### Additional notes and explanation

The Search panel builds the filter expression with the logic operator "or". While this is correct when the actual query is further built from the data source's internals (group function of the kendo.data.js file), the filter will be built with the "or" logic instead of "and". This query has to be restructured in order to send two filter objects with the "and" logic. The first filter object should contain all filter expressions built from the search panel with the "or" logic operator and the second filter object should contain an expression with the operator "eq", the field by which the group is built, and the value. The two filter objects should be combined with the "and" logic. 

### Environment

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

### Bug report

The Column.Exportable option is not correctly serialized and cannot be used to export hidden columns.

### Reproduction of the problem

1. Set Column.Exportable(true) and Column.Hidden(true).

2. Export the grid and see that the column is not present in the exported file.

### TicketID:
1543405

### Environment

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

Bug report

When the Grid's Group Paging is enabled and its content is grouped, the Multicheckbox Filter doesn't filter the group data correctly.

Reproduction of the problem

1. Run this REPL Example.
2. Group by a column for example „City”
3. Filter the Country column for example „USA”
4. Check the result for a specific City group

Current behavior

The group shows rows that shouldn't be included when the column is filtered properly

Expected/desired behavior

The group should only show the filtered rows

TicketID:

1546090

Environment

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