The issue is present only when a field in the model has been updated. When an invalid value is attempted to be saved, the validation is triggered. Upon pressing the Esc key, the dirty indicator should not be shown.

The expected behavior would be to not show the dirty indicator at all as the value has been returned to the initial one. Furthermore, the indicator is not positioned in the left top corner but immediately above the value.

Steps to replicate:

1. Change the value of any field.

2. Navigate to a field which has validation.

3. Set an invalid value in order to trigger the validation, respectively show a validation message.

4. Press Esc to undo the change.

5. The dirty indicator is shown and mispositioned.

Dojo sample:

https://dojo.telerik.com/iHoRaWIg

Short video demonstration:

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

As the title says, I'm getting script errors when attempting to perform a delete function with an MVC grid when in MobileMode.Phone.  The attached project will illustrate the problem.  Just run it and select delete button for one of the items in the far right column.  A popup will appear, but don't click either of the buttons on it yet.  Inspect the html with whatever browser you use (I'm using chrome so I just right click and choose select).  There will be a "Cannot read property 'data' of undefined" error.  If you then click the "Delete" button, you'll get a "Cannot read property 'resolve' of undefined".  Then click on the "Cancel" button and you'll get "Cannot read property 'reject' of undefined".  I'll attach a pic showing these errors.

I need to be able to utilize my grid in mobile phone mode and delete items.  Please help with this.

Also, to get this sample project small enough, I removed the files from the MobileSaveError\lib\KENDOUIMVC\2020.3.915.545 folder.  I figure you can replace those easily enough.  Is that the right thing to do in this case?  I thought maybe I could remove the items in the Packages folder as NuGet/VS will usually restore those.  But wasn't 100% sure on that.  So if you can tell me or link me to an article about what we can remove to shrink the project size for samples when we need to send them, that would be great.

Thank you,
Steven

A recent update has revealed some strange behaviour in some (not all) grids. In the attached screenshot, the javascript for the two buttons is on display inside the toolbar. If I move them out of the toolbar, the script no longer displays.

As a workaround, I have added this to CSS:

script {
	display: none !important;
}

Bug report

In the Less themes the textboxes and the other editors (e.g., NumericTextBox) in the popup of the Grid are misaligned. The rendering of the textboxes in the MVC and Core Grid is different when compared to the Kendo UI for jQuery Grid.

Reproduction of the problem

Reproducible in the Popup Editing demos (Core and MVC).

1. Click the "Edit" button in a random row.
2. Inspect the Product Name Textbox in the browser

Current behavior

The width of the TextBox does not match the width of the NumericTextBox.

The rendering differs:

<span class="k-widget k-textbox k-valid" style=""><input data-val="true" data-val-required="The Product name field is required." id="ProductName" name="ProductName" value="" data-role="textbox" aria-disabled="false" class="k-input k-valid" autocomplete="off" data-bind="value:ProductName" style="width: 100%;"></span>

vs

<input type="text" id="ProductName" name="ProductName" title="Product Name" required="required" autocomplete="off" data-bind="value:ProductName" class="k-textbox k-valid">

Expected/desired behavior

Identical rendering and alignment.

Environment

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

Bug report

Reported in: Ticket ID: 1524543. Reproducible in Chrome and Firefox. Not reproducible in Edge
Version 91.0.864.54.

Reproduction of the problem

Dojo example: https://dojo.telerik.com/iqUFarUV/3

1. Hide half of the columns (uncheck them in the column menu -> Columns)
2. Try to resize a column

Current behavior

On dragging the handle the column width automatically increases. Then if you try to decrease the width, you can't go past a certain width threshold.

Expected/desired behavior

The columns can be resized precisely, similarly to when their width is set in "px" instead of "%".

Environment

• Kendo UI version: 2021.2.616
• jQuery version: x.y
• Browser: [Chrome 91, Firefox 89]

In the Kendo UI for jQuery Grid, fields that are not editable are displayed as text (no input elements) in the Grid's popup editor. The MVC Grid displays all fields that are present in the view model it is bound to in its popup editor.

Implement an option to configure the editable fields, so that the behavior of the MVC Grid matches that of its Kendo UI counterpart.

Unless I am missing it somehow, I do not think the Grid control ( I was specifically using the MVC Grid control) does not support

1. A search feature that searches all rows and columns for the supplied text.  I know you can use the filter at the top of each column to search just that column but looking for ability to search the entire dataset.

 2.  Ability to set the column widths as a percentage of the total space available.  It looks to me like it only allows a specific px setting.

These would be good adds.  If either of these are currently possible and I missed it somehow, would appreciate response regarding how to achieve this.

Thanks,

David. 

Bug report

The specific here is the disabled Sortable configuration. With Sortable enabled, the rendering on the header content is correct.
Similar issue: #6955

Reproduction of the problem

1. Initialize a Grid without setting Sortable:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false).Width(200);
        columns.Bound(p => p.Freight).Width(200);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(200);
        columns.Bound(p => p.ShipName).Width(200);
        columns.Bound(p => p.ShipCity).Width(200);
    })
    .Pageable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

