Unplanned
Last Updated: 26 Feb 2020 14:40 by ADMIN
Created by: Bryan Patrick
Comments: 1
Category: Grid
Type: Bug Report
1

 

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

Need More Info
Last Updated: 02 Mar 2020 15:10 by ADMIN
We need to always display dates to the client in EST.  We do not store our dates in SQL server as UTC but instead in local EST by default (for a number of different reasons.   A simple option in the grid (and other controls for that matter) to ignore the automatic conversion process would be *Very* helpful.   I have seen lot's of posts in different sites asking for this option.  Thank you.
Pending Review
Last Updated: 25 Feb 2020 12:17 by ADMIN

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

 

Unplanned
Last Updated: 03 Feb 2020 15:08 by ADMIN

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] 

 

 


Unplanned
Last Updated: 11 Feb 2020 12:01 by ADMIN
Scheduled for 2020.R1.SP.next

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

 

 

@(Html.Kendo().Grid<Contract>()
                  .Name(GridId)
                  .DataSource(dataSource => dataSource
                      .Ajax() // Specify that ajax binding is used
                      .PageSize(80)
                      .Events(events => events.Error("common.gridErrorHandler").RequestStart("waitWindow.show").RequestEnd("waitWindow.hide"))
                      .Model(model => model.Id(al => al.ContractId))
                      .Read(read => read.Action("ContractsRead", "Contracts"))
                  )
                  .Events(events => events.Change("onRowClick").DataBound("common.onDataBound"))
                  .ToolBar(toolbar =>
                  {
                      toolbar.Template(@<text>
                          <div style="display: inline-block;">Select a service to manage Cost per Office</div>
                    </text>);
                        })
                              .Columns(columns =>
                              {
                                  columns.Bound(p => p.ContractId).Width(45).Title("Reference #").Hidden(true);
                                  columns.Bound(p => p.Name).Title("Service").Width(100);
                                  columns.Bound(p => p.ExpirationDate).Width(60).Format(RequestHelper.GetDateTimeFormat(Request));
                                  columns.Bound(p => p.BillingCycle.Name).Width(53);
                                  columns.Bound(p => p.Value).Title("Amount").Width(75).Format("$ {0:n5}").HeaderHtmlAttributes(new { style = "text-align: right;" }).HtmlAttributes(new { style = "text-align: right;font-weight: bold;" });
                              })
                              .NoRecords(PageResources.lblGridNoRecords)
                              .Filterable()
                              .Selectable(s => s.Mode(GridSelectionMode.Single))
                              .Scrollable(s => s.Virtual(true).Height("100%"))
                              .Sortable() // Enable sorting
                              .Resizable(resize => resize.Columns(false))
                              .ColumnMenu(p => p.Columns(false)))

 

 

Thank you,

Ion Petcu

Unplanned
Last Updated: 29 Jan 2020 10:55 by Mohammed

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
Unplanned
Last Updated: 14 Feb 2020 09:48 by ADMIN
Scheduled for 2020.R1.SP.next

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
Need More Info
Last Updated: 21 Jan 2020 08:10 by ADMIN
Created by: Hanh
Comments: 1
Category: Grid
Type: Feature Request
2

I'd like to request to be able to merge cells and column filters with the built-in API for the Kendo UI Grid.

Completed
Last Updated: 13 Jan 2020 09:20 by ADMIN
Release R1 2020
Created by: Ikbum Kim
Comments: 1
Category: Grid
Type: Bug Report
0

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? 

 

 

Unplanned
Last Updated: 21 Jan 2020 08:12 by ADMIN

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.

Completed
Last Updated: 23 Oct 2019 08:34 by ADMIN

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!

Unplanned
Last Updated: 30 Dec 2019 14:20 by ADMIN
Created by: Dave
Comments: 1
Category: Grid
Type: Feature Request
3

Hello, 

 

