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

Hello, 

I think there is a bug with the DataTimeOffset field when used in a Grid. It cannot display correctly and is showing something like /Date(1364927400000)/. I have to retrieve my data from database as DateTimeOffset format and then use a new ViewModel to convert the DateTimeOffset values to DateTime values. This is really annoying.

Could you let me know if there is a way a DateTimeOffset field can be supported in the grid? Sometimes you do have to display the time zone info.

I hope this can be fixed in a future release.

Thanks,

Sam

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]

When I use a grid, I can enable Filterable and the column shows me when I am filtering it; however if I enable ColumnMenu I have no indication if I am filtering on that column.  We've used a work around to handle this state ourselves, but its ugly and I think this should be part of the core product.

@(Html.Kendo().Grid<ShipmentGrid>()
  .Name("grid")
  .AutoBind(false)
  .Columns(columns =>
  {
  columns.Template(@<text></text>).Width(50).Title("PDFs").ClientTemplate($"<a href='javascript:" + jsPage + $".openDocumentWindow(#=AccountId#, #=OrderNumber#, #=OrderLineId#, #=OrderLineNumber#)'><img src={Url.Content("~/Content/images/pdficon_small.png")} /></a>");
  columns.Bound(m => m.CustomerName).Width(200).Title("Customer").HeaderTemplate("Customer <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
  columns.Bound(m => m.PurchaseOrderNumber).Width(100).Title("PO").HeaderTemplate("PO <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
  })
  .HtmlAttributes(new { style = "font-size:0.85em;" })
  .Filterable()
  .ColumnMenu()
  .Reorderable(reorder => reorder.Columns(true))
  .Resizable(r => r.Columns(true))
  .Scrollable(s => s.Height(340))
  .Pageable(pageable => pageable
  .Refresh(true).ButtonCount(10)
  .PageSizes(new [] { 25, 250, 2500 })
)
  .Sortable(sortable => sortable
  .SortMode(GridSortMode.SingleColumn)
)
  .ClientDetailTemplateId("itemdetail")
  .DataSource(dataSource => dataSource
  .Ajax()
  .Read(read => read.Url("/api/shipments").Data(jsPage + ".getParameters"))
  .PageSize(2500)
  .ServerOperation(false)
  .Events(events => events
  .Error(jsPage + ".GridService.onError")
  .RequestStart(jsPage + ".GridService.onRequestStart")
  .RequestEnd(jsPage + ".GridService.onRequestEnd")
)
)
  .NoRecords()
  .Events(events => events.DataBound(jsPage + ".onDataBound"))
)

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
PersistSelection does not work when GroupPaging is enabled. Error is thrown: "Cannot read property 'Id' of undefined"

Reproduction of the problem

Dojo: https://dojo.telerik.com/aKixuZAy

Expected/desired behavior
No error shall be thrown and rows should be persisted when GroupPaging is enabled

Environment
Kendo UI version: 2020.2.617
Browser: [all]

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]

Hi.

I'd like to request the ability to sort on multiple columns of a grid, allow unsorting a column, but the grid must have at least one columns sorted.

An exception is thrown when calling `ToDataSourceResult` from the `Kendo.DynamicLinq` library if there are no columns sorted:

System.NotSupportedException: The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'

Thank you.

Hi,

I'm experiencing a bug with the kendo grid. In my project I have a rather complicated website where a kendo grid is loaded depending an multiple criteria which can be chosen by the user through dropdowns and multiselects. Luckily, I could break it down to a simple test website and the bug still is bugging around ;)

Description: Depending on the criteria chosen, the grid loads different data which reach from zero to thousands of data rows. In my example here, it's either zero or 100 data rows (depending on the dropdown, if there is either "Empty" or "Not empty" selected). The grid loads its data if you press the button ok (by calling the Load action on the server). The result is meant to be limited to paging of 25 rows (no user choice wanted)!

Heres the code for the cshtml site:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="content">
        <div>
            @(Html.Kendo().DropDownList()
                            .Name("test_selector")
                            .DataTextField("Display")
                            .DataValueField("Value")
                            .BindTo(new List<DropDownVM>() {
                                            new DropDownVM()                                                                    {
                                                Display = "Empty",
                                                Value = "empty"
                                            },
                                            new DropDownVM()                                                                    {
                                                Display = "Not empty",
                                                Value = "notEmpty"
                                            }
                            })
            )
        </div>
        <div>
            @(Html.Kendo().Grid<MyProject.ViewModels.Test.TestItem>()
                                            .Name("grid_Test")
                                            .Columns(columns =>
                                            {
                                                columns.Bound(x => x.TestId).Title("TestId").Width(75);
                                                columns.Bound(x => x.TestName).Title("TestName").Width(75);
                                            })
                                            .Sortable()
                                            .Pageable()
                                            .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .PageSize(25)
                                                .Read(read => read.Action("Load", "Test").Data("GetSelectorData"))
                                            )
                                            .AutoBind(false) //Do not load Grid data initially
            )
        </div>
        <div>
            @Html.Kendo().Button().Name("Load").Content("Load")
        </div>
    </div>
    <script type="text/javascript">
        $("#Load").on("click", function (e) {
            var grid = $("#grid_Test");
            grid.data("kendoGrid").dataSource.read();
        });

        function GetSelectorData() {
            var selectorData = {
                type: $('#test_selector').data("kendoDropDownList").value()
            }
            return selectorData;
        }
    </script>
