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 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

When a modal Dialog is open, if we open a modal Window and then attempt to close it, a js exception is thrown. This is a regression introduced in version 2024.1.319.

Reproduction of the problem

Run the following dojo example: https://dojo.telerik.com/IrEWEHAZ

1. Click the "Open Nested Window" button.
2. After the Window opens, try to close it by clicking its "x" button.

Current behavior

A js exception is thrown:
Uncaught TypeError: this._object(...)._overlay is not a function
The issue is related to the modal option being enabled in both the Dialog and the Window. Disabling this option in one of them, prevents the exception.

Expected/desired behavior

The Window closes without exceptions.

Environment

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

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 ]

### Bug report

When server-side localization is used (the culture is different than the default one ("en-US")), all columns are filterable, even when the Filterable() configuration is disabled.

### Reproduction of the problem

1) Create a filterable TreeList and disable the filtering of a specified column.

2) Set the server-side culture to "es-ES".

//Web.config

<system.web>
    <globalization uiCulture="es-ES" culture="es-ES"></globalization>
</system.web>

//View.cshtml
@(Html.Kendo().TreeList<UserViewModel>()
        .Name("treelist")
        .Columns(columns => {
            columns.Add().Field(p => p.id).Filterable(false);
            columns.Add().Field(p => p.Name);
            ...
        })
	.Filterable(true)
	...
)

3) The "id" column is filterable even though the filtering is disabled:

### Expected/desired behavior

The filtering per column must be configurable irrespective of whether localization is used or not.

### Workaround

After the TreeList is initialized, call the setOptions() method and disable the filtering of the respective columns:

<script>
    $(document).ready(function () {
        var treelist = $("#treelist").getKendoTreeList();
        if (treelist) {
            var colOptions = treelist.columns;
            colOptions[0].filterable = false;
            treelist.setOptions({ columns: colOptions });
        }
    })
</script>

### Environment

* **Telerik UI for ASP.NET MVC/Core version: 2024.1.130
* **jQuery version: 3.7.0
* **Browser: [all]

### Bug report

The legend items cannot be configured in the SeriesDefaults() configuration of the Pie Chart.

### Reproduction of the problem

1) Create a Pie Chart with a visible legend.

2) Add the SeriesDefaults() configuration and try to add the LegendItem() option to set the type of the legend items.

.SeriesDefaults(seriesDefaults =>
{
    seriesDefaults
            .Pie();
            .LegendItem(x => x
                .Type("line")
                .Line(y => y.DashType(ChartDashType.Solid)));
})

The Legenditem() option is available for Telerik UI for ASP.NET Core Pie Chart.

### Expected/desired behavior

The legend items of the Pie Chart must be configurable through the SeriesDefaults() option.

### Environment

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

Bug report

Reproduction of the problem

1. Compare the rendering of the "Next Page", "Last Page", "Previous Page" and "First Page" buttons in RTL between the MVC Grid and the jQuery and Core Grids:

https://demos.telerik.com/aspnet-mvc/grid/right-to-left-support
https://demos.telerik.com/kendo-ui/grid/right-to-left-support
https://demos.telerik.com/aspnet-core/grid/right-to-left-support

Current behavior

Incorrect rendering of the buttons.

Expected/desired behavior

Buttons rendered consistently with the jQuery and Core Grids.

Environment

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

Bug report

Dragging a row from a Grid to another empty Grid is not working.

Reproduction of the problem

1. Open the following dojo:
   https://dojo.telerik.com/EGIyemen
2. Try to drag a row to the empty Grid

Current behavior

The row is not inserted in the empty Grid

Expected/desired behavior

The row should be inserted in the empty Grid.

Environment

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

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

DropDownList editor in a Form component with ServerFiltering enabled causes a js exception.

Reproduction of the problem

1. Enable ServerFiltering in the DropDownList editor:

