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
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]
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);
}
}
}
};
Ticket: #1461445
Current behavior
Resizing a column in a group with resizeColumn() resizes always the last column in the group and not the respective one.
Minimal reproduction of the problem with instructions
Dojo: https://dojo.telerik.com/eWoFexan
Environment
kendo ui version 2018.3.1017 and above
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:
<h4>Student</h4><div class="responstable grid-wrapper custom-dropdown">
@(Html.Kendo().Grid<Kendo2020Demo.Models.Student>()
.Name("StudentGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.Name);
columns.Bound(p => p.Address);
})
.HtmlAttributes(new { style = " min-height: 100px;" })
.NoRecords("No record found.")
.Scrollable()
.Filterable()
.Sortable()
.ColumnMenu()
.DataSource
(
dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetData", "Home"))
)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
</div>
https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
In addition to the Foreign Key editor template, populate a list which holds all the categories and pass it via the ViewData - you can see how this is done in the ForeignKeyColumnController.cs PopulateCategories() method.
On the above page, the above statement is made. Other than the function call to PopulateCategories() I don't ever see the actual code run in the function shown anywhere. Can someone please add that code and/or point me to my misunderstanding?
Thank you.
Court Harris
Equity Residential
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]
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
### 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]
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]
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]
Bug report
When there are 3 levels of filter nesting in the URL clearing of a filter does not apply
Reproduction of the problem
1. Go to https://demos.telerik.com/aspnet-mvc/grid/serverbinding
2. On “Product Name” column apply filter “Contains” with value “a”
3. On “Unit Price” column apply filter “Is greater than” with value “1”
4. On “Units In Stock” column apply filter “Is greater than” with value “1”
5. On “Product ID” column apply filter “Is greater than” with value “1”
6. Clear the filter on “Product Name” column
Expected result: no more filter on “Product Name” column
Actual result: “Product Name” column still has a filter
A workaround is provided in the following Dojo:
https://dojo.telerik.com/UJewihaX
Environment
Kendo UI version: all
Browser: all
Bug report
Error is thrown when using Kendo HTML Editor Control in Kendo Grid Popup EditorTemplate in IE only
Reproduction of the problem
Place Kendo editor in Grid popup template
@(Html.Kendo().Grid<TelerikMvcApp2.Models.Person>().Name("persons")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.PersonID))
.Read(read => read.Action("GetPersons", "Home"))
.Update(up => up.Action("UpdatePerson", "Home"))
)
.Columns(columns =>
{
columns.Bound(c => c.PersonID).Width(200);
columns.Bound(c => c.Name);
columns.Bound(c => c.BirthDate).Format("{0:g}");
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
)
Person.cshtml
@(Html.Kendo().EditorFor(model => model.Text))
1. Run and open in IE
2. Click edit, make a change in the popup and Save
2. Click again on Edit
https://www.screencast.com/t/kZFZ9hZNEp
Expected/desired behavior
No error is thrown
Environment
Kendo UI version: 2020.3.118
Bug report
When the Kendo UI Grid is configured to have endless scrolling and an item is updated on the first page, the scrollbar is reset. If an update is done on a page after the first one, the scroll is correctly persisted.
Reproduction of the problem
1. Set a grid with an endless scroll.
2. Scroll down (without entering the second page).
3. Update an item on the first page.
4. The scroll is reset.
Dojo sample for reference:
https://dojo.telerik.com/EcUKIrAK
Environment
* **Kendo UI version:** 2021.1.330
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
Reproduction of the problem
https://demos.telerik.com/aspnet-mvc/grid/persist-state
- Add a search panel to the Grid: .ToolBar(t => t.Search())
- Save its state and then load the saved state
Current behavior
The search panel disappears from the Grid's toolbar.
Expected/desired behavior
The search panel is present in the Grid's toolbar.
Environment
- Kendo UI version: 2021.2.616
- jQuery version: x.y
- Browser: [all]
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 ]
Bug report
Reproduction of the problem
Reproducible in:
https://demos.telerik.com/aspnet-mvc/grid/editing-inline
and
https://demos.telerik.com/aspnet-core/grid/editing-inline
- Put a row in edit mode.
- Inspect the input in the ProductName column
Current behavior
The input does not have a title attribute or label.
Expected/desired behavior
The input should either have a title attribute, like in the Kendo UI for jQuery Grid, or since we use a TextBox component as editor in MVC and Core, a label should be rendered.
Environment
- Kendo UI version: 2021.2.616
- jQuery version: x.y
- Browser: [all]
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.
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.