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 ]

Bug report

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/eVOVEdaR
2. Click the bold, italic, and underline tools to activate all 3 of them
3. Click away from the inline Editor

Alternatively to step 2, click the first justify tool and then consecutively click the other 3 justify buttons.

Current behavior

The Editor's toolbar does not close.

Expected/desired behavior

The Editor toolbar closes

Environment

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

Bug report

Bundling the Kendo js files in an ASP.NET MVC application throws a NullReferenceException error. Reproduced with versions 2024.1.319 and 2024.2.514. The bundling works without exceptions in version 2023.3.1114.

Reproduction of the problem

1. Add the following bundle to the BundleConfig.cs file:

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
        "~/Scripts/kendo/2024.2.514/kendo.web.min.js",
        "~/Scripts/kendo/2024.2.514/kendo.aspnetmvc.min.js"
));

Instead of kendo.web.min.js you can use kendo.all.min.js with the same result.

2. Render the scripts in the _Layout.cshtml's head element after jQuery by calling:

@Scripts.Render("~/bundles/kendo")

Current behavior

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Workaround:

Use bundles.Add(new Bundle("~/bundles/kendo") instead of bundles.Add(new ScriptBundle("~/bundles/kendo")

Expected/desired behavior

No exception is thrown when bundling the Kendo script files.

Environment

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

I'm trying to modify the filter ui with a custom function that i passed to the kendo UI fuction.

here's my code :

@using Alstom_penali.Models.database;
@{
    ViewBag.Title = "Tutte le penali";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid">
    <div class="row">

        <h3>@ViewBag.Title</h3>

        @*sotto permessi*@
        @if (ViewBag.CanUploadFilePenali == string.Empty)
        {
            @(Html.Kendo().Upload()
                .Name("up_supplychain")
                .Messages(y => y.Select("Upload excel penali").UploadSelectedFiles("Avvia"))
                .HtmlAttributes(new { accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" })
                .Multiple(false)
                .ShowFileList(false)
                .Events(e => e.Success("onUploadSuccess"))
                .Async(a => a
                    .Save("SuppChainExcelRead", "Summary", new { operation = "save" })
                    .Remove("SuppChainExcelRead", "Summary", new { operation = "remove" })
                    .AutoUpload(false)
                )
            )
            <br />
        }




        @if (ViewBag.CanViewSummaryAll == string.Empty)
        {
            @(Html.Kendo().Grid<PenaliModel>
                ()
                .Name("grid")
                .Events(e => e.ExcelExport("excelExport"))
                .Columns(
                columns =>
                {

                    columns.Bound(c => c.PO_Number).Title("PO Number").Width(125).Locked(true);
                    columns.Bound(c => c.Pos).Width(100).Locked(true);
                    columns.Bound(c => c.ddl_stato).Title("STATO").Width(180).Filterable(false).Sortable(false).Locked(true).ClientTemplate("#=ddl_stato.Text#").EditorTemplateName("DropDownEditor");
                    columns.Bound(c => c.ddl_Responsabilita).Title("Responsabilità").Width(200).Filterable(false).Sortable(false).Locked(false).ClientTemplate("#=descriptionTemplate(data) #").EditorTemplateName("DropDownEditorResponsabilita");
                    columns.Bound(c => c.isConQ).Title("Tipo").Width(125)
                        .Filterable(filter=> filter.UI("isConQRadioFilter"))
                        .Sortable(false)
                        .Locked(false)
                        .ClientTemplate("#=typeTemplate(data) #");

                    columns.Command(command => { command.Edit().Text("Modifica"); }).Width(100);

                    columns.Bound(c => c.Progressivo_Conferma).Width(150).Title("CONQ Report");
                    columns.Bound(c => c.DataInvioConferma).Title("Data Invio CONQ").Width(200).Format("{0:dd/MM/yyyy HH:mm}");

                    columns.Bound(c => c.NCR).Width(100);
                    columns.Bound(c => c.SupplierName).Title("Supplier Name").Width(200).Format("{0:n2}");
                    columns.Bound(c => c.ProgettoSito).Title("MBTO").Width(150);
                    columns.Bound(c => c.ImportoDaAddebitare).Title("Importo").Width(100).Format("{0:n2}");
                    columns.Bound(c => c.Importo_Negoziato).Title("Importo Negoziato").Width(150).Format("{0:n2}");
                    columns.Bound(c => c.Quality_Owner).Title("Quality Owner").Width(200);
                    columns.Bound(c => c.Progressivo_Avviso).Width(150).Title("ID_CLAIM");

                    columns.Bound(c => c.DataInvioAvviso).Title("Data Invio CLAIM ").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.DataInvioPenale).Title("Data Invio penale").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.NotaDebitoNr).Title("Nota debito").Width(125);
                    columns.Bound(c => c.DataInvioStorno).Title("Data Invio storno").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.NotaCreditoNr).Title("Nota credito").Width(125);

                    columns.Bound(c => c.Id);

                    columns.Bound(c => c.WBS).Width(200);
                    columns.Bound(c => c.Progressivo).Width(150);
                    columns.Bound(c => c.YearMonth).Width(150);

                    columns.Bound(c => c.Material).Width(200);
                    columns.Bound(c => c.Description).Width(300).ClientTemplate("<span class='ellipsis'>#:Description#</span>");
                    columns.Bound(c => c.Del_Note_Nr).Width(150);
                    columns.Bound(c => c.EmailProcurement).Title("Material planner").Width(200);

                    columns.Bound(c => c.TotalOrderQty).Width(150);
                    columns.Bound(c => c.ReceivedQtyInDelay).Width(150);
                    columns.Bound(c => c.OrderValue).Width(150).Format("{0:n2}");
                    columns.Bound(c => c.Stat_Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.WeeksOfDelay).Width(150);
                    columns.Bound(c => c.ReceivedValue).Width(150);
                    columns.Bound(c => c.DataCreazione).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
                    columns.Bound(c => c.DataModifica).Width(150).Format("{0:dd/MM/yyyy HH:mm}");


                    columns.Command(command => { command.Destroy().Text("Elimina"); }).Width(100);

                })
                .HtmlAttributes(new { style = "height: 500px;" })
                .ToolBar(tools => tools.Excel().Text("Esporta excel"))
                .Excel(excel => excel.AllPages(true).FileName("Penali.xlsx"))
                .Editable(editable =>
                {
                    editable.Mode(GridEditMode.InLine);
                    editable.ConfirmDelete("Sei sicuro?");
                })
                .Scrollable()
                .Groupable()
                .Filterable(filterable => filterable
                    .Operators(operators => operators
                    .ForString(str => str.Clear()
                    .IsEqualTo("E' uguale a").StartsWith("Inizia con").EndsWith("Finisce con")
                    .Contains("Contiene").DoesNotContain("Non contiene"))
                    .ForDate(dt => dt.Clear()
                    .IsGreaterThanOrEqualTo("Dopo o uguale al").IsLessThanOrEqualTo("Prima o uguale del"))

                ))
                .Sortable()
                .Selectable()
                .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                )
                .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {

                    model.Id(p => p.Id);
                    model.Field(p => p.DataInvioAvviso).Editable(false);
                    model.Field(p => p.DataInvioPenale).Editable(false);
                    model.Field(p => p.DataInvioStorno).Editable(false);
                    model.Field(p => p.DataCreazione).Editable(false);
                    model.Field(p => p.DataModifica).Editable(false);
                    model.Field(p => p.Del_Date).Editable(false);
                    model.Field(p => p.Del_Note_Nr).Editable(false);
                    model.Field(p => p.Description).Editable(false);
                    model.Field(p => p.Det_Selected).Editable(false);
                    model.Field(p => p.EmailProcurement).Editable(false);
                    model.Field(p => p.ImportoDaAddebitare).Editable(false);
                    model.Field(p => p.Importo_Negoziato).Editable(false);
                    model.Field(p => p.Material).Editable(false);
                    model.Field(p => p.NotaCreditoNr).Editable(false);
                    model.Field(p => p.NotaDebitoNr).Editable(false);
                    model.Field(p => p.OrderValue).Editable(false);
                    model.Field(p => p.PO_Number).Editable(false);
                    model.Field(p => p.Pos).Editable(false);
                    model.Field(p => p.ProgettoSito).Editable(false);
                    model.Field(p => p.Progressivo).Editable(false);
                    model.Field(p => p.ReceivedQtyInDelay).Editable(false);
                    model.Field(p => p.ReceivedValue).Editable(false);
                    model.Field(p => p.Stat_Del_Date).Editable(false);
                    model.Field(p => p.SupplierName).Editable(false);
                    model.Field(p => p.TotalOrderQty).Editable(false);
                    model.Field(p => p.WBS).Editable(false);
                    model.Field(p => p.WeeksOfDelay).Editable(false);
                    model.Field(p => p.YearMonth).Editable(false);
                    model.Field(p => p.NCR).Editable(false);
                    model.Field(p => p.Progressivo_Avviso).Editable(false);
                    model.Field(p => p.Progressivo_Conferma).Editable(false);
                    model.Field(p => p.Quality_Owner).Editable(false);

                    model.Field(p => p.ddl_stato).DefaultValue(new SelectListItem() { }); //unico editabile
                    model.Field(p => p.ddl_Responsabilita).DefaultValue(new SelectListItem() { });
                    model.Field(p => p.isConQ).Editable(false);
                    model.Field(p => p.DataInvioConferma).Editable(false);
                })
                .Events(events =>
                {

                    events.RequestEnd("onRequestEnd");
                    events.Error("onGridError");

                })
                .Read(read => read.Action("Penali_List", "Summary"))
                .Update(update => update.Action("Penali_Update", "Summary"))
                .Destroy(update => update.Action("Penali_Destroy", "Summary"))

                .PageSize(10)
                )
    )
        }
        else
        {
            <p style="font-size:16px;color:red">@ViewBag.CanViewSummaryAll</p>
        }
    </div>
