Enhancement

JAWS includes hidden columns upon reading the column numbers.


Expected/desired behavior
Hidden columns shall not be included when JAWS reads the column number.

Hidden columns lack aria-hidden="true" property.

Environment
Kendo UI version: a[all]
Browser: [all]

Enhancement 

FIltering a string field in the Grid with Contains operators and value null throws an error
Reported in 1492459

Current behavior
FIltering a string field in the Grid with Contains operators and value null throws an error

https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding

Expected/desired behavior
An error shall not be thrown

Environment
Kendo UI version: [all]
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

### Bug report

When the GroupPaging option is enabled and the grid is bound to a DataTable, the server error "Value cannot be null" is observed.


### Environment

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

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

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

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

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]

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 ?

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

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

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]