@(Html.Kendo().Form<MVCFormValidation.Models.UserViewModel>()
	.Name("formExample")
	.HtmlAttributes(new { action = "/Home/Index", method = "POST" })
	.Validatable(v =>
	{
		v.ValidateOnBlur(true);
		v.ValidationSummary(vs => vs.Enable(false));
	})
	.Items(items =>
	{
		items.AddGroup()
			.Label("Registration Form")
			.Items(i =>
			{

				i.Add()
					.Field(f => f.FirstName)
					.Label(l => l.Text("First Name:"));

				i.Add()
					.Field(f => f.LastName)
					.Label(l => l.Text("Last Name:"));

				i.Add()
					.Field(f => f.NumberOfShares)
					.Label(l => l.Text("Number Of Shares:"));

				i.Add().Field(m => m.Country.Id)
					.Editor(e => e.DropDownList().DataSource(source =>
					{
						source.Read(read =>
						{
							read.Action("GetCountries", "Home");		
						})
						.ServerFiltering(true);
					}).Filter(FilterType.Contains).DataTextField("Name").DataValueField("Id"))
					.Label("Country");

				i.Add()
					.Field(f => f.Email)
					.Label(l => l.Text("Email:"));
				i.Add()
					.Field(f => f.DateOfBirth)
					.Label(l => l.Text("Date of Birth:").Optional(true));
				i.Add()
					.Field(f => f.Agree)
					.Label(l => l.Text("Agree to Terms:"));
			});
	})
)

Current behavior

On page load a js exception is thrown:
Uncaught Error: Syntax error, unrecognized expression: #

Expected/desired behavior

No exceptions.

Environment

• Kendo UI version: 2023.3.1114
• jQuery version: 3.4.1, 3.7.1
• Browser: [all]

Bug report

Reproduction of the problem

1. Reference kendo.all.min.js and kendo.all.min.js.map in a project
2. Add a basic Grid:

<div id="grid"></div>
<script>
    // The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                // The remote endpoint from which the data is retrieved.
                url: "https://demos.telerik.com/kendo-ui/service/products",
                dataType: "jsonp"
            }
        },
        pageSize: 10
    });

    $("#grid").kendoGrid({
        // The dataSource configuration is set to an existing DataSource instance.
        dataSource: dataSource,
        pageable: true
    });
</script>

3. Open the browser's dev tools Source tab and place a breakpoint (e.g., on line 3715).

Current behavior

The breakpoint is added at the last line (326079) of the file.

Expected/desired behavior

The breakpoint is added at the desired line (e.g., 3715).

Environment

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

Bug report

Reproduction of the problem

https://dojo.telerik.com/ORahihiZ/2

1. Edit a card

Current behavior

The second editor (NumericTextBox) in the popup is focused by default.

Expected/desired behavior

Since the form's focusFirst option is enabled, the first editor (textarea) in the popup should be focused by default.

As a workaround, the textarea can be focused in the editCard event handler:

function onEditCard(e) {
    setTimeout(function() {
        $(".k-taskboard-pane-content textarea").focus();
    }, 100)
}

Environment

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

In a Selectable grid, when only one column is shown in the grid, and the model's Id field is specified, an error occurs on selection.

If you include more than one column (must be more than one visible) it works correctly.

If the model's Id is not specified, it works correctly even with only one column visible. 

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
    .Name("grid1")
    .Columns(columns => {
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Hidden(true);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Selectable(s => s.Mode(GridSelectionMode.Single))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Model(m => m.Id("OrderID"))
     )
)

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.

The Grid should allow switching between case sensitive and case insensitive filtering.

I'm using the ClientTemplate-Feature to render buttons for CRUD-actions in grids. For one entity I have to use a TreeList instead of a Grid due to parent-child relations. It would be great if I could use the same templates I use for the grid for the treelist as well.

Example:

columns.Bound(x => x.UserName)
        .ClientTemplate("<a href='" + Url.Admin().Account() + "/#= Id#/edit'>#= UserName #</a>")
        .Width(300);

Bug report

Related: telerik/kendo#18503

Reproduction of the problem

Dojo example: https://dojo.telerik.com/AWiYAlIm/5

1. Reduce the width of the right pane (or run in fullscreen and resize the browser window making it as narrow as possible)

Current behavior

A js exception is thrown:
e.popup.fullscreen is not a function

Expected/desired behavior

No exceptions are thrown.

Environment

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