</body>
</html>

And the corresponding controller:

public class TestController : BaseController
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Load([DataSourceRequest] DataSourceRequest request, string type)
        {
            List<TestItem> result = new List<TestItem>();
            if (type == "notEmpty")
            {
                for (int id = 1; id <= 100; id++)
                    result.Add(CreateTestItem(id));
            }

            request.PageSize = 25;
            return Json(result.ToDataSourceResult(request));
        }

        private TestItem CreateTestItem(int id)
        {
            TestItem result = new TestItem()
            {
                TestId = id,
                TestName = "Name" + id
            };
            return result;
        }
    }

Problem: The scenario described above works actually fine as long as the grid gets at least one data row delivered as DataSourceResult (i.e., result.Count > 0 in the Load method of the controller). The request object in the controller's Load method also shows request.PageSize to be configured to 25. Also, if I choose "Empty" from the dropdown and press the Load-button, the request in the controller will show PageSize = 25. But if I switch the selector to "Not empty" afterwards and press Load, the request will show PageSize = 0! This results in the grid not being paged at all and showing all results on a single page (which leads to serious connectivity problems in my productive project as soon as there are several thousands of data rows).

I tried a quick workaround in the Load method of the controller by setting the PageSize manually back to 25 (which is not wanted of course, but would actually work for me at the moment):

public ActionResult Load([DataSourceRequest] DataSourceRequest request, string type)
        {
            List<TestItem> result = new List<TestItem>();
            if (type == "notEmpty")
            {
                for (int id = 1; id <= 100; id++)
                    result.Add(CreateTestItem(id));
            }

            request.PageSize = 25;
            return Json(result.ToDataSourceResult(request));
        }

Unfortunately, this doesn't work either. The paging will be back on again and there will be only 25 data rows loaded in the grid but there is only one single page no matter how many data rows are loaded (see attached screenshot).

Do you know about this? Unfortunately I couldn't find any help for this problem so far.

Greetings!

Is it possible to add the ClientTemplateView() to load a partial view into the column template?

@(Html.Kendo().Grid <OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ShipName).ClientTemplateView(Html.Partial("~/Views/Details/MyView.cshtml")); 
            ...
        })
        ...
)

Bug report

Using server binding does not render the NoRecords message for the Grid

Reproduction of the problem

	@(Html.Kendo().Grid(new List<Product>())    
		.Name("Grid")
		.Columns(columns => {
			columns.Bound(p => p.ProductID).Groupable(false);
			columns.Bound(p => p.ProductName);
			columns.Bound(p => p.UnitPrice);
			columns.Bound(p => p.UnitsInStock);
		})
		.NoRecords("No records found.")
		
		.Pageable()
		.Sortable()
		.Scrollable() 
		.DataSource(d=>d.Server())
		.Filterable()
		.Groupable()
	)

Workarond

A possible workaround is to use local binding by setting the AJAX binding in the DataSource, but keep the initial server binding:

	@(Html.Kendo().Grid(new List<Product>())    
		.Name("Grid")
		.Columns(columns => {
			columns.Bound(p => p.ProductID).Groupable(false);
			columns.Bound(p => p.ProductName);
			columns.Bound(p => p.UnitPrice);
			columns.Bound(p => p.UnitsInStock);
		})
		.NoRecords("No records found.")
		
		.Pageable()
		.Sortable()
		.Scrollable() 
		.DataSource(d=>d.Ajax().ServerOperation(false))
		.Filterable()
		.Groupable()
	)

Environment

• Kendo UI version: 2017.3.1026

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]

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

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

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

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

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

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]