I think there is a bug with the DataTimeOffset field when used in a Grid. It cannot display correctly and is showing something like /Date(1364927400000)/. I have to retrieve my data from database as DateTimeOffset format and then use a new ViewModel to convert the DateTimeOffset values to DateTime values. This is really annoying.

 

Could you let me know if there is a way a DateTimeOffset field can be supported in the grid? Sometimes you do have to display the time zone info.

 

I hope this can be fixed in a future release.

 

Thanks,

Sam

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
Need More Info
Last Updated: 21 Jan 2020 08:21 by ADMIN

When I use a grid, I can enable Filterable and the column shows me when I am filtering it; however if I enable ColumnMenu I have no indication if I am filtering on that column.  We've used a work around to handle this state ourselves, but its ugly and I think this should be part of the core product.

@(Html.Kendo().Grid<ShipmentGrid>()
  .Name("grid")
  .AutoBind(false)
  .Columns(columns =>
  {
  columns.Template(@<text></text>).Width(50).Title("PDFs").ClientTemplate($"<a href='javascript:" + jsPage + $".openDocumentWindow(#=AccountId#, #=OrderNumber#, #=OrderLineId#, #=OrderLineNumber#)'><img src={Url.Content("~/Content/images/pdficon_small.png")} /></a>");
  columns.Bound(m => m.CustomerName).Width(200).Title("Customer").HeaderTemplate("Customer <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
  columns.Bound(m => m.PurchaseOrderNumber).Width(100).Title("PO").HeaderTemplate("PO <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
  })
  .HtmlAttributes(new { style = "font-size:0.85em;" })
  .Filterable()
  .ColumnMenu()
  .Reorderable(reorder => reorder.Columns(true))
  .Resizable(r => r.Columns(true))
  .Scrollable(s => s.Height(340))
  .Pageable(pageable => pageable
  .Refresh(true).ButtonCount(10)
  .PageSizes(new [] { 25, 250, 2500 })
)
  .Sortable(sortable => sortable
  .SortMode(GridSortMode.SingleColumn)
)
  .ClientDetailTemplateId("itemdetail")
  .DataSource(dataSource => dataSource
  .Ajax()
  .Read(read => read.Url("/api/shipments").Data(jsPage + ".getParameters"))
  .PageSize(2500)
  .ServerOperation(false)
  .Events(events => events
  .Error(jsPage + ".GridService.onError")
  .RequestStart(jsPage + ".GridService.onRequestStart")
  .RequestEnd(jsPage + ".GridService.onRequestEnd")
)
)
  .NoRecords()
  .Events(events => events.DataBound(jsPage + ".onDataBound"))
)

Declined
Last Updated: 05 Aug 2019 14:38 by ADMIN
Created by: Christian
Comments: 1
Category: Grid
Type: Feature Request
1

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

Unplanned
Last Updated: 16 Jul 2019 14:48 by ADMIN
Created by: Tech
Comments: 1
Category: Grid
Type: Feature Request
0
At the moment, it requires converting NodaTime objects into System.DateTime ones in order to be correctly handled by the control. This is suboptimal from both performance and maintainability perspectives.
Declined
Last Updated: 14 Jun 2019 14:07 by ADMIN
Created by: Ray
Comments: 1
Category: Grid
Type: Feature Request
0

 

To whom it may concern,

     

       I’m one of your subscribed customers. And I’m writing to seek help in order to realize a filter display I want KendoGrid to show.

 

The following screenshot is the date filter display that KendoGrid has:

Can it be changed to the similar way as the following picture shows?

 

It is also acceptable if the filter can provide 3 different options to easily choose from for users:

  1. Before a certain date that the user can choose from a calendar just like the picture above
  2. After a certain date
  3. Between two dates
  4. In a certain date 

Thanks.

 

Best Regards,

BLACK STREAM

If KendoGrid can not realize the above requirements, can you please provide an alternative plan?
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.

Unplanned
Last Updated: 16 Dec 2019 09:16 by ADMIN

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.

1 2