Pending Review
Last Updated: 16 Oct 2019 10:51 by T

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!

Pending Review
Last Updated: 27 Aug 2019 10:51 by ADMIN
When using data attributes on a viewmodel for a grid popup editor:
1. Provide input that causes a validation error message to appear
2. Correct the error with new input, do not blur the final field
3. Click save.
4. Instead of validating the data and submitting, only validation occurs
Pending Review
Last Updated: 29 May 2019 16:14 by ADMIN
Created by: Manu
Comments: 1
Category: Grid
Type: Bug Report
1

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

Pending Review
Last Updated: 28 May 2019 10:04 by ADMIN

When the page first loads, everything looks okay...

 

But if I show a hidden column...

 

Here's what happens...

The newly shown column is circled in blue. The problem, as you can see, is that the position of the column circled in red should actually be swapped with the column to the left of it. And column #2 (ordering from left to right in the picture, starting from #1) now has an incorrect parent header ("Average") - it should be "Total". And column #4 (the one circled in red), "Constrained", should have a parent header of "Average" (that gray one in column #2).

 

And just FYI, if I show another column (which should also be under "Session Time [minutes]")...

 

...then here's what we get...

(Newly shown column circled in blue.)

 

But, you can see that the data columns are placed correctly. Just not the headers.

Pending Review
Last Updated: 17 May 2019 08:51 by Prashanth
Created by: Prashanth
Comments: 0
Category: Grid
Type: Bug Report
1

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

Pending Review
Last Updated: 11 Jan 2019 09:19 by ADMIN

I'm trying to create a kendo grid inside of a kendo splitter in ASP.Net MVC. My problem is the pager info (i.e. "1 of 20 items") is not displayed on load. If the splitter is moved or a button inside of the splitter is pressed the grid resizes and the pager is displayed correctly. When there are more than 10 pages and the pager numbers and pager info size change to accommodate more digits the pager wrapper is not drawn correctly every time when changing pages.  This issue seems to only be present when the grid has a toolbar

I have tried using the dataBound event to resize the grid elements, but the pager div is not computed yet. I also tried applying a flex box to the pager wrapper and that did not change anything. I added a size to the splitter and it fixed the issue when set to 400px. But when set to something like 33% the issue persists. I need the splitter pane to be bigger than 400px on load so that fix does not work. 

I replicated the issue in this dojo: https://dojo.telerik.com/URIbinEY/12. The issue appears when in fullscreen mode on a 1920x1080 monitor. I have attached screen shots from my application showing the issue while navigating with the pager. paging 1.png shows the initial load fixed using a flex-box. paging 2.png shows navigating to the second page. The pager info is resized and moved off screen. paging 1.2 shows navigating back to page 1. There is a white space left at the bottom. Paging 3 shows the end of the pages. Paging 4 shows clicking the "..." to the previous paging page and the pager info being hidden. Paging inspected shows that the pager info is in the DOM, but resized off the screen when the toolbar is drawn. 

The expected result should show the pager info on load and the grid should fill 100% of the splitter pane. The pager info should be adjusted when navigating to another page in the pager to always be displayed. 

Any help with this issue will be much appreciated. Thanks!