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

Bug report

When .Navigatable() is enabled, the Grid renders an aria-describedby attribute in each td element. The value of the attribute should match the id value of the respective column header. This works for standard columns bound to fields in the data, but doesn't work for a selectable column:

columns.Select();

The selectable column header element (th) does not render an id. The td elements of that column render an aria-describedby attribute, the value of which does not match any element id. This causes an accessibility issue (Ticket ID: 1530928).

Reproduction of the problem

Reproducible with the MVC helper:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
	.Name("grid")
	.Columns(columns =>
	{
		columns.Select();
		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()
	.Navigatable()
	.Scrollable()
	.HtmlAttributes(new { style = "height:550px;" })
	.DataSource(dataSource => dataSource
		.Ajax()
		.PageSize(20)
		.Read(read => read.Action("Orders_Read", "Grid"))
	)
)

Current behavior

The selectable column header element (th) does not render an id.

Expected/desired behavior

The selectable column header element (th) renders an id that matches the aria-describedby attribute value of the td elements in the column.

Environment

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

It would be great if we could use the built in column filtering on columns containing arrays.

Or at the very least have a workaround (which I have not been able to find on the site).

I understand that the current implementation relies on the data being flat, but support for the following situation would be great:

- Grid cell is bound to an array and a template is used to display character delimited data (ie. One, two, three, four).

- Column filtering will display multi select options for the data.

When using the Grid Endless Scrolling, is there a way to prevent the existing records from momentarily disappearing as the spinner appears?

Using endless scrolling on a large grid (full screen), the users eye tracks down the list as the mousewheel is turned. At the moment the next page is fetched, the view of the data is disrupted as the spinner appears and the data disappears. This can be quite jarring to the senses when browsing for a specific record in the list.

On a small grid such as that on the example page (https://demos.telerik.com/kendo-ui/grid/endless-scrolling-remote) it isn't quite as jarring on the senses, but with a large grid with many columns and rows, it can be very off-putting.

Ideally, if the existing records can remain opaquely visible in the background under the spinner whilst the next page of data is being retrieved, it would produce a much cleaner user experience.

We set up a grid that auto-filters a name field to "does not contain" and the value it excludes is "[DEACTIVATED]".  This column is also filtering out records that have a null in them if this filter is set.  I had to change the datasource to return an empty string instead.

there seems to be a bug in your commands column and it's made worse when loading/saving grid layouts.

When i load a page with this grid column definition, 

.Groupable()
                    .Columns(columns =>
                    {
                        columns.Command(cmd => cmd.Custom("Undelete")
                            .Click("undelete"))
                            .Width(60);

when you inspect the grid, the grid internally shows two classes for the command cell:

attributes: {class: 'k-command-cell k-command-cell'}

now, if i apply a grid layout, the problem gets worse.  This sample code will cause the dom to end up with multiple k-command-cell classes on the grid's td element.

$("#UndeleteGrid").data("kendoGrid").setOptions($("#UndeleteGrid").data("kendoGrid").getOptions())

<td class="k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell" role="gridcell"><a role="button" class="k-button k-grid-Undelete" href="#" title="Undelete"><span class="k-icon k-i-undo"></span></a></td>

When using template and no DataSource is set Grid NoRecords message is not rendered.

Reproduction of the problem

Define a 'No Records' with template similar to the following article example: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/no-records

@(Html.Kendo().Grid<Grid_Template.Controllers.GridModel>()
    .Name("Grid1")
    .NoRecords(n => n.Template("string HTML template, not centered"))
)

Current behavior

The default message for missing record is displayed: No records available.
"autoBind":false is applied to serialization

Expected/desired behavior

The message from the template is displayed: "string HTML template, not centered"

Workaround:
Add .DataSource(d => d.Ajax()) to the Grid configuration

@(Html.Kendo().Grid<Grid_Template.Controllers.GridModel>()
    .Name("Grid1")
    .NoRecords(n => n.Template("string HTML template, not centered"))
        .DataSource(d => d.Ajax())

)

https://github.com/telerik/kendo-ui-core/issues/6598

Bug report

Reported in: Ticket ID: 1524543. Reproducible in Chrome and Firefox. Not reproducible in Edge
Version 91.0.864.54.

Reproduction of the problem

Dojo example: https://dojo.telerik.com/iqUFarUV/3

1. Hide half of the columns (uncheck them in the column menu -> Columns)
2. Try to resize a column

Current behavior

On dragging the handle the column width automatically increases. Then if you try to decrease the width, you can't go past a certain width threshold.

Expected/desired behavior

The columns can be resized precisely, similarly to when their width is set in "px" instead of "%".

Environment

• Kendo UI version: 2021.2.616
• jQuery version: x.y
• Browser: [Chrome 91, Firefox 89]

I would like to be able to create .bindBoolColumn. I do not want extend the column itself.  I already have extensions for that.

Something like this:

GridBoundColumnBuilder<TModel> BoundBoolean<TValue>(Expression<Func<TModel, TValue>> expression)

public  GridBoundColumnBuilder<TModel> BoundBool<TValue>(Expression<Func<TModel, TValue>> expression)

{

     column = *place create column code here*;
     column.Width(90);
     column.clientTemplate("customtemplate");

}

Currently the ForeignKey column expects data to be loaded in it initially. This could be either local data or remote data.

For scenarios that involve using large data, it would be helpful if we can have more flexibility with the way data is loaded in the column's editor (e.g., DropDownList). For example, we want to use cascading ForeignKey editors. Once a selection is made in the first dropdown, the second cascades and is loaded with the respective data. This is not viable at the moment, because the data must be supplied to the ForeignKey column initially. If an empty collection is passed initially:

columns.ForeignKey(c => c.Field1, new List<SelectListItem>(), "Value", "Text").Width(100);

and the dropdown is then loaded with data after the Grid's Edit popup opens, the ForeignKey column will display the DataFieldValue as text, because no initial data has been provided.

An option to load data on demand would be a welcome performance enhancement.

The NumericTextBox renders two input elements. In a Grid inline editing scenario: https://demos.telerik.com/aspnet-mvc/grid/editing-inline  one of inputs of the NumericTextBox editor does not render a title and there is no label for the inputs. This causes an error for missing form element label in Html static analysis (Wave).

One way for this to be avoided could be using aria-labelledby attribute instead of title. The same aria-labelledby value will be assigned to both inputs pointing to a span or div that contains the input value. This way both inputs will have label and won't trigger the missing label error.

In the Kendo UI for jQuery Grid, fields that are not editable are displayed as text (no input elements) in the Grid's popup editor. The MVC Grid displays all fields that are present in the view model it is bound to in its popup editor.

Implement an option to configure the editable fields, so that the behavior of the MVC Grid matches that of its Kendo UI counterpart.

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]