Bug report

Reproducible with a Grid nested in the content of the tab, or loaded in the tab through AJAX.

Reproduction of the problem

Dojo example: https://dojo.telerik.com/eJuHaTan

1. Select Tab1, or click the button above the TabStrip to select the tab programmatically.
2. Try to reorder a row in the Grid in Tab1.

Current behavior

The rows cannot be reordered.

Expected/desired behavior

The rows can be reordered.

Environment

• Kendo UI version: 2022.1.412
• jQuery version: x.y
• 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

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

Prerequisites: reordering a non-locked column before a locked column. There could be one or more locked columns.
This behavior appeared in v2021.3.1207.

Reproduction of the problem

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

1. Click, hold and slowly drag the header of the OrderDate column over the locked ID column.
2. Attempt to reorder the OrderDate column before the ID column.

Current behavior

The reorder hint appears only when you hover the left border of the ID cell. This makes dropping the header at the right spot difficult, since you have to be very precise and if you are too fast, you have to re-adjust the mouse cursor position right on top of the left border of the cell.

Expected/desired behavior

The reorder hint should appear when mouse cursor enters the boundaries of the target cell. For example, slowly drag ShipCity before ShipCountry. Note how the reorder hint appears once you enter the boundaries of the ShipCountry cell and you don't have to drag all the way to ShipCountry's left border.

Environment

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

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

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

Regression introduced in R3 2023 SP1
If an initially hidden column is shown with the showColumn API method, the column header remains hidden because of the k-hidden class that remains in the th element.

Reproduction of the problem

1. Click on the button above the Grid in the example below

<input type="button" name="btn1" value="Show the hidden columns" onclick="btn1Click()" />
<br />
<br />

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Hidden(true);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Hidden(true);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

<script>
    function btn1Click() {
        var grid = $("#Grid").data("kendoGrid");

        grid.showColumn("ShipCity");
        grid.showColumn("OrderDate");
    }
</script>

Current behavior

The hidden columns are shown but their headers remain hidden.

As a workaround, the k-hidden class can be removed from the column header, after showing the column:

grid.showColumn("ShipCity");
$(".k-grid .k-header[data-field='ShipCity']").removeClass("k-hidden");

Expected/desired behavior

The columns and their headers are shown.

Environment

• Kendo UI version: 2023.3.1114
• jQuery version: x.y
• 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

The Kendo UI Grid's Toolbar Template UI for ASP.NET MVC documentation displays an approach used for UI for ASP.NET Core. The ClientTemplate and ClientTemplateID are not available for UI for ASP.NET MVC.

Reproduction of the problem

Please try the approach used in the documentation. It is not available for UI for ASP.NET MVC.

Expected/desired behavior

Either include the approach for UI for ASP.NET MVC, or modify the documentation.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: 3.6
• Browser: all

Bug report

When a UI for ASP.NET MVC Grid contains a PDF or Excel button within the Toolbar, the IconClass is being ignored.

Reproduction of the problem

.ToolBar(t => t.Excel().Text("Export to Excel").IconClass("icon here"))

Current behavior

Expected/desired behavior

The specific icon should be added based on the IconClass.

Environment

• Kendo UI version: 2023.2.606
• jQuery version: All Supported Versions
• Browser: All

Bug report

Reproduction of the problem

Have a Grid bound to local data (see below code snippets and screenshot)

@model Pager_issue.Models.GridViewModel

@(Html.Kendo().Grid(Model.Items)
    .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);
    })
    .Pageable(p => p.PageSizes(new[] { "5", "10", "50", "all" }).PreviousNext(false))
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
    )
)

    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var model = new GridViewModel
            {
                Items = Enumerable.Range(0, 200).Select(i => new OrderViewModel
                {
                    OrderID = i,
                    Freight = i * 10,
                    OrderDate = DateTime.Now.AddDays(i),
                    ShipName = "ShipName " + i,
                    ShipCity = "ShipCity " + i
                })
            };

            return View(model);
        }

Current behavior

When filling the Grid with data via a ViewModel, the pager doesn't show on load

Expected/desired behavior

The pager should be visible on load

Environment

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

Bug report

Not reproducible with the UI for ASP.NET Core Grid helper.

Reproduction of the problem

1. Set the Total option of the DataSource in a Grid:

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(15)
    .Read(read => read.Action("Orders_Read", "Grid"))
    .Total(50)
)

2. Compare the rendering of the pager "next page" and "last page" buttons with the Total option set and without it.

Current behavior

The "next page" and "last page" buttons in the Grid's pager are rendered as anchor Html elements, when Total is set in the DataSource. When it is not set, the buttons are rendered as button Html elements.

