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

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

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.

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]

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

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 ?

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]

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

Hello,

since I updated Telerik UI for ASP.net MVC from version 2019.1.220 to 2019.2.514, the paging part of the grid doesn't display as expected in IE11 with compatibility with IE9  (<meta http-equiv="x-ua-compatible" content="IE=9">)

If I remove the compatibility with IE9, it's ok, but I need it to support older computer.  

version 2019.1.220: 

version 2019.2.514:

 Is there a solution to display it correctly?

Thank you very much and best regards.

Emmanuel Tharin

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!

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

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

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

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

A recent update has revealed some strange behaviour in some (not all) grids. In the attached screenshot, the javascript for the two buttons is on display inside the toolbar. If I move them out of the toolbar, the script no longer displays.

As a workaround, I have added this to CSS:

script {
	display: none !important;
}

Bug report

In the Less themes the textboxes and the other editors (e.g., NumericTextBox) in the popup of the Grid are misaligned. The rendering of the textboxes in the MVC and Core Grid is different when compared to the Kendo UI for jQuery Grid.

Reproduction of the problem

Reproducible in the Popup Editing demos (Core and MVC).

1. Click the "Edit" button in a random row.
2. Inspect the Product Name Textbox in the browser

Current behavior

The width of the TextBox does not match the width of the NumericTextBox.

The rendering differs:

<span class="k-widget k-textbox k-valid" style=""><input data-val="true" data-val-required="The Product name field is required." id="ProductName" name="ProductName" value="" data-role="textbox" aria-disabled="false" class="k-input k-valid" autocomplete="off" data-bind="value:ProductName" style="width: 100%;"></span>

vs

<input type="text" id="ProductName" name="ProductName" title="Product Name" required="required" autocomplete="off" data-bind="value:ProductName" class="k-textbox k-valid">

Expected/desired behavior

Identical rendering and alignment.

Environment

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

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]

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