</div>


<div id="Pop_up" style="display:none">
    <p>Seleziona di chi sarà la responsabilità di questa penale</p>
</div>
@section scripts {
    <script type="text/javascript">


        function isConQRadioFilter(element) {
            // Create radio buttons for filtering boolean values
            var html = `
            <label>
                <input type="radio" name="isConQFilter" value="true" /> CONQ
            </label>
            <label>
                <input type="radio" name="isConQFilter" value="false" /> Ritardo
            </label>
        `;
            // Append the radio button HTML to the filter container
            element.append(html);

            // Trigger filtering when a radio button is clicked
            element.find("input[type=radio]").change(function () {
                var filterValue = $(this).val();
                var grid = $("#grid").data("kendoGrid");
                grid.dataSource.filter({
                    field: "isConQ",
                    operator: "eq",
                    value: filterValue === "true" // Convert the value to a boolean
                });
            });
        }

        function onEdit(e) {


        }

        function excelExport(e) {
            var sheet = e.workbook.sheets[0];
            var template2 = kendo.template(e.sender.columns[2].template);
            var template3 = kendo.template(e.sender.columns[3].template);

            var data = e.data;
            for (var i = 0; i < data.length; i++) {
                sheet.rows[i + 1].cells[2].value = template2(data[i]);
                sheet.rows[i + 1].cells[3].value = template3(data[i]);
                if (data[i].isConQ) {
                    sheet.rows[i + 1].cells[4].value = "CONQ";
                } else {
                    sheet.rows[i + 1].cells[4].value = "Ritardo";
                }

            }
        }



        function descriptionTemplate(data) {


            if ((data.ddl_stato.Text == "INLAVORAZIONE" || data.ddl_stato.Text == "NEGOZIATA")  && data.ddl_Responsabilita.Text != null) {
                return data.ddl_Responsabilita.Text;
            }
            else {
                return "";
            }
        }


        function typeTemplate(data) {

            var html;
            if (data.isConQ) {
                html = kendo.format(
                    "<a class=\"k-button\" href='" + '@Url.Action("Create_Penale_CONQ", "Summary")' + "/" + data.Id + " '>CONQ</a>  ",

                );
            } else {
                  html = kendo.format(
                    "Ritardo ",

                );
            }
            return html;
        }

        //(function () {
        //    isConQFilter("ciao");
        //})();

            function isConQFilter(element)
            {
                console.log("isConQFilter called");
                element.kendoDropDownList({
                    dataSource: [
                        { text: "CONQ", value: true },
                        { text: "Ritardo", value: false }
                    ],
                    dataTextField: "text",
                    dataValueField: "value",
                    optionLabel: "-- Seleziona Tipo --",
                    valuePrimitive: true
                });
            }


            //function isConQFilter(element) {
            //    debugger;
            //    console.log("isConQFilter called");

            //}
    </script>
    }
    <style>
        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }


        .k-grid-header .k-header {
            height: 20px;
            padding: 0;
        }

        .k-grid tbody tr {
            line-height: 14px;
        }

        .k-grid tbody td {
            padding: 1px;
        }
    </style>