2. Inspect the rendering of a column header

Current behavior

The column name is nested directly in the th element, instead of being wrapped in additional elements like in the Kendo UI for jQuery Grid or in the Grid for ASP.NET Core.

Expected/desired behavior

The column name should be wrapped in additional span elements with classes k-cell-inner, k-link, k-column-title:

<span class="k-cell-inner">
    <span class="k-link">
        <span class="k-column-title">Ship Name</span>
    </span>
    ... anchor element...
</span>

Environment

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

### Bug report

When there is an initially hidden column in the Grid with multi-column headers, the hiding/showing of columns through the ColumnMenu does not work correctly.

### Reproduction of the problem

1) Hide a column in the Grid with the Hidden(true) option.

2) Hide a column through the Grid column menu.

3) The header of the column that is hidden is added to the previous visible column.

4) Show the same column through the column menu - it does not render back as expected.

The issue is caused by the a mismatch in the column group header rendering:

• Group header:
  • aria-haspopup="dialog" is missing;
  • data-title="{group name}" is missing;
  • the title in the group header must be rendered as:

<span class="k-cell-inner"><span class="k-link"><span class="k-column-title">Product Information</span></span></span>

• Header:
  • aria-haspopup="menu" is missing;

### Environment

* **Telerik UI for ASP.NET MVC version 2024.2.514

Bug report

Reproduction of the problem

1. Initialize a Grid with the following Filter and ColumnMenu configuration:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(100);
        columns.Bound(p => p.ShipCity).Width(100);
        columns.Bound(p => p.ShipCity).Width(150);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
    })
    .Sortable()
    .Filterable(f => f.Extra(true)
        .Messages(message => message.Equals("Равно"))
        .Messages(message => message.Filter("Приложи"))
        .Messages(message => message.Clear("Изчисти"))
        .Messages(message => message.Info("Покажи записи които:"))
        .Messages(message => message.And("и"))
        .Messages(message => message.Or("или"))
        .Messages(message => message.AdditionalOperator("fdfdfd"))
        .Messages(message => message.IsFalse("Активни  "))
        .Messages(message => message.IsTrue("Неактивни   "))
    )
    .ColumnMenu()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.OrderID))
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

Or use this REPL example: https://netcorerepl.telerik.com/QSYflePv05yaqnLZ07

The issue is also reproducible with the ColumnMenu set the following way:

.ColumnMenu(cm => cm
        .Messages(message => message.Columns("Колони"))
        .Messages(message => message.ColumnSettings("Насторйки"))
        .Messages(message => message.Filter("Филтър"))
        .Messages(message => message.SortAscending("Сортирай възходящ ред"))
        .Messages(message => message.SortDescending("Сортирай низходящ ред"))
    )

Current behavior

The filter menu messages are not set.

Expected/desired behavior

The filter menu messages are set regardless of whether a ColumnMenu is enabled or not.

Environment

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

### Bug report

When the Grid uses an external DataSource, the aggregates are undefined within the ClientGroupFooterTemplate().

### Reproduction of the problem

Use the following REPL sample that demonstrates the issue:

https://netcorerepl.telerik.com/mIkyQnvB382bsiFt24

1. Group the Grid by the "Freight" column.

2. An error is thrown in the browser console: "Uncaught ReferenceError: sum is not defined".

3. The aggregates=["sum"] is missing in the column options in the Grid initialization script;

"columns":[{"title":"Order ID","field":"OrderID","filterable":false,"encoded":true},{"title":"Freight","groupFooterTemplate":"Sum: #=sum#","field":"Freight","filterable":{"messages":{"title":"Show items with value that"},"checkAll":false},"encoded":true},{"title":"Ship City","width":"150px","field":"ShipCity","filterable":{"messages":{"title":"Show items with value that"},"checkAll":false},"encoded":true}]

When the DataSource is defined within the Grid configuration, the aggregate is displayed as expected.

### Expected/desired behavior

The "sum" aggregate must be displayed within the group footer template of the column when the Grid is grouped.

### Workaround

Define the DataSource in the Grid configuration or update the Grid settings by using the setOptions() method when the page is loaded:

