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]

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

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]

### 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] 

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:

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

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] 

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

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

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

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

add a grid to a view

open the view with data bound to the grid.

First line of data is not selected.

Now i have to program the ondatabound property for a function which belongs to the grid component. Make it configurable for grids which do not need this feature or vice versa.

When I use lock column, margin is created in the right scroll of the grid. Did you know this problem?
How can I fix this problem? 

We are using the Kendo UI for different components like Grid in our APS.Net MVC application. Currently we are experiencing an issue while exporting the Kendo grid to Excel from mobile (both android and ios). It shows the following warning message. The same works when exporting from a PC without any issue. Could you please help to resolve the issue.

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!

It would be nice, if you can create a build-in property or function to create icon-only buttons/commands in a grid.

Actually it requires some workaround to realize this.

This Example create an edit button with the k-button-icontext class, but i want only an k-button-icon button. The destroy button gets the button name as default text.

@(Html.Kendo().Grid<WidgetDashboard.Models.Widget.WidgetData>()
    .Name("adminWidgetGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(150);
        columns.Bound(p => p.Active).Width(75);
        columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(""); }).Width(300);
    })
    //.ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(p => p.Refresh(true))
    .Sortable()
    .Scrollable()
    .Resizable(r => r.Columns(true))
    .HtmlAttributes(new { style = "height:450px; width: 100%" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        //.Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ID))
        .Create(update => update.Action("Admin_Create", "Dashboard", new { id = Model.DashboardId }))
        .Read(read => read.Action("Admin_Read", "Dashboard", new { id = Model.DashboardId }))
        .Update(update => update.Action("Admin_Update", "Dashboard", new { id = Model.DashboardId }))
        .Destroy(update => update.Action("Admin_Destroy", "Dashboard", new { id = Model.DashboardId }))
    )
)

Alternative it would be ok if the correct css class is given when an empty string is specified.

Thank you

Christian