the coulm i'm talking about is the "isConq" one, i would like to show "Conq" or "Ritardo" instead of "è vero" or "è falso".

Following the doc, i'm calling the "isConQFilter" js function, but it is never triggered by the kendo.

Where am i wronged?

If you need something else, please, tell me.

I'm using kendo mvc grid version 2016.

Bug report

The ClientGroupFooterTemplate and ClientFooterTemplate configuration lead to an invalid template error when strict CSP mode is enabled. There are no corresponding methods that accept a TemplateHandler.

Reproduction of the problem

@(Html.Kendo().Grid<TelerikMvcApp3.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).ClientGroupFooterTemplate("Total:").ClientFooterTemplate("Team Total");
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Home"))
    )
)


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

Current behavior

JS exceptions on initializing the Grid and on attempting to group it by ShipCity.

Expected/desired behavior

CSP compatible templates.

Environment

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

Bug report

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/oVAViPiD
2. Focus the Editor's content area
3. Click the background color or the color tool's dropdown arrow. Make sure to click precisely the arrow icon.

Current behavior

The dropdown opens and the Editor hides.

Expected/desired behavior

The dropdown opens and the Editor remains open.

Environment

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

Bug report

There is a difference in behavior between the wrappers (MVC and Core) and the Kendo UI for jQuery DateRangePicker. See the following dojo example, which shows initializing the component with a null value for the End date: https://dojo.telerik.com/IkAMUJoG/2

