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

Exemplary configuration:

@(Html.Kendo().Grid<MyApp.Models.SampleTable>()
	.Name("grid")
	.ColumnMenu()
	.Scrollable(s => s.Enabled(true).Height("auto"))
	.DataSource(dataSource => dataSource
		.Ajax()
		.Model(model => model.Id(p => p.PrimaryKey))
		.Read(read => read.Action("Read", "Home")) 
		.Sort(sort => sort.Add("ColumnDate").Descending())
	)
	.Resizable(resize => resize.Columns(true))
	.Columns(columns =>
	{
		columns.Select().Width(60);
		columns.Group(group => group
			.HeaderTemplate(@<text><a class='k-link myHeaderTemplate' href=''>@ViewBag.MyHeaderTitle</a></text>)
			.Columns(c =>
			{
				c.Bound(x => x.Field1).Width("10%");
				c.Bound(x => x.Field2).Width("15%");
			})
    );
		columns.Bound(c => c.Field3)
			.Filterable(ftb => ftb.Operators(op => op.ForString(str => str.Clear().Contains("Contains"))));
		columns.Bound(c => c.Field4);
		columns.Bound(c => c.Field5).Hidden(true).Format("{0:dd-MM-yyyy hh:mm:ss tt}").Filterable(f => f.UI("dateFilter").Cell(cell=>cell.ShowOperators(false)));
		columns.Bound(c => c.Field5).HtmlAttributes(new {style="text-align:right" })
			.Filterable(f=> f.Cell(c=>c.Template("intFilter")))
			.HeaderHtmlAttributes(new { style="text-align:right" });
		columns.Bound(c => c.Field6).Filterable( f=>f.Cell(cell=>cell.ShowOperators(false).Operator("contains")));
		columns.Bound(c => c.Field7);
		columns.Bound(c => c.Field8);
	})
	.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
	.PersistSelection()
    .Pageable(pager => pager
        .PageSizes(new int[] { 10, 20, 30 })
    ) 
    .Sortable()
    .Filterable()
    .Editable(e => e.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
    .Excel(excel => excel
        .FileName("Export.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
    )
)

For a sample project, contact Ivan Danchev or Georgi Yankov.

Reproduction of the problem

If one of the columns (e.g. Field6) has a long header title calling the autoFitColumn and passing the column to it does not properly resize the column. The column remains narrow and its header text remains cut off.

Similarly, the method does not have the expected effect on columns with shorter text in the header, i.e. they remain wide instead of shrinking to the text length.

Current behavior

Incorrect column resizing.

Expected/desired behavior

Correct column resizing.

Environment

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

Aligning numeric values in grids is common place and best practise.  Kendo Grid does not provide any neat functionality for this, especially in MVC where the model is strongly typed. Where a MVC grid is bound to a model, the Razor Wrapper would work better if it right aligned columns if for example type int (or other numeric types which are better to be right aligned). Where this needs not to be the case a data annotation would suit.

eg.

public class MyModel
{
   [AlignRight(false)]
   public int ProductID {get; set;}

   public int Age {get; set; } // aligned right by default in Kendo Grid because of int type
}

In the above case ProductID would be left aligned, and Age would be right (which could be the default for all integer types)

With this functionality the razor implementation could also provide an align property to override align functionality.  An AutoAlign property could provide this functionalityto auto detect from model  or not (and also allow this functionality as being off to provide backwards compatibility)

     @(Html.Kendo().Grid<MyModel>()
        .Name("grid")
        .AutoAlign(false)
        .Columns(columns =>
        {
            columns.Bound(c => c.ProductID).AlignRight(false)
            columns.Bound(c => c.Age).AlignRight(True)
        })

Bug Report

When the grid is bound to an external dataSource, the AutoBind(false) setting is not serialized and as a result, the grid binds immediately

Reproduction

• Take the basic usage grid demo https://demos.telerik.com/aspnet-mvc/grid/basic-usage
• Extract the data source and set it to the grid
• set AutoBind(false)

    @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("myDs")
    .Ajax(r=>r.Read(a=>a.Action("Customers_Read", "Grid")))
    )
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .AutoBind(false)
        .DataSource("myDs")
        /* other settings */
    )

Current Behavior

Expected Behavior

The grid should not bind initially.

Environment

Kendo UI version: 2020.2.617

Hey,

I might have found another bug.

The "Change" Event isn't triggered for checkboxes if GroupPaging is set to true.

If it's disabled, the event gets caught as expected.

Html.Kendo().Grid<PlotWhitelistViewModel>()

.Name("whitelistGrid")
                  
                   .Columns(c =>
                   {
                       c.Bound(x => x.Id).Hidden();
                       c.Select().Width(50);
                       c.Bound(x => x.ArticleNo);
                   })
                   .Events(x =>
                   {
                       x.Change("onWhitelistGridChange");
                   })
                   .Scrollable(s => s.Virtual(true))
                   .DataSource(dataSource => dataSource
                                   .Ajax()
                                   .Group(x => x.Add(y => y.ArticleGroup))
                                   .GroupPaging(true)
                                   .PageSize(50)
                                   .Read("GridRead_Whitelist", "Plot", new {plotId = Model})
                                   .Model(m =>
                                   {
                                       m.Id(f => f.Id);
                                       m.Field(f => f.ArticleNo);
                                       m.Field(f => f.ArticleGroup);
                                       m.Field(f => f.IsChecked);
                                   }))

Regards

Nils

I was try to upgrade Telerik UI for Asp.Net to 2020.2.513 form 2019.3.1023 ,but after I done the upgrade , 

the checkbox in the grid was disappeared with nothing change in my code.

I use the simple function columns.Select(), it seems the <label for='xxx#' class='k-checkbox-label k-no-text'></label>  no been build.

Is there anything I need to do after upgrade ?

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

Hi, with the latest version of kendo ui on existing hundred grids when I try to filter for a column I get an error like:

This kind of grid worked perfect on previous versions.

Uncaught TypeError: Cannot read property 'length' of undefined

    at init._eachRenderedMenuItem (kendo.all.js:52792)
    at init._setMenuItemsVisibility (kendo.all.js:52747)
    at init._updateMenuItems (kendo.all.js:52742)
    at init.open (kendo.all.js:52609)
    at init.trigger (kendo.all.js:164)
    at init._triggerEvent (kendo.all.js:51935)
    at kendo.all.js:51154
_eachRenderedMenuItem @ kendo.all.js:52792
_setMenuItemsVisibility @ kendo.all.js:52747
_updateMenuItems @ kendo.all.js:52742
open @ kendo.all.js:52609
trigger @ kendo.all.js:164
_triggerEvent @ kendo.all.js:51935
(anonymous) @ kendo.all.js:51154
setTimeout (async)
(anonymous) @ kendo.all.js:51143
each @ jquery-3.4.1.min.js:2
each @ jquery-3.4.1.min.js:2
open @ kendo.all.js:51140
_mouseenter @ kendo.all.js:51465
i @ jquery-3.4.1.min.js:2
handle @ jquery-3.4.1.min.js:2
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2

Thank you,

Ion Petcu

Bug report

The responsive pager of the grid is shown when the width of the window is a few pixels above 1024 but less than 1035.

Reproduction of the problem

Dojo sample for reproduction:

https://dojo.telerik.com/oNejEYOz

1. Resize the browser to be around 1025 pixels. Just after showing the full pager, refresh the page.

2. The responsive pager is shown.

Expected/desired behavior

The full pager should be shown.

Environment

* **Kendo UI version:** 2020.1.114
* **jQuery version:** 1.12.4
* **Browser:** [all] 

I downloaded the latest version of Kendo UI (Version: 2020.1.406) for MVC and upgraded my project to refer the latest JS, CSS and Kendo.MVC (2020.1.406.545).

NoRecords method is behaving differently in the latest version. While fetching records in progress, it displays the 'No record found' message even before completion of the action method. Please see the below image:

It was not happening in the version 2018.2.516, it was showing the 'No record found' message after completion of the action method and only if there is 0 row returned.

Below is the code of Student.cshtml view:

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.

https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

In addition to the Foreign Key editor template, populate a list which holds all the categories and pass it via the ViewData - you can see how this is done in the ForeignKeyColumnController.cs PopulateCategories() method.

On the above page, the above statement is made.  Other than the function call to PopulateCategories() I don't ever see the actual code run in the function shown anywhere.  Can someone please add that code and/or point me to my misunderstanding?

Thank you.

Court Harris
Equity Residential

I've been using the "Change" event to handle a Single Row Selection grid as that seems to be the event to use to determine when the user selects a row.

I just tried adding "persistSelection(true)" to my grid but it seems to be triggering a change event when I switch to another page and back to the previous page, or do an external $(this).data('kendoGrid').dataSource.read() on the grid.

How can I only get a change event when the USER selects a row, not the persistedSelection selecting the row?

Or at least detetect where it came from it in my Change event?

Thanks,

Bryan

Good Day,


I have a custom CSS CLASS that renders the background-color of the grids TABLE ROW to 'yellow'.  

• tr.background-color-yellow td { background-color: #FFFFCC; }

For example...the above CSS CLASS would 'color' the backgrounds of a TR's set of TD's.

<!-- Here is an example of the initial HTML containing the custom CSS CLASS  -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row" class="background-color-yellow">
	<td role="gridcell">11</td>
	<td role="gridcell">1111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td class="k-command-cell" role="gridcell">
		<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
			<span class="k-icon k-i-edit"></span>Edit 
		</a>
		<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
			<span class="k-icon k-i-close"></span>Delete
		</a>
	</td>
</tr>

THE ISSUE
When using inline-editing on the grid...pressing the CANCEL button wipes-out & replaces any-and-all custom CSS tags in the TR.

<!-- Here is an example of the initial HTML AFTER PRESSING CANCEL...notice the custom CSS CLASS is gone -->
<tr data-uid="7044a8d8-2946-43f4-9f94-01bff52d2800" role="row">
	<td role="gridcell">11</td>
	<td role="gridcell">1111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td role="gridcell">111</td>
	<td class="k-command-cell" role="gridcell">
		<a role="button" class="k-button k-button-icontext k-grid-edit" href="#">
			<span class="k-icon k-i-edit"></span>Edit 
		</a>
		<a role="button" class="k-button k-button-icontext k-grid-delete" href="#">
			<span class="k-icon k-i-close"></span>Delete
		</a>
	</td>
</tr>

THE WORK AROUND
This bug causes the following kinds of work-around...which I feel is unacceptable.

this.on = {
	cancel: {
		grid: function (e) {

			var isTemplatedRow = e.model.IsTemplatedRow;
			if (isTemplatedRow === false) {

				// HACK: Kendo overwrites the (tr) rows ENTIRE SET of CSS CLASSES after a 'cancel' is triggered
				var uid = e.container.data().uid;
				var $context = $(e.container.context);
				setTimeout(function () {

					// Add the expected class back-in
					var $ele = $('tr[data-uid=' + uid + ']', $context)
					$ele.addClass('background-color-yellow');
				}, 400);
			}
		}
	}
};

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

When endless scrolling is implemented, manual DataSource operations using the DataSource APIs(query, page, sort, etc.) do not work as expected.  The endless scrolling settings are causing paging issues.  

Reproduction of the problem

1. Visit this Kendo UI Dojo.
2. Scroll to 40.
3. Click the Reset Filter button.

Current Behavior

The first page is only accessible, and when scrolling down the reads continue to occur.

Expected/desired behavior

The endless scrolling settings should not interfere with manual dataSource operations.

Workarounds

1. Solution when read is called, the Kendo UI Grid will reset to its original state(dojo). 
   

       kendo.ui.Pager.fn._refreshClick = function (e) {
           e.preventDefault();
           var grid = $("#grid").getKendoGrid();
           grid.dataSource.options.endless = null;
         	grid._endlessPageSize = 20;
         	grid.dataSource.pageSize(20);
       }

2. Solution which overrides the data(dojo).
   

       kendo.ui.Pager.fn._refreshClick = function (e) {
           e.preventDefault();
           var grid = $("#grid").getKendoGrid();
           window.restoreScroll = true;
           window.scolledValue = grid.content[0].scrollTop;
           grid.dataSource._data.empty();
           grid.dataSource._pristineData = [];
           grid.dataSource.read();
       }

Environment

• Kendo UI version: 2020.1.114

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