<script>
    $(document).ready(function () {
        var grid = $("#grid").data("kendoGrid");
        if (grid) {
            let gridColumns = grid.columns;
            if (!gridColumns[1].aggregates) { // update [1] with the index of the column that has a group footer template. For example, "1" is the 2nd Grid column
                gridColumns[1].aggregates = ["sum"];
                grid.setOptions({ columns: gridColumns });
            }
        }
    });
</script>

### Environment

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

Hi Viktor,

We are looking for functionality of Context Menu on Columns of Kendo MVC grid.

We want various column selection on grid header.

Please help us to get this feature.

Regards

Supriya

Bug report

Reproducible in MVC with a custom toolbar tool that has a ClientTemplate.

Reproduction of the problem

1. Configure the Grid for incell editing and a custom command with a template to its toolbar configuration

@(Html.Kendo().Grid<TelerikMvcApp2.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
        toolbar.Spacer();
        toolbar.Custom().ClientTemplate("<span>test</span>");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.OrderID))
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Create("Orders_Create", "Grid")
        .Update("Orders_Update", "Grid")
    )
)

Current behavior

Duplication of the "Cancel" button.

Expected/desired behavior

A single "Cancel" button is rendered in the toolbar.

Environment

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

Bug report

The rendering (structure and order of elements) of the th element of a column, for which a HeaderTemplate is set, does not match the Kendo UI Grid's rendering in a similar scenario. Prerequisites: HeaderTemplate, Sortable, Filterable enabled. For more context, see Ticket ID: 1639834.

Reproduction of the problem

Check the rendering of the header of the second column:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
    .Name("grid2")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(100);
        columns.Bound(p => p.Freight).HeaderTemplate("<span class='k-link'>My Template</span>");
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Sortable()
    .Filterable()
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

Current behavior

The content of the th is the following:

<a aria-hidden="true" class="k-grid-filter-menu k-grid-header-menu">
    ...
</a>
<span class="k-link">
    ...
</span>

Expected/desired behavior

The th content should be rendered as follows:

<span class='k-cell-inner'>
    <span class='k-link'>
        ...
    </span>
    <a aria-hidden='true' class='k-grid-filter-menu k-grid-header-menu'>
        ...
    </a>
</span>

It should match the Kendo UI Grid's rendering: https://dojo.telerik.com/oTalIGir/8

Environment

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

Bug report

The Grid cell does not enter edit mode on double tap on iOS in Chrome and Edge. Works correctly in Safari.

Reproduction of the problem

1. Run this dojo example on iOS in Chrome or Edge: https://dojo.telerik.com/idOVAZiP/3
2. Double tap a cell to edit its value

Current behavior

The cell does not enter edit mode.

Expected/desired behavior

The cell enters edit mode.

Environment

• Kendo UI version: 2023.3.1114
• jQuery version: x.y
• Browser: [iOS Chrome, iOS Edge]

Bug report

There are multiple differences in the theme files. In the theme file added by the NuGet browser-specific styles are missing and calc values differ. Likely the issue is due to autoprefixer and postcss-calc being used in the kendo-themes repo: https://github.com/telerik/kendo-themes/blob/develop/postcss.config.js
and not being used in theme compilation logic in the kendo repo:
https://github.com/telerik/kendo/blob/production/gulpfile.js#L55C38-L55C39
https://github.com/telerik/kendo/blob/master/build/gulp/sass.js

Reproduction of the problem

1. In an ASP.NET MVC app install the Telerik.UI.for.AspNet.Mvc NuGet package.
2. The NuGet package adds the kendo theme files to the MyApp\Content\kendo\2024.2.514
3. Open the classic-silver.css file added by the NuGet package and compare it to the file hosted on the CDN: https://kendo.cdn.telerik.com/themes/8.0.1/classic/classic-silver.css

Current behavior

There are multiple differences similar to the exemplary ones posted below:

Example 1:
CDN line 33994:

.k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
    margin-inline-start: var(--kendo-spacing-2, 0.5rem);
    margin-inline-end: calc(var(--kendo-spacing-2, 0.5rem)*2*-1 + -16px - var(--kendo-spacing-2, 0.5rem)/2*-1);
}

NuGet:

.k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
    margin-inline-start: var(--kendo-spacing-2, 0.5rem);
    margin-inline-end: calc( -1 * (calc( var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2));
}

Note the difference in the margin-inline-end value.

Example 2:
CDN line 36510:

.k-progressbar-vertical .k-progress-status {
    -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
}

NuGet:

.k-progressbar-vertical .k-progress-status {
    writing-mode: vertical-lr;
}

Expected/desired behavior

The theme files distributed through CDN and NuGet should be identical.

Environment

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