In contrast, the MVC and Core helpers display the Start value as End value.

Reproduction of the problem

1. Run this REPL: https://netcorerepl.telerik.com/GoaDYoFu45uqxdEF31

Current behavior

The End value is the same as the Start value.

Expected/desired behavior

The End value is null.

Consider also the scenario, where the Range configuration is not set and the component gets the Start and End values from the model, and the value of the EndDate field is null:

@(Html.Kendo().DateRangePickerFor(m => m.StartDate, m => m.EndDate )
    .Name("dateRangePicker")
)

Environment

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

### Bug report

When the Grid is set up for InCell editing, and the column editor is the Upload widget, the user cannot select a file to upload when the Grid is navigatable.

The issue occurs in version >= 2024.1.130

### Reproduction of the problem

1. Create an InCell editable Grid and enable its "navigatable" option.

2. Set the Upload widget as a column editor.

3. Enter a specified cell in edit mode and try to select a file for upload.

4. The cell closes immediately.

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

### Expected/desired behavior

The cell must remain focused when the Upload button is clicked.

### Workaround

Handle the "edit" event of the Grid, handle the "mousedown" event of the Upload button, and call stopImmediatePropagation():

            $("#grid").kendoGrid({
                editable: true,
              	navigatable: true,
                edit: function(e) {
                   if($(e.container).find("input[type='file']")) {
                   	$(".k-upload-button").on("mousedown", function (event) {
                          event.stopImmediatePropagation();
            		});
                   }
                }
                ...
            });

### Environment

* **Kendo UI version: 2024.1.130
* **jQuery version: 3.7.0
* **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

Regression in R1 2023.

Reproduction of the problem

1. Set the following HtmlAttributes configuration in a Grid column:

columns.Bound(p => p.OrderDate).HtmlAttributes(new { title = "Order Date: #=kendo.toString(OrderDate, 'dd-MM-yyyy')# " });

Current behavior

kendo.toString is not executed and as a result the date is not formatted. The exact value of the title attribute, as shown above is rendered as title of the cell.

Expected/desired behavior

The logic is executed and the OrderDate value is rendered in the title with the specified format.

Environment

• Kendo UI version: 2023.1.117
• 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]

1. Create a solution with several Telerik UI for MVC projects

2. Perform a rename of a value that is present in multiple projects

Expected result: Rename is performed successfully.

Actual result: Visual Studio crashes.

We are using Kendo MVC version: 2021.3.1109.545

When we tried to open the PDF file from the application using PDF viewer, we can see the fonts getting blurred and fuzzy as shown below.

Bug report

The issue is related to the specific selectors used in the filter option. The linked example contains 3 different selectors, with all of which the problematic behavior is exhibited.

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/aTOHaDUg/5
2. Hover one of the span elements that matches the Tooltip filter
3. Move the mouse cursor outside the hovered span.

Current behavior

The Tooltip does not hide automatically, unless you move the mouse cursor directly down from the hovered span.

Expected/desired behavior

The Tooltip hides automatically once you exit the boundaries of the hovered element, regardless of the cursor move direction.

Environment

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

Bug report

Reproduction of the problem

1. Go to https://demos.telerik.com/aspnet-mvc/grid/paste-from-excel
2. Inspect the Grid toolbar

Current behavior

No dropdown is rendered.

Expected/desired behavior

A dropdown is rendered (see the same demo in Kendo UI for jQuery, or UI for ASP.NET Core)

Workaround - call the Grid's setOptions method on document.ready as shown below:

<script>
    $(document).ready(function() {
        //replace 'grid' with the actual Name value of your Grid:
        $("#grid").data("kendoGrid").setOptions({
            toolbar: ["paste"]
        })  
    })
</script>

Environment

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

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

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]