Expected/desired behavior

The rendering of the pager buttons should be consistent and they should render as button Html elements.

Environment

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

Bug report

When the Grid is set initially with a sort operation, the icon for the column will show twice in a UI for ASP.NET MVC web application.

Reproduction of the problem

Using the Kendo UI Grid template, add the sorting configuration to the dataSource:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(200);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Sort(s => s.Add("OrderID").Descending()))  //Added Predefined Sort
)

Current behavior

Expected/desired behavior

The icon should only appear once for the sorted column.

Environment

• Kendo UI version: 2023.1.425
• jQuery version: All Supported Versions
• Browser: all

### Bug report

The Grid columns do not expose the ClientTemplateHandler() method. It is available in Telerik UI for ASP.NET Core since version 2023.1.314.

### Reproduction of the problem

columns.Bound(p => p.IsAlwaysIncluded).ClientTemplateHandler("myColTemplate");

<script>
function myColTemplate(data) {
  return `<div>${data.IsAlwaysIncluded}</div>`
}
</script>

The ClientTemplateHandler() method must be exposed for the Grid columns.

### Environment

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

Bug report

Regression in R1 2023 SP1.

Reproduction of the problem

Set a HeaderTemplate in one of the following 3 ways.

columns.Bound(p => p.Freight).HeaderTemplate("<div title='Freight'>Freight</div>");

columns.Bound(p => p.Freight).HeaderTemplate(@<text>
<div title="Freight">Freight</div>
</text>);

columns.Bound(p => p.Freight).HeaderTemplate(@<div title="Freight">Freight</div>);

Current behavior

In the first scenario the error is:
System.NotSupportedException: Specified method is not supported. 

In the second and third scenario the error is:
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Expected/desired behavior

No exception thrown when the HeaderTemplate is set.

Environment

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

Bug report

Reproduction of the problem

https://demos.telerik.com/aspnet-mvc/grid/persist-state

1. Add a search panel to the Grid: .ToolBar(t => t.Search())
2. Save its state and then load the saved state

Current behavior

The search panel disappears from the Grid's toolbar.

Expected/desired behavior

The search panel is present in the Grid's toolbar.

Environment

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

Hello,

since I updated Telerik UI for ASP.net MVC from version 2019.1.220 to 2019.2.514, the paging part of the grid doesn't display as expected in IE11 with compatibility with IE9  (<meta http-equiv="x-ua-compatible" content="IE=9">)

If I remove the compatibility with IE9, it's ok, but I need it to support older computer.  

version 2019.1.220: 

version 2019.2.514:

 Is there a solution to display it correctly?

Thank you very much and best regards.

Emmanuel Tharin

Bug report

Reproduction of the problem

Reproducible in the demos: https://demos.telerik.com/aspnet-mvc/grid/persist-state

1. Inspect the rendering of the "Contact Name" header in the MVC and Kendo UI for jQuery demos.

Current behavior

The difference in the rendering is shown below. In the Kendo UI Grid's Html, there is a span with class "k-cell-inner" that wraps the ".k-link" span, whereas in the MVC Grid, only an anchor is rendered.

Kendo UI:

<th scope="col" role="columnheader" data-field="ContactName" aria-haspopup="true" rowspan="1" data-title="Contact Name" aria-label="Contact Name Press ctrl + space to group" data-index="0" id="a44eadd9-62c6-4154-9735-4351a9cb5064" class="k-header k-filterable" data-role="columnsorter" style="touch-action: none;">
  <span class="k-cell-inner">
    <span class="k-link">
      <span class="k-column-title">Contact Name</span>
    </span>
    <a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
      <span class="k-icon k-i-more-vertical"></span>
    </a>
  </span>
</th>

MVC:

<th class="k-header k-filterable" data-field="ContactName" data-index="0" data-title="Contact Name" id="f28afe50-210a-474d-9943-113f6bd4ad15" scope="col" data-role="columnsorter" style="touch-action: none;">
  <a class="k-link" href="/aspnet-mvc/grid/persiststate_customers_read?grid-sort=ContactName-asc">Contact Name</a>
  <a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
    <span class="k-icon k-i-more-vertical"></span>
  </a>
</th>

Expected/desired behavior

Identical rendering.

Environment

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

Bug report

Reproduction of the problem

1. Set up a Grid to use server binding
2. Add a custom command:

columns.Command(command => command.Custom("View Email"))
	.Title("Body")
	.Width(150);

Current behavior

When the Grid is configured to use server binding, it will render an anchor element. If remote binding is used, the Grid will correctly render a button element.

Expected/desired behavior

Consistency in the rendering. A button element should be rendered, regardless of using server or remote binding.

Environment

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